Share
Denna handledning guidar dig genom processen och idéerna bakom designen av en professionell webbplats med en funkig känsla i Photoshop. Handledningen läser mycket som en "Välj ditt eget äventyr" roman i hopp om att det kommer att uppmuntra kreativitet och unikhet i din design med lite råd och instruktioner under vägen. Äventyrsdags!
En sak som du kommer att märka när du fortsätter genom denna handledning är hur enkelt den här webbplatsen kan omvandlas till en blogg om design, en mjukvaruföretagets hemsida eller en öppen källkod. Alla modulerna på höger och vänster sidofält kan bytas och flyttas med lätthet och innehållet är utformat för att vara flexibelt.
Under hela handledningen ser du stor vikt vid designprinciperna och användbara Photoshop-metoder för att förbättra ditt arbetsflöde och design av webbplatser. Medan denna webbplats har sin egen stil, är huvudsyftet med denna handledning inte att replikera den här stilen exakt, utan hoppet är att du får ett bättre perspektiv på webbdesign i Photoshop som kan förbättra ditt tillvägagångssätt och öka din produktion.
Ta en titt på bilden vi ska skapa.
Om du inte redan är, hoppa över till 960.gs och bekanta dig med 960-nätet och varför det kommer att vara så användbart för den här handledningen. Medan du är där måste du ladda ner mallen.
När du har laddat ner filen, packa upp den och öppna "960_grid_12_col.psd" som finns under 960_download> Mallar> Photoshop. När du öppnar filen kommer det att framgå hur snabbt det här kommer att göra det möjligt att skapa och underhålla strukturen i dina webbdesigner. Lägg märke till ledlinjerna, så att de kan skapa objekt som snapar perfekt i linje med gallret.
Om du följer guiderna till linjalen kan du tydligt se gridens exakta pixeldimensioner - med 60px breda kolumner och 10px på vardera sidan (skapa 20px mellan varje kolumn). Om du inte ser linjalen eller vill bli av med den, kan du växla med Command + R.
Guiderna är nästan överväldigande; när du börjar utforma kommer de verkligen att komma i vägen. Du kan växla dem genom att klicka på Visa> Extra eller helt enkelt använda genväg Kommandot + H.
Du behöver mer utrymme på din duk för denna handledning. Utöka duken (Command + Alt + C) till 1400px med 1340px. Du kan ta bort allt utom bakgrundslagret. Dubbelklicka på ditt bakgrundslag och tryck på OK för att låsa upp det. Byt namn på det "BG."
Spara (Command + S) den här filen som "my_web_tut01.psd" i sin egen mapp med namnet "my web tut". Efter varje steg i denna handledning ska du slå Kommando + S och varje par steg på kommandot + Skift + S och spara en ny kopia "my_web_tut02.psd", "my_web_tut03.psd", etc. ... Spara verkar som en bra för många designers, men jag har funnit att det fortfarande inte hindrar många professionella från att slacka på detta.
Okej, du har prepped duken, nu måste du rita i bakgrunden och toppområdet. Dra på den övre linjalen för att skapa en ny guide; ta ner den till 120px. Detta blir den nedre gränsen för rubrikutrymmet. Ta ner ytterligare två guider till 130px och 140px. Nu finns det samma bredd på mellanslag mellan rubriken och innehållet som vi har mellan kolumnerna. Det börjar se ut som ett riktigt rutnät!
Använd rektangelverktyget (U) för att rita en svart rektangel över rubrikområdet. Detta förutsätter att du har den ursprungliga svarta uppsättningen som din förgrundsfärg, om du inte bara kan trycka på D för att återställa den. Starta din rektangel utanför duken längs styrningen och avsluta den utanför på andra sidan också. Fördelen med att förlänga detta element är att du inte ser någon av de effekter som appliceras på den omkrets som du kanske vill applicera på din rektangels nedre kant, som en stroke, inre glöd etc. Namn på din rektangel "Header BG. "
Det är dags att börja blockera ut ditt nät. Den här designen består av tre innehålls-kolumner - den vänstra sidofältet spänner över tre kolumner, mitt / huvudinnehållet spänner över sju kolumner och det högra sidofältet spänner över två kolumner.
Medan det fungerar bra för rubriken att sätta in riktlinjer, kommer resten av designen att vara en mer flytande process, så du kommer inte att dra horisontella guider mellan varje sektion. Förtvivlan inte! Du kommer fortfarande att kunna uppnå pixel perfekt avstånd genom att trycka på Skift + Piltangenter medan du har valt Flyttverktyget (V). Varje gång du gör det flyttas lagret 10px.
Du kommer att skapa rundade hörn för denna design. Avrundade hörn gör att ditt innehåll är mycket synligt snittat. Titta tillbaka till den slutliga bilden; märker du hur på "Twitter Feed" -modulen finns det många lådor i en låda med avrundade hörn? Tänk nu om hörnen var alla skarpa - "Twitter Feed" skulle inte känna sig som en enda modul lika mycket.
Du måste också ta hänsyn till att färger, gradienter och typsnitt hjälper till att göra detta till en definierad enhet, men de avrundade hörnen hjälper definitivt. Dessutom är du medveten om att bara avrundade hörn fungerar för den här designen, det finns tusentals vackra platser som inte använder avrundade hörn. Ta en titt på Psdtuts + - varje hörn är skarp; Andra strategier som kontrast och slag används dock för att hålla layouten klar. Ytterligare läsning finns här och här
Nog designhantering! Välj det avrundade hörnverktyget och ställ in hörnradiusen till 8px. Rita en ruta i toppen av vänster och höger kolumner; Ge dig själv lite utrymme att lägga till innehåll senare.
Först skapa ett textområde i mellannivå / huvudinnehållsområdet och fyll i det med en catchy en förpackning som i den slutliga bilden. Använd teckensnittet Rockwell eller annan slabserif vid 40pt med 48pt Ledande (Linjehöjd). Rockwell kan laddas ner här.
Därefter lägger du till lite dummy text nedan och ställer in Verdana vid 12pt med 20pt Ledande. Lägg även till ett par underrubriker som är Verdana Bold vid 17pt med 30pt Leading.
Nu när du har detaljerna, låt oss prata typografi. En allmän regel som du kommer att hitta upprepade i hela webbdesignsgemenskapen är att en webbplats endast ska använda två teckensnitt. I denna layout har jag valt att använda tecknen Rockwell och Verdana. Verdana är ett webbsäkert teckensnitt medan Rockwell inte är det. På grund av detta måste alla instanser av Rockwell vara bilder när denna design konverteras till XHTML / CSS.
Det betyder två saker för dig. Först, för att hålla laddningstiden låg bör du överväga en minimal användning av icke-webbsäkra typsnitt. Den slutliga bilden innehåller färre än tio instanser av Rockwell, huvuddelen av dem sitter överst på något grafiskt element som en knapp som redan kommer att vara en bild vid kodning. För det andra kan du lägga till effekter som drop skuggor och gradienter till texten. Dessa två skäl kombinerar medtagandet av Rockwell, vilket passar bäst för de traditionellt mer dekorerade elementen i en design som rubriker, titlar och knappar.
Det finns ett sista övervägande som kanske inte är tillämpligt på din design och det tar hänsyn till eventuella framtida sökmotoroptimering (SEO) -arbete. All text som är bildbaserad - alla fall av Rockwell för den här webbdesignen - krypts inte och analyseras av Google-robotar. Det innebär att du måste utforma så att det kommer att finnas gott om webbsäkra teckensnitt där sökord kan hämtas av Google.
Nästa punkt på typografi och webbdesign i allmänhet är konsistens, konsistens, konsistens! Om du använder Rockwell för en knapp, använd den för alla knappar! Om du gör några länkar rosa, gör alla länkar rosa! Att vara konsekvent låter din design se skarp och sammanhängande.
Slutligen ett ord om användbarhet och typografi. Din kopia behöver plats att andas, ge den en anständig linjehöjd och du kommer att märka en värld av skillnad. Webbplatsen ilovetypography.com föreslår att din linjens höjd ska vara minst 140% av typsnittstorleken. Du bör också vara medveten om att ett textområde som är bredare än 600px är en belastning på ögonen, men om du kommer att gå bredare skulle det vara en bra idé att öka linjens höjd proportionellt. Det finns alltid mer att lära sig om typografi - här är en bra start.
Svartvit är tråkigt, tid för lite färg! Färgerna på denna design inspirerades av temat Hash One Wordpress
Jag skulle kunna visa dig hur du skapar en anpassad swatch för att ladda med sidans färger, men jag använder inte det här själv. Istället använder du rektangulärverktyget bara en ruta med stora rutor i kanterna och fyller dem med de färger du ska använda. Jag hittar den här metoden snabbare och mer tillgänglig.
De valda färgerna ger en stor kontrast för att ge webbplatsen lite djup. Använd gärna någon kombination som du vill, men snälla överväga kontrast, läsbarhet och harmonier när du väljer dina färger. Om du har problem med dina färger kan du försöka använda färgschemaläggaren.
Färgerna i denna handledning är (från vänster till höger, uppifrån och ner):
Lägg till alla dessa rektanglar i en mapp och namnge den "SWATCHES." Användning av alla kepsar för mappnamn gör det visuellt lättare att hitta mapplager när lagren börjar bli muddlade. Nu skulle det också vara en bra tid att starta mapparna "HEADER," "LEFT SIDEBAR", "MAIN CONTENT" och "RIGHT SIDEBAR". En annan bra praxis att komma in är att färga dina lager för att förbättra ditt arbetsflöde. Högerklicka bara på ögonsymbolen bredvid varje lager för att välja en färg.
Gradienter kan verkligen förbättra din design; Om du inte är försiktig kan gradienterna verkligen inaktivera din design. Här är mitt förslag: Gå galet med dina gradienter, gör bara dem alla mycket subtila.
Dubbelklicka på "Header BG" -laget och välj Gradient Overlay. Klicka på den gradient som kommer upp för att öppna Gradient Editor. Ta bort alla prickar utom de första två förgrunden till bakgrund och förgrund till transparent. Skapa nu en lutning från det mörkaste grået till mittgrået och tryck på nytt för att lägga till det i förinställningarna. Upprepa detta tills du har åtta nya gradienter - fyra mörker till mids och fyra mids till darks. Klicka på Spara för att spara dem i en ny mapp som heter "Tillgångar". Placera sedan den i rotmappen för detta projekt. Nu när du kommer tillbaka till detta projekt eller så kommer du att ha alla gradienter där.
För ditt "Headers BG" -lager, använd mid-to-light gradienten från de mörkgråa prickarna.
För din gradient på "BG" -laget kommer du att vilja skapa en lite mer komplicerad gradient. Det kommer faktiskt att finnas två graderingar i "BG" -gradienten. När det kommer dags att koda kommer de att vara separata bildfiler, men för oss behöver vi bara göra en komplex gradient.
Lägg märke till hur det finns en liten del av lutningen som kommer att bli samma färg? Detta kommer att vara bakgrundsfärgen på din HTML-fil och tillåter webbsidan att växa, men gradienten längst upp för att stanna överst och gradienten längst ner för att stanna längst ner.
Photoshop är ett fantastiskt program, men om jag upptäcker att du skapar logotyper i Photoshop ska jag anmäla dig till Adobe. Logotyper ska skapas i ett vektorprogram - för denna handledning använder vi Illustrator.
Öppna en ny fil i Illustrator och skapa din logotyp (Obs! I verkliga projekt ska du aldrig starta din webbdesign innan du har en logotyp). Medan logotypen i det här exemplet använder Rockwell, är det inte mycket att ha ett tredje teckensnitt för din logotyp. Spara din logotyp i mappen "Tillgångar" där du lägger gradientfilen.
När du har den här logotypen måste vi ta tillbaka den till Photoshop för någon styling. Ta bara upp Illustrator och Photoshop bredvid varandra och dra bitarna av din logotyp till Photoshop. Eftersom varje stycke kommer att ha en unik styling, drar du dem över individuellt i motsats till som helhet, hjälper dig när du börjar styling.
För att justera de separata bitarna lägger du in en version av hela logotypen, sänker insynen och använder som en guide för matchning. Ta bort det när du är klar. Skift-klicka på alla lagrar i logotypen och tryck på Command + G för att gruppera dem i en ny mapp. Byt namn på den här mappen "LOGO" och placera den i mappen "HEADERS".
Varje bit kommer automatiskt att omvandlas till ett smart objekt. Det betyder att de fortfarande fungerar som ett vektorobjekt som i Illustrator - du kan använda Transform Tool (Command + T) fritt utan att förlora kvalitet.
När du har format och placerat din logotyp måste du stile den. Använd de gradienter som du skapade för att ge logotypen ett djup - blanda upp färgerna, men håll den mörkare färgen på gradienterna på botten för båda orden.
Lägg sedan till en droppskugga på en av bitarna. Ställ in blandningsläget för att multiplicera vid 100%. Se till att du har Använd Global Light vald och ställ det till 120 grader, med 1px avstånd, 0% spridning och 1px storlek. Genom att aktivera Global Light ställer du in alla effekter med skuggor i samma grad - kom ihåg konsistens, konsistens, konsistens!
Jag har läst runt människor som visar hur man kopierar och klistrar in ett lager, medan det är en bra metod för lager som är väldigt långt ifrån varandra. Här är några snabba sätt att flytta och duplicera effekter. Precis som när du vill multiplicera ett lager på duken och i paletten Lager genom att hålla ner Alt och dra en ny kopia av det laget - kan du duplicera effekter med samma metod.
Alt-dra på fx symbol i källlagret till det nya lagret och du kommer att ersätta det nya lagret med alla effekterna av det första lagret. Om du bara vill duplicera Drop Shadow men istället för fx symbol, sedan Alt-dra den enskilda effekten till ett nytt lager och du ersätter bara den ena effekten, eller lägger till den om det nya lagret inte har det aktiverat. Använd den här metoden för att säkerställa att alla lager i logotypen har samma droppskugga.
Välj "Header BG" -lagret. Öppna effekterna och lägg till i en svart gräns med 1px med positionen inställd på Inside. Ge det sedan ett yttre glöd som har blandningsläget: Multiplicera, Opacitet på 40%, Svart färg och Storlek på 9px.
Gå tillbaka till Illustrator och skapa några intressanta och kreativa former som kommer att användas som ljus bakgrund för rubrikområdet. Färga formerna vita, dra dem över till Photoshop, sätt deras blandningsläge till Screen och deras opacitet i varierande mängder från 2-10%. Ta en titt på den slutliga bilden, du kommer märka att det finns många cirklar och slag av cirklar som används, dessa skapades alla i Photoshop. För de mer komplexa formerna är Illustrator snabbare, men för cirklar sparar du faktiskt tid bara för att skapa dem i Photoshop.
Nu ska vi göra en cirkel med bara den vita stroke som visas i Photoshop. Skapa en svart cirkel med Ellipseverktyget, öppna sedan effekterna för det laget och ge det en vit streck. Stäng effekterna och ställ sedan in bländläget till skärmen, du kommer att se allt men den vita stroken försvinner. Den största fördelen med detta är möjligheten att ändra strokebredden genom att helt enkelt öppna effekterna och redigera den.
Tillbringa lite tid med detta, experimentera med olika opacitet och kompositioner - skapa några funkiga former som kan hjälpa dig att individualisera denna design. Oroa dig inte om några av dina former är synliga under rubriken, tar vi hand om det här i nästa steg.
Välj alla former och lägg dem i en mapp ovanför "Header BG" -laget. Kommandoklicka på vektormasken (den grå rutan) i "Header BG" för att se hela rubriken vald på duken. Välj nu den mapp du just skapat och klicka på den lilla knappen längst ner i lagret fönster som heter "Add Layer Mask"
Maskering är något jag verkligen inte ser tillräckligt med i min yrkesutövning, det är mycket användbart och snabbt, och det bästa är att det är en icke-destruktiv metod. Tänk på att du kunde ha precis planat formerna i ett lager och raderade området ut. Men då ville du ändra någon del av kompositionen eller stroke på en av cirklarna - maskeringen gör att du går tillbaka och gör förändringar snabbare.
Under rubriken kommer du att märka lite grafik som liknar upp och ner rullande kullar. Använda dina färgfärger och spela med öppenheten kan du uppnå detta utseende. Så småningom kommer dessa att behöva tweaked till kakel horisontellt.
Låt oss överväga en sekund dessa och resten av de icke-funktionella elementen i designen. Det finns en anständig mängd, ja, bara lite slumpmässig grafik. Vilket bidrag lägger dessa till designen? För det första är grafik som det här ett utmärkt sätt att styra känslan och stämningen på en webbplats, ett bra sätt att hjälpa ett varumärkesförökande.
Medan jag inte nästan har kompetensen för att förklara branding, kommer jag att försöka ge dig en snabb översyn så att du kan lägga allt detta i perspektiv. Ett varumärke handlar om ett företag som en konsument känner - känslor, minnen, ljud, färger, erfarenheter, etc. Marty Neumeier, i sin bok The Brand Gap, förklarar extremt tydligt att "Ett varumärke är inte det du säger är det. vad de säger är det. " Så vad har allt detta att göra med grafiken? Tja, medan du inte kan skapa ett varumärke, kan du hjälpa det att växa i kundens sinne genom att kontinuerligt tillhandahålla visuella som stämmer överens med kärnan i ditt företag.
OK, så ta en titt på den slutliga bilden, vad säger det till dig om det här företaget? Mitt fokus var att få färgerna och formerna att översätta en känsla av roligt och funkiness, men strukturen och strikt rutnätlayout ger en känsla av professionalism och allvar. Är detta det exakta varumärket som varje företag har som mål att bygga? Visst inte, varje företag borde vara unikt och varje hemsida extruderar en differentierad aura.
Dölj allt utom "BG" -laget. Bakgrunden till denna design är inramad av en stor rundad rektangel. Detta lägger till lite mer struktur och djup i din design. Eftersom du inte kommer att ge huvudinnehållet en egen låda som sidospåren, är det här ett bra sätt att tvätta ut bakgrundsgrafiken och förbättra läsbarheten. Den vita rundade rektangeln har en 8px radie, samma som lådorna - en annan konsistensdetalj. Du hittar mer effekter detaljer i bilden nedan.
Använd samma metod som med rubriken, ta med några former från Illustrator och flytta runt dem för att göra lite grafik. När du fortsätter att utforma kommer du förmodligen att hitta dig själv och skämma bort med dem för att hitta en komposition som fungerar bra. Blanda dina nyanser med mörka färger och transparens.
Du kanske märker att ikonen från logotypen används mycket, en slags subliminal påminnelse. Jag hade en filmprofessor på college som lärde mig att en bild, färg etc. skulle upprepas minst tre gånger i en film för att en användare ska kunna komma ihåg och ta mening av det. Jag försöker använda den principen med min design - logotypen har upprepats många gånger (smakfullt och inom förnuft) med hopp om att användaren kommer att bli bekant med företaget och kom ihåg ikonen.
Navigationen i denna design påverkas starkt av min nuvarande favoritwebbplats - aviary.com.
Det lilla hemmet grafiskt och ordet Hem är lite ljusare och det finns en ljusare grå bakgrund bakom den - det här är att förbättra användbarheten. Tänk som användaren! Låt dem lätt veta vilken sida de är på. Vanliga sätt att göra detta är genom flikar, färg, understreck, höjdpunkter och extra grafik. Tänk på dessa alternativ och var kreativ med ditt tillvägagångssätt.
För länkar och knappar är ett hover-tillstånd en stor förbättring för användbarheten. Titta tillbaka till den slutliga bilden och titta på några av länkarna. En genomtänkt design kommer att överväga hur dessa kommer att se ut och hur de ska fungera. Om du inte kodar dina egna webbplatser, använd en liten bild av en länkmarkör för att indikera till programmerare vad som händer. Dolda funktioner som en rullgardinsmeny (bilden nedan) måste övervägas och utformas fullständigt. Väntar på att hitta din vackra design är ihop med någon hemsk rullgardinsmeny kommer att driva dig galen. Om du är designer, är det upp till dig att överväga alla dessa.
Länkmarkörens bild kan hittas som en PNG tillsammans med några fler gratis designresurser här.
Märkte du det NY! bricka? Jag bröt bara en av mina första regler! Tja, vi gör ett litet undantag för pixelfonter! Pixel-teckensnitt har ingen anti-aliasing, så det gör dem väldigt skarpa. Denna skarpa kan ofta vara otålig för en vanlig typsnitt, men pixelfonter fungerar fantastiskt i små storlekar. Ta en titt på hur oläslig Verdana och Georgien är vid 8pt vs pixel typsnitt, en stor skillnad, ja?
Pixel-teckensnitt är populärt i Flash, de laddas snabbare och behåller den skarpa, men de fungerar bra även i webbdesign! OK, så nu när du vet om glädje av pixelfonter, var noga med att använda dem sparsamt. För applikationer som denna lilla NY! märke det fungerar bra, men för det mesta borde du inte använda dem för många andra applikationer - ingen vill läsa mer än några ord i ett pixelfont. Skriften som används i detta exempel heter Uni 5063 och kan laddas ner gratis från Miniml.
Undersök nu de avrundade hörnen i rullgardinsmenyn. Den vita bakgrunden är faktiskt konstruerad av tre rundade hörnrektanglar. Den tredje har blivit invändig ut med Direct Selection Tool för att göra ett rundat inre hörn.
Vrid dina sidfält vita och skapa guider som ger var och en av dina sidfält en polstring på tio pixlar. Lägg till i alla de dummy-texter du ska använda och duplicera sidofälten efter behov. För att förlänga eller kontrakta dem vertikalt, använd direktmarkeringsverktyget för att välja de nedre fyra ankarpunkterna och dra dem ned eller nedåt med tangentbordet. Nästa steg är finjustering av stilen på hela texten.
All text har ordnats i en hierarki av betydelse och fokus, och detta signaleras genom utformningen av den texten. Den största teckensnittstorleken och den mörkaste färgen (läs: högsta kontrast) är reserverad för huvudinnehållsrubriken. Underrubriken är större och mörkare än huvudkroppen och huvudkroppen är större än sidfältet, och så vidare. Var medveten om att alla färgerna är från prickarna - konsistens, konsistens, konsistens!
Nu när du har organiserat alla sidofältet och texten är färgad på rätt sätt, kan du börja utforma rutorna. Ge varje inträde en mycket lätt bakgrundsgradient och använd linjärverktyget för att dra en horisontell linje längst upp i lutningen. Dessa kommer visuellt att separera varje inträde. Ge sidfältet en ljus drop skugga.
För bakgrunden till rubrikområdet i sidofält sektioner, rita en rektangel under de andra stylingarna / formerna och lägg till ett Gradient Overlay av pinks och en 1px stroke fylld med en horisontellt reflekterad gradient av rosa till vitt. Ge sedan titellagrets lager en skiktmaske i form av sidofältet.
Upprepa dessa steg för alla sidofält som din design har. Om du är intresserad av att skapa nyhetsbrevet, lämna utrymme för det och vi kommer att täcka det i nästa steg.
För att skapa den lilla grafiken längst ner i varje sidofält är det mycket snabbare om du arbetar med Illustrator bara lite mer. Illustratorn är ofta inställd för att vara i färgläge CMYK; Men eftersom du utformar för skärmen måste färgläget ändras till RGB. Byt till Illustrator och gå till Arkiv> Dokumentfärgsläge> RGB-färg. Därefter måste du rita ut den önskade sidfoten.
Byt nu tillbaka till Photoshop, välj de tre mittenfärgade färgerna i mörkgrå, rosa och cyan - dra dem över till Illustrator. Använd Eyedropper Tool (I) i Illustrator för att färga grafiken som önskad. Dra grafiken i Photoshop, storlek och plats i enlighet därmed. Du kan också lägga till några effekter, jag gick med en ljus Drop Shadow och en subtil övertoningsöverläggning (svart till vitt, med blandningsläge för Multiplication och Opacity på 10%)
Fördelen med denna procedur är att ha ett smart objekt som redan är färgat. Om du skulle dra detta till Photoshop och försöket att färga de enskilda bitarna skulle det vara en längre process som skulle kräva att du rasteriserar det smarta objektet och skapar mer än ett lager.
Jag kommer inte att bli för galen i idéerna bakom grafik och branding som tidigare, men jag vill röra på några av förgrundsgrafiken på webbplatsen. I den slutliga bilden finns ett antal grafik som liknar den i steg 18, men de är lite mer komplexa. När du har ritat formarna på din grafik öppnar du effekterna och lägger till ett övertoningsöverlägg.
Du kan se hur färgerna är ordnade i lutningen för att ge utseendet på en skarp delning mellan ljusare nyanser och mörkare nyanser. Tänk på att det finns ett antal sätt att uppnå detta, inklusive användning av vita rektanglar och lagmasker.
Dessa grafik är bra för att bifoga och anpassa ikoner. Gilla frågetecknet i huvuddelen av kroppen Visste du… någon ikon eller symbol kan placeras där. Exemplen nedan använder ikoner från gratispaketet Simplicio och många fler gratis ikonpaket finns på Icon Pot.
Överraskande, för mig är en av de svåraste delarna av webbdesign att skapa anpassade knappar. Dessa knappar följer vad som har kallats "Web 2.0 Design" av webbdesign community.
Låt oss först undersöka några av knapparna på den slutliga bilden. För konsistens är texten på varje knapp Rockwell fet med undantag för inloggningsknappen på grund av sin lilla storlek - Rockwell fungerar inte bra i så små storlekar. Dessutom är alla styling av texten och bakgrundsknapparna desamma.
När du tittar på nästa zoomade knapp kan du se några av effekterna närmare. Många av de använda effekterna är mycket vanliga för att skapa den Web 2.0-stilen, speciellt en 1px stroke runt knappen, släpp skuggor på både texten och rutan, ikoner, något som ger intryck av 3D och gradienter. Du kan se att Följ oss-knappen använder alla dessa. För att skapa 3D-effekten applicerades en Inner Drop Shadow i bakgrundslådan. Titta noga och du kommer att se att texten har en mycket skarp droppskugga - detta skapar samma intryck som om du skulle duplicera texten. Färga den nedersta kopian svart och flytta den ner och till den högra pixeln.
Känn inte att det finns någon rätt eller fel sätt att skapa knappar. Ta en titt på vad som finns ute på webben, lek med några av effekterna och lägg dig på något som du tycker både ser ut som en knapp och är en tilltalande matchning för webbdesignen du jobbar med.
Så viktigt som att det är att få din webbdesign att följa rutnätet, det kan hjälpa till att ge din design en viss karaktär. Den primära platsen som rutnätet bryts i den här webbdesignen ligger i rubrikområdet nära logotypen. Denna grafiska mashup underlättar spänningen i gallerstrukturen och ger webbplatsen en funkier och differentierad känsla. Det bör noteras att designen och innehållet bryter gallret visuellt i detta område. Beskrivningen av företaget följer kolumnen, men raderar i raden och grafiken är nästan slumpmässig i placeringen. Den grafiska mashupen består av former, gradienter och fallskuggor; du borde vara mycket bekant med dessa nu :)
En annan plats som gallret är trasigt ligger på nyhetsbrevet med ett trendigt litet bandomslag. Omslaget gör inte mycket för att bryta gallret visuellt, men det ger innehållet lite extra utrymme för att skjuta in marginalerna av innehållet. Den önskade effekten av bandet var att det skulle stjäla lite fokus och ge sidan lite mer stil. Gridbrytningen är liten och subtil, men det hjälper verkligen att förbättra designen.
Jag skulle vilja nämna en sista liten sak om designfunktionen. Under senaste artiklar Du kommer att märka några fler band, en för varje artikel. Jag har utformat dessa med tanken att när en användare svävar över artikeln glider antalet kommentarer. Det kommer att ta lite AJAX fidgeting i utveckling, men den önskade effekten kan berika webbplatsens upplevelse samtidigt som det ger ytterligare information.
Denna design skulle lätt kunna konverteras till en blogg layout eller WordPress tema och en vanlig praxis att i blogosfären är att placera annonser. Annonser i allmänhet är ganska lätta att placera och designa för. När du utformar ska du använda riktiga annonser och inte bara lämna tomma områden, särskilt när du presenterar för kunder. För ett bra urval av banners använder jag vanligtvis några av banners i portföljen av RightBanners eller besök bara ett antal webbplatser och bloggar som har annonser som Psdtuts+.
När du placerar annonser är den största oroen att det är ovanför veckan, främst för att marknadsföring av personer och annonsörer tror på det religiöst. Även om det finns signifikanta bevis för att den genomsnittliga användaren är medveten om den glänsande rullningsfunktionen, kommer det att ta ett tag innan alla accepterar det. Realistiskt, om innehållet är engagerande kommer användarna att rulla för att se resten av sidan. Fallen ligger i allmänhet runt 570-600 pixlar ner på en 1024x768 bildskärm.
Medan jag hoppas att du har lärt dig något från denna handledning, skulle jag vilja ta en stund att prata om saker jag inte tycker om den här designen. Ingen hemsida är perfekt och det finns många faktorer som är viktiga för personlig smak. Dessutom, eftersom denna webbplats utformades utan en specifik kort och ingen verklig avsikt saknar designen ett starkt fokus.
Enligt min mening är denna design lite upptagen och trång. Medan jag försökte verkligen ge typen lite andningsrum, ä
Accentsconagua