Bygga mockups i Photoshop - Instagram-app

Resurser krävs

Ladda ner alla resurser (ikoner) här

Vikten av lager i Photoshop

Lager är utan tvekan den enskilt viktigaste aspekten av Photoshop. Ingenting värt att göra i Photoshop kan eller bör göras utan lager. I Photoshop används lager för att arbeta på enskilda delar av en bild medan de inte påverkar andra delar. De låter dig ändra din bild, lägga till text, ändra färger, lägga två bilder på samma sida och mer utan att ändra ditt ursprungliga foto. Vill du läsa mer om vikten av lager i Photoshop? Hoppa här.

Dela element in i grupper

Gå till Fönster-menyn → Lager för att öppna Lager-fönstren. Eftersom vi känner till designen kan vi dela alla elementen i sektioner, till exempel - Storiesavsnitt, Feed, Menu, etc.

Detta underlättar ditt arbete när du lägger till eller tar bort avsnitt. Dubbelklicka på gruppnamnet för att byta namn på det. Avsnitten är som följer - - ActionBar - Berättelser - Feed - Meny Gruppens ordning spelar ingen roll just nu eftersom de kommer att placeras vertikalt utan överlappning. Ordning är viktig när du överlappar två lager / grupper.

Åtgärdsfältet

Klicka på ActionBar-gruppen från panelen Lager. Detta ser till att oavsett element du skapar skapas under ActionBar-gruppen. Gå nu till verktygsfältet till vänster och hitta rektangelverktyget, den lilla fyrkantiga ikonen någonstans längst ner i verktygsfältet. Gör en rektangel med färg #fafafa längst upp på skärmen med höjd - 56 pixlar och bredd som täcker hela skärmutrymmet.

För att lägga till den lilla skuggeffekten under rektangeln klickar du på ikonen Lägg till en lagerstil (som läser fx) längst ner på panelen Lager och väljer Släpp skugga. Följande bör vara värdena.

Nu är de flesta sakerna i designen av test och fel, så du kan alltid prova det som ser bra ut och gå efter det. Så dessa värden är inte skrivna i sten.

Lägg till ikoner och logotyp

Dra och släpp elementen camera.png och send.png tillsammans på skärmutrymmet. För att ändra storleken, tryck Ctrl + T och sedan för att ändra storleken på det, tryck Shift + Alt. Dra och släpp nu logo.png mitt i de två elementen. Du kanske måste ändra storleken på detta också. Se alltid originalbilden för att kontrollera.

Din actionfält är klar! Låt oss gå till menyfältet längst ner. Oftast är det bättre att täcka både actionbar och bottenfält i början av en appdesign, så att du vet hur mycket skärmutrymme som finns kvar för dig att utforska.

Meny (nedre rad)

Kom ihåg att klicka på menygruppen i lagerpanelen så att alla nya lager skapas under menygruppen. Skapa en annan rektangel med färg #fafafa på 56 px höjd och bredd som täcker hela skärmen. Lägg till en ny lagerstil (kom ihåg den lilla fx längst ner på panelen Lager?) Och lägg till Inner Shadow.

Lägg till element

Element som ska läggas till i detta avsnitt - * meny-hem * menysökning * meny-lägg till * meny-gillar * menyprofil Dra och släpp elementen i den angivna ordningen med lika utrymme från båda sidor. Se originalbilden

Rekommenderas: Det rekommenderas att släppa elementen i en annan undergrupp i menygruppen. På så sätt kan du ändra elementen tillsammans. Låt oss gå till berättelser nu?

Historier

För berättelseravsnittet, klicka på Stories Group in Layers-panelen och skapa en annan rektangel med samma färg men med 120 px höjd.

Nu som du märker i referensdesignen måste vi upprepade gånger skapa ett cirkelelement med en flerfärgad kant och en text nedan. I ett sådant scenario är det inte vettigt att skapa det upprepade gånger från början. Vi kan bara skapa en och kopiera den efter behov. Så kan vi skapa en undergrupp för hela detta element? Jag antar att vi kan. Det håller våra layouter och element snyggt åtskilda.

Stroke för Border Ellipse

Skapa en undergrupp StoryElement under Stories-gruppen och skapa en Ellipse med Ellipsverktyget som har: Bredd - 65px Höjd - 66px Fyllningsfärg - # 262727 Stroke Color - Ingen färg Lägg till en annan Ellips med samma centrum som den tidigare ellipsen för gränsen som har: Bredd & Höjd: 78px Fyllfärg - Ingen färg

Slagbredd - 3,8 punkter Slagfärg - Lutning, som visas på bilden, av följande fyra färger: # a02f93, # d31938, # f9aa0e, # d40a27. Se till att vinkeln är -101 grader.

Lägg till en text direkt under cirkelelementen. Text - Your Story Font - Arial Regular Font Size - 13pt Font color - # b5b5b5

Slutproduktionen skulle gilla detta.

Gör nu en enda kopia av undergruppen StoryElement och redigera bara texten från din berättelse till användarnamn och ändra färg till # 262727.

Se proceduren här

Utfodra

Nu delas flödet vidare in i tre avsnitt - * Användarnamn + Plats * Foto + Feedback * Gillar + Kommentarer Låt oss skapa undergrupper för var och en som den bild som ges till vänster.

Användarnamn avsnitt

Proceduren för att göra avsnittet med användarnamn anges direkt nedan

Bildavsnitt

Kommentaravsnitt

Nu när jag har visat dig de flesta steg, tricks och sätt att bygga en sådan design, tror du att du kan slutföra denna design på egen hand?

Uppgifter för dag 2

  1. Fyll i designen nedan. De mörka teckensnitten använder Arial Fet och ljusare teckensnitt använder Arial Regular. Andra ikoner finns i resursmappen. Du kan alltid använda färgväljaren för att välja färgerna från den här bilden och använda den i din design. Kolla in denna YouTube-video på färgväljare.

2. Skicka den slutliga designen till [email protected] för feedback