Design en Drupal Forretnings tema i Photoshop
For å markere den nylige utgivelsen av Drupal 7.7, kommer jeg til å gå gjennom å utforme en enkel nettside som kan konverteres til en funksjonell Drupal tema. I denne første delen, vil vi dekke grunnleggende photoshop teknikker, for eksempel stiler, slicing, guider, lagstruktur og mye mer.
Jeg vil også diskutere Drupal struktur og hvordan vi tillate det i vår design. La oss begynne
Trinn 1: Oppsett
Dette er hva våre grunnstrukturen vil se ut. Disse områdene er omtalt i Drupal som regioner, som kan inneholde ulike mengder informasjon.
Begynn med å åpne 960_grid_12_col.psd du lastet ned fra 960 Grid nedlasting linken over. Gå til Image> Canvas Size og bredden til 1240 piksler og høyden til 1480 piksler endres, vil dette gi oss litt ekstra plass å jobbe med. Kontroller at du har linjaler (Ctrl + R) og veiledninger (Ctrl +;) slått på
Trinn 2: Lag Struktur
Opprett en ny gruppe (CRT + G) og kaller det '. HOME ', deretter legge 6 flere grupper innen det:' header ',' kjennetegnet ',' velkommen ',' søyler ',' container 'og' footer '
Trinn 3:. Bakgrunn
Lås opp bakgrunnslaget ved å klikke på ikonet låsen øverst i lagpaletten
Dobbeltklikk på det laget og gi det en farge overlegg av # f3f3f3
Trinn 4..: Header Bakgrunn
Under 'header' legge til to nye grupper kalt 'header container' og 'header bg'. Neste innenfor 'header container' legge til to grupper 'logo' og 'nav ".
Hvis du vil lage en ny guide gå til Vis> New Guide. Nå kan du legge en horisontal guide på 100px.
nå opprette et nytt lag i "header bg 'name it' bg '. . Tegn et rektangel mellom de horisontale guider 0 og 100px og fyll den med # 327aa7
Legg et strøk: 1px inne farge:. # 295f94
Trinn 5: Logo
skape nye horisontale guider på 30px og 70px.
I 'logo' gruppe, skriver i noen logo tekst med følgende innstillinger:
Trinn 6: Navigasjon
Fra den vertikale guide 630px, skriver i noen navigasjon lenker: "hjem", "tjenester", "portefølje", "om", og "kontakt". Skille dem med 8 piksler
Trinn 7:. Utvalgt Bakgrunn
Den inneholdt delen vil være en region i vår Drupal tema og vi vil konfigurere slider blokk til bare vises på hjemmesiden i del to av denne opplæringen.
Under "kjennetegnet 'skaper to nye grupper' omtalt container 'og' omtalt bg '. Innenfor 'omtalt container' legge 3 nye grupper: 'piler', 'kuler' og 'image'
Opprett nye horisontale føringer på 140px, 460px og 500px.. Innenfor "omtalt bg 'gruppe legger et nytt lag som heter" bg "og tegne et rektangel fra 100px til 500px med fyll av # 338fca
Legg et strøk gradient:
Trinn 8: Slider Bilde
Innen 'omtalt container ">" image "opprette et nytt lag og gi den navnet" plassholder ". Neste tegne et rektangel fra 140px til 460px, fyll med #FFF og plass i et stort bilde.
Høyreklikk på bildet og velg opprette klipping maske Opprett nye horisontale føringer på 280px og 320px Gå til din egendefinerte formen verktøyet og velg en pil se på veiledningen opprettet tidligere og tegne en pil i mellom de vertikale føringer 172px og 210px. Sett formen i piler gruppen og gi den navnet "prev". Neste gå til å redigere> omforme og velg Roter 180 grader. Endre sin opacity til 50% og legge en farge overlegg # 000. Duplicate at pilen og flytte den til den andre siden av glidebryteren på 1030px (vertikalt) og deretter gå til Edit> Transform> Roter 180 grader Opprett nye horisontale guider på 470px og 480px. Nå tegne en 10x10 sirkel mellom de vertikale føringer 610px og 620px, fyll den med #FFF og kaller formen 'nåværende'. Flytt laget til kuler gruppe Duplicate den sirkelen to ganger, flytte dem 3px hverandre til høyre, og navngi begge lag 'inaktiv' Legg til en indre shadow med disse innstillingene:.. Legg til en farge overlay med # 327ba8 Hvis du vil kopiere disse stilene på den andre knappen, hold ALT og dra fx stil på neste lag Det endelige resultatet..: Velkommen regionen vil inneholde tittelen på siden og en blokk for vår oppfordring til handling knappen Opprett en ny horisontal guide på 600px. . Innenfor "Velkommen" gruppe opprette to nye grupper: "velkommen container" og "velkommen bg ' Lag et nytt lag under' velkommen bg", kaller det "bg", tegne et rektangel fra 500px til 600px. Opprett en ny gruppe innen "velkommen container" og gi den navnet 'side Opprett nye horisontale føringer på 525px og 575px; og fyll med #FFF Legg et strøk. -title h1 ' Legg til litt tekst som "Velkommen til virksomheten mal" med følgende innstillinger: Opprett en annen gruppe innen "velkommen container" og gi den navnet "call to action". Nå tegne et avrundet rektangel med en 5px radius fra 790px til 1090px Legg til en lineær gradient # 338fca til # 327ba8 Nå kan du legge litt tekst med følgende innstillinger. kolonner regionen vil bli konfigurert til å kun vise på hjemmesiden akkurat som på bildet slider Opprett nye horisontale føringer på 640px, 660px, 700px, 810px og 840px Oppsett mappestrukturen som dette: I h2 mappen legge til en tittel med følgende innstillinger: Legg til et ikon fra ikonene som følger ovenfor. Flytte den til ikonet mappen og flytte den venstre kanten av ikonet til guidene 700px (horisontal) og 150 piksler (vertikal) I p-mappen legge litt dummy tekst på den vertikale guide 230px med følgende innstillinger. Mellom horisontale føringer 810px og 840px. Lag et avrundet rektangel med en 5px radius og fyll med # 338fca Legg til noen "les mer" tekst inne knappen med disse innstillingene. Gjenta dette trinnet to ganger til for å skape den andre to kolonner, bare endre opp ikonene og titler Setup beholderen mappestrukturen som dette: Opprett nye horisontale føringer på 880px, 920px og 1180px. Lag et nytt lag i "bg" -mappen og kaller det "content-bg '. Nå tegne et rektangel fra 880px til 1180px med en bredde på 620px og et fyll av #FFF Gi det et slag: I "h2" -mappen legge til en tittel under 920px horisontal guide og på 190px vertikalt Opprett ny en horisontal guide på 960 x og legg til litt dummy tekst med disse innstillingene. Nå kan du legge i "les mer" -knappen, bare kopiere en fra kolonner seksjon og sted 20px fra p tekst Nå skal vi jobbe på sidepanelet, som vil dukke opp på hjemmesiden Innen oppsett sidepanelet mappen mappestrukturen som dette: Lag et nytt lag: 'søk bg "og sette den i" søk ">" bg "mappen. Neste tegne et rektangel fra 880px til 920px med en bredde på 300px, fyll den med #FFF Place i søkeknappen nær slutten av søkeskjemaet og fyll med # 999. På den horisontale guide 960 x skriv inn en tittel: "User Login" med følgende innstillinger: Opprett en ny horisontal guide på 1000px og i "bruker" -mappen legge en gruppe etiketten. Nå kan du legge tekst: "Brukernavn" med disse innstillingene: Opprett nye horisontale guider på 1020px og 1050px Opprett en ny gruppe "innspill" og et nytt lag "u-bg '.. Nå tegne et rektangel i mellom disse guider med en bredde på 160px og fyll med #FFF. Opprett nye horisontale guider på 1070px, 1090px og 1120px. Duplisere brukergruppen og flytte det ned til 1070px. Endre navnet 'brukernavn' etiketten til "passord". Opprett nye horisontale guider på horisontal guide på 1140px og 1170px. Å skape innloggingsknappen gjenta trinnene fra "les mer" -knappen ovenfor Innenfor "footer" -mappen oppsettet mappestrukturen som dette: Opprett nye horisontale guider på 1260px og 1360px. Innenfor 'bunntekst-bg' gruppe, opprette et nytt lag "bg". Nå tegne et rektangel i mellom førerne som er opprettet i den siste delen, og fylle med # 999 Opprett en ny horisontal guide på 1290px Innenfor lenker gruppen, legge inn noen tekstlenker..: "hjem", "tjenester", "portefølje", "om" og "kontakt" med disse innstillingene på 150 piksler vertikalt guide. Innenfor sosiale ikoner gruppen legge på Facebook, Twitter og rss ikoner på 470px vertikal guide. Skille dem ved 6PX Innenfor «copyright» gruppe legge til noen opphavsrett tekst med følgende innstillinger på 790px vertikal guide Vi re kommer til å skjære logoen som et bilde. Du kan bruke området navnet ditt som logo, men i den andre delen av denne opplæringen vil jeg vise deg hvordan du laster opp et bilde logo for Drupal i stedet. Grab skive verktøyet og tegne et rektangel rundt logoen. Høyreklikk på stykket rektangel og velg rediger stykkealternativer. Gi det "logo" og gi den en bredde på 90px og høyde 45px. Nå skjule 'header bg' lag og "bakgrunnen" lag så logoen vår er gjennomsiktig. Gå til File> Save for web og enheter, og velg PNG24 med åpenhet sjekket. Pass på at du klikker skivene alternativet «Markerte skiver" når du lagrer Neste vi vil skjære søkeknappen Gi det "søke-btn" og gi den en bredde på 16px og høyde 16px. Nå skjule 'søk bg 'lag og' bakgrunnen 'lag. Gå til File> Save for web og enheter, og velg PNG24 med åpenhet sjekket. Opprett et nytt dokument med en bredde på 940px og høyde på 320px. Neste legge inn noen store bilder for bildeskyveknapp For hvert bilde går til File> Save for web og enheter, og velg JPEG med 100 kvalitet og progressiv belastning Opprett et nytt dokument med dimensjoner på 10px av 24px. Gå tilbake til vår design psd og kopiere over glideren kuler vi opprettet tidligere. Skape nye horisontale føringer på 1px, 11px, 13px, 23px. Nå satt ut kulene som nedenfor: Gå til File> Save for web-enheter og velg PNG24 med følgende innstillinger Opprett en ny dokument med dimensjoner på 76px x 40px. Gå tilbake til vår design psd og kopiere over glideren pilene vi opprettet tidligere. Sett ut pilene som følger: Opprett en ny vertikal guide på 38px Gå til File> Save for web-enheter og velg PNG24 med følgende innstillinger Nå, med de generelle og sosiale ikoner vi plassert i vår design, de kan være skiver opp, men jeg bare kommer til å laste dem opp fra ikoner mappen som ble levert Dvs slutten av design delen av denne korte serien! Husk å sjekke ut del to hvor vi tar denne designen og gjøre den om til en Drupal tema! Jeg håper du likte å følge med, takk for lesing!
på "plassholder" lag.
Trinn 9:.. Slider piler
Trinn 10:. Slider Bullets
Trinn 11: Velkommen §
Trinn 12:.. Kolonner
Trinn 13:. Innhold
Trinn 14:. Sidebar Søk
Trinn 15: Sidebar innlogging
Trinn 16:. Footer
Trinn 17:.. Slicing Logo
Trinn 17:. Slicing Søk Button
<. p> Tegn et stykke rektangel rundt på søkeknappen. Høyreklikk på stykket, og velg rediger stykkealternativer.
Trinn 18: Slider Images
Trinn 19:.. Slider Bullets
Trinn 20:. Slider Arrows
Trinn 21. .: Ikoner
Konklusjon