Share
Er du i humør for noe annet? Jeg vil veilede deg i prosessen med å skape design av Stuff - horisontalorientert blogg og portefølje. Pass på at du besøker Stuff online versjon for å se det endelige resultatet!
Gjør det 1300 x 800 px. Alt det plassen er egentlig ikke nødvendig, men det er godt å føle den panoramiske karakteren av designet mens vi jobber.
Opprett et nytt fyllingslag ved hjelp av den faste fargen # bfc6cd
Konverter nytt lag til en "smart objekt" (høyreklikk> Konverter til smart filter) og bruk filteret> Legg til støy (du kan justere det senere hvis det er nødvendig, takket være funksjonen for smart filtre). Lås laget. For å holde prosjektet rent og organisert, kan du slette lagets maske og gjøre det til standard bakgrunnslag (valgfritt).
Opprett en ny pilform med forhåndsinnstilt "formverktøy". Bruk deretter direkte utvalgsverktøyet til å justere formene slik at det ser fint ut (flytt poengene som du ser).
Velg Free transform verktøy, flytt pilen 310px fra toppen, og ta og flytte den horisontale linjalen for å lage en ny guide. Fest den til midten av pilen. Fra nå av vil det representere den største horisontale aksen på nettstedet.
Legg til 4 stiler på pilen (ved å dobbeltklikke på laget): slipp skygge, indre skygge, ytre glød og gradientoverlegg (fra #cbcbcb til #ffffff).
Legg til et nytt tekstlag over pilelaget.
Legg til stiler til tekst: indre skygge, gradientoverlegg og slag. For en bedre dybdeeffekt, gjør berøringen bare synlig i den nederste halvdelen av teksten ved å bruke et "gradient" -slag med alfainnstillingene for topphalvene satt til "0" opacity.
Ytre og indre skygger gir pilen mer 3D-utseende, men for å gjøre det enda bedre, la oss lage en enkel, lys lys effekt. Opprett et nytt rektangel og bruk Konverter punktverktøyet til å endre form for å lage en liten krumning. Vi maskerer dette over pillaget for å skape en blank effekt.
Sett dette laget fyll til 0% og legg til gradient overlay stil med subtile forsvinner hvit.
For å unngå at lyslaget går over pilen: ctrl + klikk på pilelaget for å lage et valg legg lagmask til lyslaget
For å fokusere seernes oppmerksomhet på logoen, gjør et lys for å stå pilen ut av bakgrunnen. Du kan bruke en primitiv metode som er:
Lag et hvitt 240px bredde rektangel (høyden skal være litt høyere enn dokumentet).
Over bildet, opprett ny tekstboks og fyll den med blogg tittel. Bruk en kondensert skrift som League Gothic (gratis ved League of Moveable Type). Under bildet, opprett en annen ny tekstboks for det generelle innholdet.
Lag et valg for innholdet og opprett et nytt maskelag for det store rektangelet. Endre masktettheten til 80%
Legg til ytre (svarte) og indre (hvite) glødestiler til striplaget for det mer 3D-utseende.
Legg til meta info tekst over innlegget. Jeg har brukt 12px Georgia kursiv, 17px linjehøyde. Husk å bruke guider til å holde tekster i en linje
Lag "les mer" tekst under innlegget
Ett lag under det, opprett nytt rektangel for å være en leser-knapp.
Legg til gradient og strekkstiler til den. Tips: Gjør stoke inne, for å få helt skarpe hjørner av knappen
Legg også til en subtil gradient til tekstlag.
For å lage merket, bruk et annet rektangel, legg til tekst (jeg har brukt Arial), og roter begge lagene sammen 45 grader.
Legg til maske i rektangellag for å skjule unødvendige hjørner
... og legg til 2 små rektangler som en illusjon av merket som går under bildet.
Legg til en subtil skygge til merket. Tips: For skyggeblandingsmodus bruk Normal i stedet for standard Multiply, slik at den får virkning selv om du bruker merket som den gjennomsiktige PNG-filen
Lag et nytt tekstlag. I stedet for svart farge (som kan føle seg unaturlig på lyse bakgrunner), bruk mørkegrå for å oppnå mer naturlig utseende.
Tips: For å lage horisontale linjer i stedet for å bruke linjeværktøy, opprett ikke anti-aliased tekst ved å bruke understreket "_" Det vil alltid være pikselskar og mellomrom mellom linjene er enkle å kontrollere takket være linjehøydeparameteren. Bruk samme linjehøyde som i menyteksten, og opprett så mange linjer som menyelementer, minus ett. Gjør linjene lengre etter behov.
Sett dette laget fyll på ca 15% og legg til en hvit skygge.
Legg maske til linjelag og lakk med jevn børste på den for å oppnå vanvittige kanter.
Lag rektangel med avrundede hjørner (3px) for en søkeinngang.
Legg inn indre skygge i boksen og lag lagets fyll på 70%
Over det legger du til søketekst og lager tilpasset form som en innleveringspile. Legg inn indre skygge i boksen og lag lagets fyll på 70%
Som vektorbilder anbefales for dette formålet foreslår jeg å finne nødvendige logoer i www.brandsoftheworld.com-tjenesten. I de fleste tilfeller er det den raskeste måten. Åpne logoen i Illustrator, kopier skisser og lim inn i Photoshop som former. Du kan også bruke Buddy-ikonene fra Orman Clark.
Sett lagets fyll på 0% og legg til stiler (drop shadow, indre skygge og fargeoverlegg) for å oppnå 3D-utseendet. For å få logoet i den aktive (opplyste) tilstanden, endre farge og intensitet i Fargeoverlegg-stilen.
Kopier denne stilen og kopier til andre logoer (høyreklikk på laget / Copy Layer-stilen)
For å legge til kommentarboks, opprett et annet avrundet hjørne rektangel om 520px bredt og legg til Drop Shadow-stil.
Velg den større delen og legg til maske på dette laget.
Dupliser laget og inverter det er masken. Lag det nye lagets fyll 25%.
I blandingsinnstillingene kontrollerer du alternativet "Layer Mask Hide Effects" for å unngå inkonsekvens i skyggelinjen til begge lagene.
Opprett svart vertikal linje på grensen mellom disse boksene, gjør det fylle også 25% og legg til 1px hvit skygge rettet rett.
Legg til noen eksempler av avatar og tekster ved hjelp av tidligere brukte farger.
Lag sirkelform og lim inn lagstiler fra logotypen. Skjær pilformen fra sirkelen ved hjelp av egendefinert form og skjæringsmodus.
Under dette knappelaget opprettes en annen sirkel - samme størrelse eller mindre, og lim inn gradientstilen fra logoen. Tips: Hvis noen lag har mange stiler, og du vil kopiere bare en, kan du dra stilen mens alt trykkes og slippes til et annet lag.
Legg til lys (på samme måte som ovenfor til logoen pilen).
Hvis du vil gjøre litt forbedring, som ingen vil legge merke til, skape separate lamper for knapp og pilformet hull, og flytt den andre en litt ned. Og hvis du allerede har to separate lys, kan du enkelt (uten ekstra maskering) gjøre knappens lys sterkere for å være bedre synlig på den meget lyse knappen.
Velg alle knappelag og opprett Smart objekt av dem.
Dupliser lag, flytt og vri horisontalt. Nå, hvis du redigerer en pil (dobbeltklikk smart lag), vil begge endres.
Alle andre elementer kan gjøres ved å kopiere, lime inn og endre størrelsen på de eksisterende elementene vi har designet.
Tips: Liga Gothic font og andre kule freeware skrifttyper med webdesigner-vennlig lisenser finnes på www.fontsquirrel.com
OK, så du har PSD mer eller mindre klar, og vil gjerne gå videre. Som ting trenger litt annen tilnærming til innhold, på grunn av sin horisontale karakter, er det veldig vanskelig å kode det riktig. Jeg kjenner ikke til mange horisontale nettsteder som klarte å unngå vanlige feil (for eksempel ikke arbeid med musrulle). Vennligst legg igjen en kommentar hvis du vil vite de beste måtene å kodes denne utformingen, og vi vil se om vi ikke kan ta opp veiledningen til nettstedet!
Uansett, hvis du vil spare litt tid og ha alt på sølvplaten, kan du laste ned HTML-mal eller WordPress-versjon av Stuff for noen få dollar. Takk!
Accentsconagua