Építsen makettokat a Photoshop alkalmazásban - Instagram App

Szükséges erőforrások

Töltse le az összes erőforrást (ikon) itt

A rétegek fontossága a Photoshopban

A rétegek kétségkívül a Photoshop legfontosabb aspektusa. Semmit sem érdemes megtenni a Photoshopban, és nem kell rétegek nélkül megtenni. A Photoshop alkalmazásban a rétegek a kép egyes részein dolgoznak, miközben nem érintik a többi részt. Ezek lehetővé teszik a kép módosítását, szöveg hozzáadását, a színek megváltoztatását, két kép elhelyezését ugyanazon az oldalon, és még sok más, az eredeti fénykép módosítása nélkül. Szeretne többet megtudni a rétegek fontosságáról a Photoshopban? Hop ide.

Ossza meg az elemeket a csoportokba

Válassza az Ablak menü → Rétegek lehetőséget a Rétegek ablakok megnyitásához. Mivel ismerjük a kialakítást, az összes elemet szakaszok szerint feloszthatjuk, például: - Történetek szakasz, Hírcsatorna, Menü stb.

Ez megkönnyíti a munkát, ha szakaszokat ad hozzá vagy töröl. Kattintson duplán a Csoport nevére az átnevezéshez. A szakaszok a következők - - ActionBar - Történetek - Hírcsatorna - Menü A csoportok sorrendje jelenleg nem számít, mert függőlegesen helyezkednek el egymással átfedés nélkül. A rendelés akkor számít, ha két réteg / csoport átfedésben van.

ActionBar

Kattintson a Rétegek panelen található ActionBar csoportra. Ez biztosítja, hogy a létrehozandó elemeket az ActionBar csoport alatt hozzák létre. Most menjen a bal oldali Eszköztárhoz, és keresse meg a Téglalap eszköz, a kis négyzet alakú ikont az eszközsor alján. Készítsen egy téglalapot, amelynek színe #fafafa a képernyő tetején - 56 képpont magasságú és a képernyő teljes területét lefedő szélességgel.

A kis árnyékhatás hozzáadásához a téglalap alá, kattintson a Rétegek stílusa hozzáadása ikonra (amely az fx értéket olvasja) a Rétegek panel alján, és válassza az Árnyék csepp lehetőséget. A következőknek kell lennie az értékeknek.

A legtöbb dolog a tervezésben próbálkozáson és hibán alapul, tehát mindig kipróbálhatja azt, ami jól néz ki, és megteheti. Tehát ezeket az értékeket nem kőbe írják.

Ikonok és logó hozzáadása

Húzza és ejtse le az elemeket camera.png és send.png együtt a képernyőn. Az átméretezéshez nyomja meg a Ctrl + T, majd az arányos átméretezéshez nyomja meg a Shift + Alt billentyűket. Most húzza és dobja a logo.png fájlt közvetlenül a két elem közepére. Lehetséges, hogy ezt is át kell méreteznie. Mindig nézze meg az eredeti képet az ellenőrzéshez.

A cselekvési sáv készen áll! Haladjunk az alsó menüsorba. Leginkább jobb, ha az alkalmazásterv kezdetén fedezi mind az akciósávot, mind az alsó sávot, hogy tudd, mennyi képernyőterület marad a felfedezéshez.

Menü (alsó sáv)

Ne felejtsen el kattintani a Menücsoport rétegek panelen, hogy az összes új réteg a Menü csoport alatt jusson létre. Hozzon létre egy másik téglalapot, amelynek színes #fafafa mérete 56 px, magassága és szélessége az egész képernyőt lefedi. Adjon hozzá egy új rétegstílust (emlékszel a Rétegek panel alján található kis fxre?), És adja hozzá a Belső árnyék elemet.

Elemek hozzáadása

Ehhez a szakaszhoz felveendő elemek - * menü-otthon * menü-keresés * menü-hozzáadás * menü-szeretet * menü-profil Húzza és dobja el az elemeket a megadott sorrendben, mindkét oldal egyenlő térközével. Nézze meg az eredeti képet

Ajánlott: Javasoljuk, hogy az elemeket egy másik alcsoportba dobja a Menü csoporton belül. Így az elemeket együttesen módosíthatja. Most lépjünk át a Stories-ra?

történetek

A történetek részhez kattintson a Rétegek csoportban található Történetek csoportra, és hozzon létre egy másik téglalapot, amelynek színje azonos, de 120 képpont magas.

Most, amint azt a referenciatervben észreveszi, többször színes kört tartalmazó elemet kell létrehoznunk, többszínű szegéllyel és az alábbi szöveggel. Ilyen forgatókönyv esetén nincs értelme annak többször történő létrehozása a semmiből. Készíthetünk egyet, és szükség szerint lemásolhatjuk. Tehát lehet-e alcsoportot létrehozni ehhez az egész elemhez? Azt hiszem, meg is tudjuk. Az elrendezéseket és az elemeket szépen elválasztja egymástól.

Stroke a Border ellipszisért

Hozzon létre egy StoryElement alcsoportot a Stories csoport alatt, és hozzon létre egy ellipszist az Ellipse eszköz segítségével: Szélesség - 65 képpont magasság - 66 képpont kitöltő szín - # 262727 Lépés színe - Nincs szín. Adjon hozzá egy másik ellipszist ugyanolyan közepével, mint az előző ellipszis a határhoz, amelynek szélessége: & Magasság: 78 képpont kitöltő szín - nincs szín

Ütemszélesség - 3.8pt vonalszín - A képen látható színátmenet a következő 4 színből áll: # a02f93, # d31938, # f9aa0e, # d40a27. Ügyeljen arra, hogy a szög -101 fok legyen.

Adjon hozzá egy szöveget közvetlenül a kör elemek alá. Szöveg - A történet betűkészlete - Arial normál betűméret - 13pt betűszín - # b5b5b5

A végső outputnak ezt kellene megtennie.

Most készítsen egy példányt a StoryElement alcsoportból, és csak szerkessze a szöveget a Story-ból felhasználói névre, és változtassa meg a színét # 262727-re.

Lásd itt az eljárást

takarmány

Most a hírcsatornát három részre osztják - * Felhasználónév + Hely * Fotó + Visszajelzés * Tetszik + Hozzászólások Tegyünk alcsoportokat mindegyikhez, mint például a bal oldali kép.

Felhasználónév szakasz

A felhasználónév szakaszának elvégzéséhez szükséges eljárást az alábbiakban adjuk meg

Fotó szakasz

Megjegyzések szakasz

Most, hogy megmutattam neked az ilyen tervezés lépéseinek, trükköinek és módjainak nagy részét, gondolja, hogy önmagában is képes-e elkészíteni ezt a mintát?

Feladatok a 2. napra

  1. Töltse ki az alább megadott mintát. A sötét betűkészletek Arial Bold betűtípust használnak, a világosabb betűkészletek az Arial Regular betűkészletet használják. Egyéb ikonok a Resources mappában találhatók. A színválasztó segítségével mindig kiválaszthatja a kép színeit, és felhasználhatja a tervezésben. Nézze meg ezt a YouTube-videót a színes válogatókról.

2. Küldje el a végleges tervet az [email protected] címre visszajelzés céljából