Att utforma en babycentrerad plats är inte en lätt uppgift, speciellt för personer som jag som vanligtvis favoriserar maskulin teman, färger och texturer i sina mönster. Idag ska vi ta itu med detta uppgiftshuvud genom att skapa ett roligt och unikt meddelande om barnmeddelanden som är långt ifrån typiskt.
Känn dig fri att följa med och var noga med att ladda ner PSD så att du kan ta en titt eller ens använda den på din egen webbplats.
Projektet
Ladda ner Layered PSD
Alla Design Shack-läsare kan registrera sig som en ledamot. En av fördelarna med medlemskap är att du kan skicka in dina "Design Dilemma"? och få gratis hjälp från Design Shack! Om vi tror att ditt dilemma är relevant för vår publik, kommer vi att göra det till en artikel precis som den här.
Vi har nyligen fått ett inlägg från Jonathan Jose, som för närvarande är väldigt glad att han snart kommer vara en far. Så upphetsad faktiskt att han vill installera en webbplats där människor kan försöka gissa hans barns namn och vinna $ 100! Jonathan låter som om han vet hur man ställer in sajten i WordPress men behöver hjälp med den verkliga designen.
Nåväl, du har lycka till Jonathan, för det här problemet är exakt varför vi skapade Design Dilemma-programmet. Låt oss börja!
Designa för babyer
Att lära sig att rikta dina mönster på rätt sätt är en viktig färdighet. Om du inte korrekt bedömer din målgrupp kan din design enkelt bli helt ineffektiv. Som ett exempel skulle din typiska nagelsalong förmodligen inte vilja ha en webbplats som ser ut som en lokal bikerbar.
Med tanke på detta kanske du tror att eftersom vårt projekt handlar om en bebis, måste det se ut så här:
Det är definitivt sant att denna design är rätt på pengarna för sitt syfte. Till att börja med är mamman den person som sitter som den ovanstående riktad mot. När du kombinerar begreppet babyer och mödrar får du vanligtvis mycket feminin design med pasteller, barn-centrerad grafik etc.
Däremot handlar vår webbplats verkligen om en stolt pappa som vill dela sin spänning med sina vänner. Därför kan vi ta det här som ett tillfälle att vända ditt typiska barntema på huvudet genom att skapa något lite mer retro och grungy. Det är fortfarande uppenbart att webbplatsen handlar om en bebis, vi kommer bara att avsiktligt avvika från vanliga teman som finns i mönster som ovan.
Steg 1: Bakgrunden och texturen
För att börja, skapa ett 1200px med 1200px Photoshop-dokument vid 72dpi. Fyll sedan den med # 55b06f. Skapa nu ett nytt lager ovanpå det, fyll det med vit och gå till Filter> Lägg till brus med inställningarna nedan.
Lägg märke till att vi har lämnat? Monokromatisk? okontrollerat. Efter lite experimentering såg detta ut som det finaste spridningen av buller, så jag gick med den och sedan desaturerade lagret (Command-Shift-U). Slutligen sätta skiktet på Color Burn och minska fyllningen (inte opacitet) till 53%.
Steg 2: Rubriken
När du har fått din bakgrund helt och hållet, ladda ner Chunk Five och Museo från gårdagens 12 Stylish och Free Slab Serif Fonts artikel.
Använd dessa två teckensnitt för att bygga en fin typografisk rubrik som den nedan. Observera att jag har använt ett antal olika designverktyg här. För det första varierade jag både storlek och djärvhet av typen avsevärt för att lägga till variation och betona viktiga delar. Därefter blev jag lite kreativ med stapeln så att rubriken fyllde upp det horisontella utrymmet snyggt.
Nu när vi har lagt rubriken ut som vi vill ha det, låt oss släppa lite av den bakgrundstexturen. Byt blandningsläge till färgbränning och opacitet till 62%.
Steg 3: Fotoet
Låt oss sedan lägga till ett foto för att få lite liv och humor till sidan. Självklart, eftersom barnet inte är födt än, måste vi gå med mamman. Eftersom jag faktiskt inte har några bilder av mamma-till-var, hittade jag ett roligt foto på Flickr som bara är perfekt för detta projekt.
Nu märker du att fotot inte passar det riktigt med webbplatsen om vi bara slänger den där. För att åtgärda detta problem skapade jag ett fotofilterjusteringslager och applicerade ett uppvärmningsfilter.
Slutligen skapade jag en krökt skugga och lade den till fotot. Denna process är ganska lätt. Du skapar helt enkelt en droppskuggskiktseffekt, högerklickar på effekten och väljer? Skapa lager ,? använd sedan varpverktyget för att lägga till en båge till botten av skuggskiktet.
Som ett sista steg i slutförandet av retro-effekten som vi har åkt här, laddade jag ner några utmärkta, subtila, gratis grungeborstar och tillämpade lite åldrande på texten och fotot.
Steg 4: Bär, Stjärnor och Text
Bara så att du kan se var vi går, här är den färdiga produkten i det här steget:
Som du kan se, utvecklas det till ett slags gammalt boxning affisch tema. Jag låter dig hantera stjärnorna på egen hand, bara ta tag i Photoshop-formverktyget, dra en stjärna och duplicera det en massa gånger.
På samma sätt är texten ganska enkel: bara skapa en punktlådan och släng in någon typ. Björnen är dock lite mer komplicerad. Jag ville ha ett enkelt grafiskt element men jag ville inte ta tid att dra en ut så jag bestämde mig för att manipulera bilden nedan.
Börja med att tillämpa Photoshop-filtret Torna kanter med följande inställningar. Bildbalans: 33, jämnhet: 13 och kontrast: 10. Detta borde ge dig något som bilden nedan:
Nu för den knepiga delen. Du har en svartvit bild, men du vill bara överföra de svarta bildpunkterna till webbplatsen och lämna en genomskinlig bakgrund. Det finns massor av sätt att göra detta, men en av de enklaste jag hittat är att kommandot klicka på den blå kanalen för att skapa ett urval. Omvänd därefter ditt val med Command-Shift-I. Slutligen slår du Command-J för att duplicera urvalet till ett nytt lager.
Du kan då ta det här laget och placera det, ge det ett färgöverlägg och gör något annat du gillar!
Steg 5: blocken
Eftersom spelets syfte är att gissa barnets namn tänkte jag att det kan vara en bra idé att begränsa alternativen (självklart skulle detta öka risken att du faktiskt måste betala någon). Som en del av spelet kan du avslöja en bokstav i barnets namn varje månad, och börja med många månader från födseln, eftersom det finns bokstäver i barnets namn.
Så till exempel, om namnet innehöll fem kullar, skulle du avslöja första bokstaven fem månader ut från förfallodagen. Hur jag kom fram för att presentera denna aspekt av spelet är genom formblocken nedan. Månerna och stjärnorna representerar bokstäver som ännu inte har uppenbarats. Varje mån eller stjärna blir då ett brev på en bestämd månad.
Den färdiga produkten
Som du kan se nedan bestämde jag mig för att implementera blockidean i en vertikal remsa och jag avslutade webbplatsen med ett område för kommentarerna. Jag lade också till lite mer färgvariation så att blocken inte skulle se ut ur platsen.
Och därmed är vi alla färdiga! Som lovat är slutprodukten ingenting som din genomsnittliga babywebbplats och det skapar ett fantastiskt utrymme för tävlingen. Som en bonus är designen mångsidig att du kan ändra den för att återspegla vilket syfte du vill.
Slutsats
Poängen med denna övning var att ta ett designprojekt i en helt oväntad riktning. Det här är en bra övning som verkligen öppnar dina designmöjligheter om du regelbundet övar. Tänk bara på vem projektet i slutändan är och hur du kan vädja till den kunden på ett intressant sätt.
Lämna en kommentar nedan och låt oss veta vad du tycker! Också, om du har utformat några bra baby-tema webbplatser, logotyper eller något annat, lämna en länk nedan så vi kan ta en titt.