Share
I denne opplæringen legger vi sammen et high-end webdesign med en skarp, tynn skrifttype, nydelige bakgrunnsbilder og smart bruk av plass og layout. Du kan enkelt bruke teknikken til å lage dine egne unike design.
Så når du er ferdig med å lese denne opplæringen, kan du krysse over til vår søsterside NETTUTS og følge med ettersom vi bygger designet i ren og enkel HTML. OK, la oss rock'n'roll!
Det er ganske elegant design, som trolig ville passe et designerportefølje-type nettsted, men kunne virkelig bli endret for alle mulige formål. Den stoler på å ha elegant typografi, en strukturert layout og en visuelt interessant bakgrunn.
Den virkelige kraften i denne designen er å vise deg hva som kan oppnås ved å holde det enkelt. På slutten av denne Photoshop-delen av opplæringen vil jeg vise deg hvordan vi enkelt kan bytte bakgrunn og skrifter og forklare Hvorfor dette designet fungerer bra.
Det er en enkel struktur: Horisontal meny, hovedpanel og innholdsområde. Selv om dette er et hjemmeside-design, kan du tenke deg at en interiørside bare ville ha et annet overskriftspanel og nytt innholdsområde. For enkelhets skyld skal vi bare sette sammen hjemmesidenes design.
Først av alt, opprett et nytt dokument. Gruven er 1100px bred x 1100px høy. Dette er slik at jeg kan lage et nettsted laget for 1024px bredt, men har fortsatt plass til å bestemme hva som skal skje utenfor det synlige området, slik at det brytes pent også på større skjermer.
Nå er vår første oppgave å skape en fin abstrakt bakgrunn. For å gjøre dette trekker vi en lineær gradient ned ved hjelp av disse to fargene: # 1b204c til # 472373.
Nå ønsker vi en visuelt interessant bakgrunn som er abstrakt nok til at den ikke distraherer fra teksten. Heldigvis er det et fantastisk akvarellbilde tilgjengelig gratis via GoMedia's Arsenal, klikk på freebie-seksjonen, og du finner to akvareller; Den vi ønsker er den grønne.
Nå mens det er veldig hyggelig som det er det mye kulere hvis vi trykker CTRL + I og inverterer det så det er så fint rosa / lilla på svart.
Kopier nå akvarellen på vårt hovedduk, og trykk Ctrl + T for å forvandle det til en rimelig størrelse. Vårt mål er å få det til å svette til høyre (slik at vi kan bygge vår HTML senere med større letthet). I tillegg vil vi ikke ha det for lang vertikal heller, så det er best å slette litt av overskytende. For å gjøre dette ta en pensel og mal i svart for å bare fjerne bunndelene.
Vær oppmerksom på at det er best å få en børste som har litt tekstur, så det er ikke tydelig at vi slettet deler. Hvis du ruller ned pensellisten, er det en børste som følger med Photoshop som ser ut som den som vises. Det er ikke en dårlig børste å bruke. Selvfølgelig kan du ha noen enda bedre pensler og gjerne bruke dem.
Når du er ferdig, fyll inn noen områder til høyre og bunn med svart slik at hele lerretet er dekket av dette laget.
Nå reduserer opaciteten til akvarellaget til ca 70% og setter blandingsmodus til overlegg. På den måten går noen av fargene gjennom for å skape et bedre utseende.
Nå i et nytt lag over akvarellaget, og tegne rett opp, gjør en Linear Gradient fra svart til gjennomsiktighet slik at etterpå kan lerretet i utgangspunktet falle til svart nede i bunnen.
Neste i to nye lag tegner du et par radialgradienter fra hvitt til gjennomsiktighet, en større enn den andre. Sett disse til Overlay og 40% og 100% Opacities for henholdsvis større og mindre.
I utgangspunktet bør du lage et høydepunkt på bildet vårt for å gi det litt mer tekstur.
Så her er den ferdige bakgrunnen. Det er mørkt, abstrakt og ganske elegant med fargen. Selvfølgelig kan rosa vanligvis ikke være ditt eget valg av farge, og hvis det er tilfelle, vær så snill å legge til et fargereguleringslag på toppen og bruk det til å justere fargen. Jeg liker som rosa / lilla, så kommer til å løpe med den!
Nå lager vi et nytt lag og legger til en "logo". Jeg har egentlig ikke noe formål med dette designet, så jeg bestemte meg for bare å legge inn litt tekst og late som det er min logo. Fordi denne opplæringen er halv Psdtuts + og deretter halv NETTUTS skrev jeg ut en fin liten "psd vs net".
Skriftene jeg bruker her er Egyptian505 BT Bold og Egyptian505 LT BT Light (den lettere versjonen av fonten er det jeg har brukt til "vs").
For å få "vs" -biten til å stige litt, kan du bruke baseline kontrollen i tegnpaletten (vist i det andre bildet nedenfor).
Til slutt lagde jeg også en liten lagestil til teksten med en svak Gradient Overlay som vist og en 1px Inner Glow med hvit.
Nå på dette tidspunktet slår jeg på mine linjaler (Ctrl + R) og tegnet et par guider. Jeg delte siden min i tre kolonner med linjer på 50px, 320px, 610px, 900px. I det minste er det tallene jeg burde ha brukt. Ser på skjermbildet mitt Jeg skjønte bare at min tredje linje er av ... d'oh!
Uansett er poenget at jeg definerer plassen jeg skal plassere alle elementene i, og hvis jeg skulle lage flere sider, kunne jeg bruke dette rutenettet på forskjellige måter. Som det er, med bare hjemmesiden utformet, skal jeg bare bruke de tre kolonnene en gang - litt senere.
OK, så nå tegner vi vår første sorte boks. Med linjene dine og styrerne fortsatt på, lager du et nytt lag og tegner en rektangulær markør (M) som går fra den ene siden til den andre. Fyll den med svart, sett deretter dette laget til 80% Opacity, høyreklikk laget, og velg Blandingsalternativer. Deretter klikker du på Stroke og legger til et 1px hvitt strekk på Utenfor og sett til Overlay. Dette vil gi oss en veldig kul ramme som vil gjøre boksen ser mye skarpere ut.
Dupliserer nå bokslaget, og bruk Ctrl + T, for å endre boksen slik at den har samme bredde, men mye kortere (som vist nedenfor). Dette blir vår navigasjonsboks.
Bytt Opacity til 40% og fyll til 50%. Dette vil gjøre boksen mye svakere og gi litt dybde til de to boksene, noe som gjør en til å virke mer viktig og imponerende enn den andre.
Denne typen kontrast mellom de to boksene er en fin måte å sette visuell forrang mellom elementene. Når brukeren kommer til siden, vil vi at de skal se vår store melding først, og deretter navigeringsfeltet. Ved å ha det bleknet forteller vi brukeren at den mindre fremtredende man skal se på andre.
OK, nå legger vi til litt tekst. Igjen har jeg brukt egyptisk lys her for den store overskriften kopien (det vil være et bilde i den endelige HTML) og Arial for menyelementene (det vil være HTML-tekstkoblinger).
Nå et ord på typografi. Denne utformingen er avhengig av det faktum at vi har brukt et enkelt, rent skrifttype. Å ha teksten fin og stor gjør at den virker veldig fet, men samtidig fordi den er et veldig tynt skrifttype, ser det ut som det ser elegant ut.
Hvis du leter etter et high-end designutseende, er tynne klassiske skrifttyper vanskelig å slå. Da jeg først oppdaget Helvetica Ultralight, husker jeg at jeg ble gal utforming av alle disse designene som så veldig minimal og opp-markedet.
I tillegg har denne spesielle font-egyptiske-en veldig skarp, slab serif, kombinert med en slags squarishness som gjør det ser ganske kult ut (jeg tror).
Det er mange andre flotte skrifttyper du kan bruke. Som en generell regel vil du ha noe mer klassisk utseende. Eller med andre ord, hvis du ikke vet hva du gjør, vil du være borte fra virkelig rare fonter, for eksempel. noe som ser veldig futuristisk ut. Egentlig som en god, generell regel, med mindre du er super trygg, har det en tendens til å være bedre å vende seg mot mer vanlige fonter.
En annen type skrift som ville fungere veldig bra her er noe som er litt teknologisk som ser ut som denne skrifttypen som Chris Garrett Media bruker. Jeg har ingen anelse om hvilken skrifttype det er, eller hva den typen skrift er kalt, men det er ganske pent. Kanskje en slags typofile kan belyse oss i kommentarene :-)
Uansett, etter å ha sett Chris Garrett Medias nettsted, bestemte jeg meg for at det ville være ganske kult å legge til en gradientoverlegg til min type og gi den litt glans. Så som du kan se nedenfor, legger vi til et Gradient Overlay fra svart til hvitt, bleknet litt og i Overlay-modus.
Nå kan vi tegne en ekstra stor svart boks for innholdsområdet. Faktisk kan du bare duplisere det tidligere laget og forvandle det igjen.
Og det får oss til det punktet som vises i bildet nedenfor. Ser ganske kult ut!!
Nå legger vi til litt dummy innhold i innholdsruten. Her har jeg igjen brukt Arial for det meste av teksten, men for overskriftene i stedet for å bruke egyptiske, har jeg gått med Georgia. Georgia er ikke helt så elegant, men er en standard skrift som betyr at jeg kan lage disse overskriftene i vanlig gammel HTML i stedet for å stole på bilder (eller Flash).
Faktisk, med Windows Vista's release er det også en annen semi-standard skrift som ville fungere bra her kalt Cambria. Men Cambria har noen rare gjengivelsesproblemer i Firefox på Mac-maskiner i bestemte størrelser, så vi vil holde oss i god ol Georgia for øyeblikket.
Endelig lagde jeg et nytt lag nederst, fylte det med en mørk, purplish farge, la en 1px kant til toppen, og voila vi har en bunntekst.
Setter alt sammen, siden er klar til å bygge.
Nå er en av de kule tingene om denne designen, vi kan enkelt bytte bakgrunnen og designen fortsatt ser fantastisk ut. Her har jeg byttet den til et bilde fra iStockPhoto, kalt Passion, med en lignende fargevalg. Det er en veldig kul 3D-gjengivelse av lys, og som vår nåværende bakgrunn, er den også abstrakt og visuelt vakker.
Her har jeg brukt et annet abstrakt bilde fra iStockPhoto, kalt Blue Energy. Fordi fargen har endret seg, har jeg også gått gjennom og endret fargene på noen få steder - spesielt teksten - og lagt også stor glød på hovedkopien.
Nå er det usannsynlig at du noen gang kommer til å trenge behov for denne nøyaktige utformingen - nå har jeg skrevet en hel opplæring på den. Så la oss snakke litt om Hvorfor det fungerer bra, fordi det vil hjelpe deg å bruke prinsippene for å skape ditt eget unike utseende.
Det er flere ting som kommer sammen for å lage et design som fungerer her:
Selvfølgelig er det nok flere ting vi kan snakke om som farge og forrang, men jeg tror de viktigste designtypene du bør se på her, er typografien sammen med bakgrunnen. Som en endelig uttalelse til den enden er her et lite bilde som sier alt :-)
Nå nok av denne nambi-pambi Photoshop-ting, la oss gå til å gjøre noen HTML / CSS! Følg videre til den andre delen av denne veiledningen der vi bygger vårt design inn i et fungerende nettsted over på NETTUTS-Web Development Tutorials!
Accentsconagua