Share
Jag är ett stort fan av fotocentriska webbdesigner? så idag är jag glad att starta en ny "fullständig webbplats" handledning som riktar sig till fotografer, illustratörer och andra visuella annonsmaterial. I dag 1 ska jag utforma mallen i Photoshop med några speciella knep och tekniker. På dag 2 går vi igenom förberedelser inför kodningsfasen, som vi kommer att gå över i detalj i dag 3. På dag 4 visar vi hur du skapar tre helt olika webbplatser med samma rå HTML. Klar för att komma igång? Nu gör vi det!
Som med alla webbdesignprojekt är det viktigt att identifiera målen för något projekt? så innan vi dyker in, låt oss säga några ord om vad våra slutliga mål är:
Det sista jag ska nämna är kanske det viktigaste: det måste vara 100% anpassningsbar med minsta möjliga mängd arbete! Vad betyder detta för oss? Jag skulle vilja att någon skulle kunna re-brand och re-skin hela layouten utan att någonsin behöva röra rotan runt med omskrivning av någon av kärnhtml. Det betyder ideellt att genom att byta ut några bilder (logotypen och en anpassad bakgrundsbild) och en del CSS, kan ett helt annat resultat skapas? Det är därför på den sista dagen i denna serie vi ska ägna och hela sessionen för att skapa anpassningar!
Oj, med våra mål nu tydligt definierade, låt oss börja!
Videotutorialen är avsedd att vara en följeslagare till den skrivna tuten nedan. Tänk på det som "kompletterande" material - jag kommer inte att täcka allt som finns i den skriftliga delen, men ibland är det bara trevligt att se någon annan jobba i Photoshop för att hämta andra knep, effektivitetstips och andra tekniker som du annars inte skulle kunna vara van med.
Den fullständiga skriftliga steg-för-steg-guiden finns nedan. Vi börjar med ett tomt Photoshop-dokument, men du kan också hämta demo PSD för att kontrollera ditt arbete mot mina.
Börja med att skapa ett nytt dokument med storleken 1280 x 800px. Varför? Eftersom det här kommer att ge oss en fin stor duk att leka med. Bredden på vår slutliga design kommer faktiskt inte att vara 1280px, men vi vill se lite bakgrundsfärg precis som vi normalt sett skulle se i ett stort webbläsarfönster.
Det första praktiska dilemmet med ett webbprojekt är att bestämma storleken på det dokument som du ska arbeta med. I vårt fall skulle jag vilja att designen sitter framför och mitt på skärmen, fyll upp så mycket utrymme som möjligt på en mindre bildskärm - och se inte för liten på en stor bildskärm.
Breddskoncept: Jag väljer att använda 994px som den totala bredden. Detta nummer är något godtyckligt - det kunde ha varit några px bredare eller några px mindre, men i slutändan kommer det att göra jobbet. Varför? Eftersom den passar inuti 1003px "säker zon" för de mest populära webbläsarna som används just nu, med lite vaddering på vardera sidan för att vara säker.
Höjdhänsyn: Jag ska arbeta med höjden på 644px inuti Photoshop Höjden är ett annat godtyckligt nummer vid denna design. Varför? Eftersom 1) det kommer att kunna justeras från CSS, 2) vi kommer att låta detta "flex" för att passa innehållet som vi kasta inuti och 3) jag är mindre oroad över vikhöjden än vad jag kan vara för en större skala projekt.
Det viktigaste att notera här är att allt detta kommer att vara 100% justerbart från CSS när vi är färdiga. Så, om du råkar föredra en bredare layout med en mer grundhöjd, kommer du att kunna få just detta inom några sekunder efter att du bestämmer din preferens. Tanken här är att hålla saker flytande trots att vi använder en fast storlek mall? så få inte alltför hängt på de exakta siffrorna just nu.
Varning: Detta "håll det flytande" tillvägagångssätt är faktiskt unikt för den här mallen? Jag börjar vanligtvis något projekt med mycket mer raffinerad analys för att hitta den perfekta storleken, som vi kommer att gå över i andra tut-serier.
Medan det finns många fördelar med att använda ett förbyggt nätverkssystem (som 960gs eller 978gs), har jag en ganska tydlig bild av vad jag vill bygga och inte hitta ett nätsystem som omedelbart kommer att rymma min design, jag Jag har valt att freestyle denna layout.
Vilka är följderna av freestyling en layout? För en måste vi vara mycket mer försiktiga med dimensionerna för varje innehållsmodul som vi skapar eftersom vi inte har guider som berättar för oss var saker ska gå. För att skapa en riktigt likformig mall, måste vi bara vara så mycket mer noga med att skapa vårt eget nätverkssystem som är infödd till denna mall.
Rita den rundade rektangeln: Nu när vi bestämt oss 994px med 644px Som vår behållarstorlek, fortsätt och rita en rundad rektangel av den storleken (med en 12px radie). Öppna informationspanelen (Fönster> Info eller F8) för att se storleken på din rektangel när du ritar den.
Observera att färgen på rektangeln inte spelar någon roll vid denna punkt. Medan vi så småningom blir vit, vill vi nu se det stå ut ur bakgrunden.
Skapa skuggningseffekten: Jag ska använda samma metod som vi använde i "Skapa din egen Juicy Tabbed Slider" -handledning eftersom det är det enklaste sättet att få en skugga som blir lätt att skära och bli en genomskinlig PNG när det är dags för kodning.
För att skapa denna skugga, ta bara ditt borstverktyg och sätt det till 60px i storlek och 0% hårdhet.
Sedan, skapa ett nytt tomt lager att dra på, håll ner Flytta nyckeln för att rita en rak linje och helt enkelt dra din markör över ungefär hälften av behållarrektangeln.
Slutligen använder vi Gratis omvandling verktyg (Cntrl + T) för att vinkla det väldigt lite för att skapa en böjande effekt (jag använde mig om 2,5 för vinkeln). Varför vinklar detta alls? Eftersom det kommer att bidra till att skapa lite extra dimension om ljuskällan verkar böja ut lite.
Låt oss nu kopiera det penslade lagret (Cntrl + J medan den väljs på skiktet) och vrid den horisontellt (Redigera> Transformera> Vänd horisontellt). Skjut det nya vända penselskiktet över tills det bara överensstämmer med den andra sidan av behållarrektangeln. Resultatet ska vara en skugga som är motsatsen till den första.
Flytta båda skugglagren bakom ramen? skikt och skala dem (välj båda lagren och tryck Ctrl + T) så att de passar precis inuti den totala bredden av ramrektangeln.
Slutligen sammanfoga båda skugglagren tillsammans (Ctrl + E) och skugga skuggskiktet på rätt plats (använd det grundläggande urvalsverktyget [V] och använd tangentbordet för att nudge). Du kan också justera skuggskiktets opacitet för att passa dina egna personliga preferenser. Jag använde mig om 60%, du kan göra mer eller mindre enligt vad du är ute efter.
Bonus Steg: För att lägga till ännu mer djup, använd Perspektiv Transform på skuggan så att det verkar gå tillbaka i rymden. Applicera bara en liten Gaussisk suddighet på skiktet när du har förvandlat det för att ta bort pixelartefakter.
Det här är ett bonussteg om du letar efter ännu mer drama: försök att skapa ett dubbletter skugglager som är 70% mindre (använd Free Transform och procentuell skalning för att justera detta), oskärpa mer och med en annan opacitet (70 %) för att skapa en "kärnskugga" på insidan av den primära.
Gå vidare och namnge dina skugglager (när du är färdig med att spela med dem) och placera dem i en ny lagermapp kallas skuggor. Organisationen kommer att göra anpassningen mycket enklare när vi är redo att skära upp det här!
Skapa bakgrunden:
Bakgrunden som vi ska skapa är ett subtilt ljusblått "ljudmönster". Jag ska gå över det här snabbt, men för att lära mig mer om att skapa dessa mönster, kolla in vår fullblåsta handledning på dem här.
Börja med att skapa en nytt tomt lager och fyller den in med vit (Skift + F5).
Låt oss nu lägga till lite ljud med Filter> Buller> Lägg till Buller. Du kan justera detta till dina egna preferenser, men jag har använt det 14% för beloppet.
Ställ in det nya "ljudskiktet" på Multiple under blandningslägespanelen och rita en rektangel (fyll färg # e1ebef) bakom detta lager.
Sist, låt oss lägga till ett nytt justeringslager (Layer> Nytt justeringslager> Färgton / Mättnad) över dessa andra två lager så att vårt ljud inte är tråkigt gammalt grått.
Under justeringspanelens justeringslager (Fönster> Justeringar), Använde jag inställningarna för (Färg: 200, lör: 100 och ljushet: +60) med rutan Färgläggning markerad. Du kan leka tills du får din egen önskade effekt.
Gå vidare och placera dessa tre nya lager (adj. Lager, bruslagret och bakgrundsfärgskiktet) till ett nytt lagermapp kallas "bakgrundsfärger".
Slutligen, låt oss fortsätta och göra vår behållarkassas färg Vit nu när vi har lagt till lite bakgrundsfärg. Jag har också lagt till ett ljus 1px slag runt vår behållarkassa (# d8d8d8 i färg) för att hjälpa den att sticka ut ur bakgrunden.
Vid den här tiden borde ditt dokument se ut så här:
Dina lager ska också organiseras så här:
Nu när vi har skapat och utformat vår grundläggande innehållsbehållare är det dags att börja fylla i innehållet. Vi börjar med Navigation Sidebar eftersom det kommer att definiera hur mycket utrymme vi har för innehåll senare.
Hur bred borde det vara? Sidebarets bredd är verkligen upp till dig? Jag har valt att använda 235px som bredd, för det kan mer eller mindre passa de saker jag vill ha där (gott om plats för långsidetitlar, sociala medier och en sökfält). Du kan justera detta för att passa dina egna behov men? och som jag har sagt hela tiden, kommer detta alla att justeras från CSS senare.
För att börja, rita bara en 1px linje med samma färg som vi använde för behållarens gräns (# d8d8d8) längs behållarens vertikala axel. Placera den ca 285 px från vänster om kanten.
Därefter kan det vara till hjälp att dra en riktlinje vid denna tidpunkt - ca 20px bort från kanten av behållarens gräns. Vi använder detta som en guide för var du ska placera allt vårt innehåll så att sakerna ser likformigt och väl inriktat.
Jag kommer inte att gå in på för mycket djup här, för du ska nog använda din egen logotyp;). Kort sagt, jag har börjat med en enkel ramikon (från den ädla uppsättningen ikoner) och lagt till mitt eget foto i ramen. Sedan använde jag typsnittet Museo vid 26pt; Med hjälp av 2 olika vikter och färger för att skapa viss visuell variation ställer jag in titeln på vår mall, "ShutterPress" fint bredvid ikonen.
Återigen vill du förmodligen använda din egen logotyp (eller en klient) på det här steget? så jag kommer att hoppa över lagstilarna och andra tweaks. Känn dig fri att kolla in dem i demo PSD men!
Placera helt enkelt logotypen i sidospalten. Observera att vi använder ungefär samma mängd topp-vaddering och högerpolning som vi använde för polstring på vänster sida.
Lite trick som att hålla utrymmet runt ett objekt lika viktig som logotypen är en av de saker som kommer att göra skillnaden mellan bra design och en bra design.
Accordionnavigering är det första funktionella elementet som vi kommer att håna på. Som sådan är det värt att notera att vi ska komma in i något gråområde här. Vi vill spotta upp det som om det användes? huvudsakligen så att om vi visar detta till någon (som en utvecklare), förstår de hur det ska se ut i alla möjliga interaktiva stater.
Som sådan vill vi visa en aktiv länk, liksom minst en öppet dragspel och en stängt dragspel.
Jag använder en enkel typsnitt för detta - Lucida Sans på 12pt med den ledande uppsättningen till 36pt med den svarta färgen på # 252525. Jag brukar föredra att använda Skarp anti-alias inställning för webbfonter i Photoshop mockups, men du kan använda vad du vill.
Jag använder också en liten variant för den aktiva länken: Djärv med färgen inställd på # 0285da, vilket händer att efterlikna logotypen samt bakgrundsfärgen.
Använd några enkla tangentbord mellanrum för att dra in länkarna som så småningom blir våra dragkedjor nestade länkar.
Observera att vi använder samma vertikala riktlinje för att hänga texten så att den snyggar med logotypen.
De 36pts ledande är mycket att ställa in en enkel horisontell linje mellan varje länk, så låt oss gå vidare och göra det nu. Använd färgen #EAEAEA för dessa horisontella linjer, vilket är något ljusare än vår primära kantfärg. Varför? Det hjälper till att fastställa att dessa regler är något mindre fasta än de andra.
Låt oss nu lägga till dragspelsknapparna. Börja med att skapa en 2x radius avrundad rektangel storlek 11px med 11px. Lägg till följande lager stilar:
En ljusgrå gradient (# E6E6E6 till vitt) från botten till toppen, respektive.
en 1px Outstroke av #bfbfbf.
Duplicera det knapplagret och lägg till en enkel text "+" och "-" för att slutföra knapparna. Placera dem enligt följande:
Härifrån använder vi samma grundläggande stilregler för alla nya element. Borders ska matcha samma grå som vi tidigare använt. Polstret bör också vara ungefär detsamma som vi har använt för tidigare element. Teckensnittsstilar och färger kommer att göra detsamma. Som sådan kommer jag inte att dra dig med att skriva om dessa anteckningar, bara ha dem i åtanke!
För Social Media Widget, fortsätt och ta tag i ikonuppsättningen du väljer (eller kolla in vår stora sammanställning av ikoner här). Vi ska använda 16px med 16px versioner av vilken ikon som du väljer. Demon använder den här uppsättningen, men du kan använda vad du vill.
Jag har också valt att Desaturate de sociala ikonerna (Bild> Justeringar> Desaturate) så att de inte distraherar från kärninnehållet. Lägg till ikonerna eller ditt val (utrustad med några px) och lägg till i din "Social:" text så att de har en titel.
Lägg till i våra horisontella gränser för separation och lämna lite utrymme nedan för vår sökfält.
Sök widgeten är super lätt att skapa. Bara rita en 25px lång rundad rektangel (8px radie) med en 1px slag av # e0e0e0 och släpp in en förstoringsglasikonen. Jag använde den från Fugue-uppsättningen ikoner (det är gratis), men du kan använda din egen för att lägga till någon stil eller flare.
Whallah! Vårt sidofält är nu gjort. Du kan lägga till egna anpassade widgets eller lämna den som den. Det är dags att fylla vårt innehållsområde med lite, bra innehåll!
Jag ska göra saker lite bakåt i de följande två stegen. Normalt skulle du starta en webbdesign med hemsidan design? den sida som folk kommer att först komma fram till. Detta händer dock att det är ett sällsynt fall där undersidan (dvs. galleriets mall) är förmodligen viktigare än den faktiska målsidan.
Så, med vetskap om att jag alltid kan skapa en smidig hemsida design, kommer jag att börja vår innehållsdesign med Galleri Mall eftersom det innebär fler problem för oss. Chef bland dessa problem är:
Det roliga är att när vi har löst dessa problem kan vi faktiskt skapa hemsidan ganska snabbt. Genom att starta här tillåter vi oss att kunna skapa ett mörkareal för mördare utan att försöka möta några begränsningar som vi eventuellt skulle kunna lägga på oss genom att börja med hemsidan.
Okej, låt oss börja!
Jag ska börja med att skapa en grundläggande mängd vaddering som jag alltid vill förbli runt innehållsområdet. I vårt fall har jag valt 32px för att vara beloppet. Det är lite mindre än navigeringslinjens höjd, men inte så liten att sakerna känns täta eller begränsade.
Det lämnar mig med ett aktivt område av ungefär 696px med 586px (igen är höjden flexibel, så vi är inte hemskt oroade över det).
Med vårt aktiva innehållsområde definierat, vill vi nu välja den perfekta miniatyrstorleken och vadderingen. Att räkna ut detta är inte raketvetenskap? Jag spelade egentligen bara med flera arrangemang av grymma ritade rektanglar tills jag hittade något som såg ut harmonisk.
Nu vet jag att ordet harmoniskt inte är särskilt specifikt? så vad menar jag? Genom att veta att jag vill passa om 15-20 bilder per sida försökte jag våra olika miniatyrstorlek / rymdkombinationer tills jag hittade en som återspeglade en bra balans mellan positivt och negativt utrymme och en raffinerad känsla av hierarki. Saker som Golden Ratio spelar in i detta, men jag ska vara ärlig och bara erkänna att jag eyeballed det i det här fallet. Det finns ingen magi på här? bara massor av experimenterande.
Så vad är slutformeln? en 155px bred vid 125px lång miniatyrbild, in i 4 kolumner (och i vårt fall 4 rader också, vilket fyller upp vår höjd).
Polstret: Det finns ungefär 21px horisontell separation mellan varje miniatyr och ca 18px vertikal separation. Varför skillnaden?
Eftersom vi har att göra med ett "landskap" -layout (vilket betyder att det är bredare än det är smalt), känns det bara rätt att bibehålla samma formförhållande över hela vår design.
Lägg märke till hur den slutliga miniatyrstorleken som jag plockade speglar också detta landskapsförhållande. Så det är vettigt att vi lämnar lite mindre vaddering mellan raderna än vi placerar mellan kolumnerna.
Här är det slutliga resultatet:
Observera att jag har lämnat ungefär 50px utrymme längst ner för att infoga någon form av pagination (det sätt som användarna kommer att navigera från en sida med miniatyrer till nästa). Naturligtvis, om det inte finns tillräckligt med miniatyrbilder för att utlösa paginering, skördar vi layouten närmare längst ner.
Den visuella utformningen av miniatyrerna är också viktig. Eftersom vi tar så stor omsorg för att skapa mycket lite putsa detaljer i hela vår design, ser vanliga gamla miniatyrbilder med hårda kanter känns råa.
Vi lägger till lite subtil stilering för att lätta upp det här och ge vårt galleri en förfining. Applicera följande lagstil till var och en av dina miniatyrbilder:
En 2px Inner Stroke (i CSS-termer kommer detta att bli stoppning) #EAEAEA
En 1px Drop Shadow (i CSS-termer blir det här gräns) # F2F2F2
Jag zoomar in på 100% här för att visa dig den sista stilen:
Nu när vi har etablerat vårt nät, låt oss lägga till några riktiga bilder för att ge denna layout lite liv:
Vi är nästan färdiga med den här sidan? nu behöver vi bara en väg för användarna att navigera från en sida med miniatyrer till nästa. Detta kallas pagination. Det finns många sätt att göra detta (lite mer komplicerat än andra). I vårt fall vill vi ha en enkel paginationsmetod? så jag väljer att använda en enkel vänsterpil | högerpil-tillvägagångssätt - dvs: (). Detta är en av de mer intuitiva metoderna för pagination, så det är vettigt för vår situation.
Låt oss fortsätta och skapa två cirklar med 18px diameter:
Lägg märke till att jag helt enkelt har kopierat / klistrat in lagerstil från dragklockans knappar som vi använde tidigare. Varför? Eftersom dubbla visuella stilar bidrar till att vår layout känns enhetlig? och det finns verkligen ingen anledning att slösa ansträngningen på att försöka utforma en helt ny stil. Konsekvent lagerformad användning kommer faktiskt att hjälpa användbarheten hos vår webbplats.
När du har ritat dina cirklar lägger du till i pilarna (detta visas redan ovan). I mitt fall använde jag en anpassad> form i Photoshop, men du kan lika lätt använda en anpassad text ">" -symbol. Eftersom det här inte är en nybörjare, antar jag att du kan räkna ut hur man får den här formen på något sätt;)
Fena! Det faktiskt slutför denna innehållssida. Genom att använda samma grundläggande stilar och vadderingsregler som vi har etablerat kan vi enkelt ändra detta till andra rutnätlayouter (till exempel ett 2x2 rutnät eller ett 3x3 rutnät).
Okej - På till sista steget i design sessionen! Vi kan förmodligen reda ut hur man skapar olika andra supportsidor, men vad vi verkligen behöver nu är hemsidans design. Att detta är en fotografins målmall, bör ett fotografi självklart ta det centrala steget. Vi behöver också lite beskrivande text (för en fotograf att förklara vem han / hon är, vilka tjänster de erbjuder etc.)
Breddskoncept: Under de flesta omständigheter skulle vi bara kopiera över det aktiva innehållsutrymmet som vi använde i Galleri Mall. Jag ska byta saker lite upp genom att ändra vaddering från 32px till 20px. Varför? Detta ger oss bara lite extra utrymme för att använda en "Full storlek" bild. Det är ett mycket subtilt skifte i den övergripande layouten, men effekten ska vara enorm eftersom vi kommer att kunna passa en massiv bild i utrymmet.
Höjdhänsyn: Som vi har sagt hela tiden är höjden verkligen variabel och kommer slutligen att lämnas upp till enskilda användare / designers / klienter för att bestämma hur mycket innehåll du vill ha på den här sidan? I mitt fall kommer jag att försöka hålla dimensionerna på den här sidan på samma sätt som vår gallerysida.
Resultatet av dessa överväganden är ett aktivt utrymme som är något större än vad vi använde i gallerimallen: 720px med 604px.
Det här är förnuftigt för oss av några anledningar: 1) det ger oss gott om utrymme att designa runt och 2) det passar in i de flesta populära webbläsarens "fällbara" utrymmen. Så länge vi inte lägger någon viktig information nära själva botten av detta område, borde vi ha det bra att använda detta utrymme på något sätt vi kanske tror.
Ritning av bilden: Börja med att skriva en 716px bred vid 438px lång rundad rektangel (Radius: 10px).
Applicera följande lagerformat, börja med a 2px slag:
Och lägg även till en inre skugga (som hjälper till att göra vår bild "pop" mer på sidan):
Den slutliga visuella stilen ska se ut så här:
Skapa flikarna:
Flikarna kommer att vara sättet att användarna kommer att kunna cykla genom bilder på hemsidan. Detta är i grunden bara en grundläggande jQuery-karusell när du tänker på det när det gäller kodning? men det finns ingen anledning att begränsa oss till de visuella stilar som de flesta förbyggda reglaget kommer att använda som standard.
Så, låt oss bli lite mer kreativa med vänster / höger flikar genom att skapa några visuellt intressanta inre cirklar.
Börja med a 92px diameter cirkel form. Använda sig av Svart för fyllningsfärgen och ställ in opacitet till 57%.
Använd rektangulärmarkeringsverktyget för att göra ett val som löper längs vår "bildbehållare" och använd det här valet för att skapa en lagmaske.
Lägg nu till "
Så du borde ha det här:
Gå vidare och gruppera dessa lager i en grupp, duplicera sedan den, vänd den kopierade gruppen horisontellt och skjut den över till höger:
Nu behöver du bara dra en bild på det runda rektangelskiktet (gör bilden a Clipping Mask av det lagret) så vi kan se hur det här verkligen kommer att se ut:
Skapa rum: Att bestämma storleken på dessa utrymmen har lika mycket att göra med hur mycket utrymme vi vill ha mellan dem som hur mycket utrymme vi vill att de ska ta upp. Jag vill ha inte mindre än 20 px separering mellan varje modul (för att förhindra att de ser jumbled upp), så vad vi får är en modul layout något som detta:
I själva verket kommer dessa moduler att bli mer spridda än detta eftersom texten inte kommer att rättfärdigas på höger sida? så det är gott om utrymme. Tänk på att dessa moduler är osynliga? eller snarare, det finns ingen bakgrundsfärg eller något liknande. Bilden ovan är bara för att illustrera hur jag har kommit till mitt avstånd.
Lägga till titlar: Vi lägger nu till några titlar för varje textmodul. Placera varje titel längst till vänster om de dolda rektanglarna som vi skapade i det sista steget. I demo ska jag använda typsnittet Museo för titlarna? vilket råkar vara detsamma som logotypen. Självklart vill du justera typsnittet så att det passar ditt eget projekt. Så här visar demoteksten:
Lägga till beskrivande text: Den beskrivande texten för varje modul kommer därefter. Vi använder det grundläggande Lorem Ipsum-skriptet här, men du kanske vill använda en viss text för att testa linjens höjd och teckensnitt som fungerar bäst för dig. Så här är demoen gjord som:
Lägga till bildikoner: Slutligen, låt oss lägga till 16px med 16px ikoner för att lägga till visuellt intresse för modulerna. Kom ihåg att släcka över titlarna också:
Och det är allt! Här är de slutliga bilderna som vi skapade idag. Klicka på var och en för att visa den i full storlek:
Accentsconagua