Létrehozása céloldalát Adobe Photoshop - lépésről lépésre - skillsup - barátságos órák könyvtár
Mi a Céloldalakra és mit eszik?
Miért Landing oldalon?
Előállítása 1. lépés:
Létrehozásában Landing támaszkodunk népszerű eszköz 960 Rácsrendszerben, amely segít bennünket abban, hogy helyesen pozícionálja a grafika a munkaterületet, majd előírni azt a rendszert már a 960 Rácsrendszerben egység. A következő betűtípusok használtuk: Source Sans Pro, Nevis és Bebas Neue, de akkor a betűtípus tetszése. Mint ikonok által használt impresszionista ikonok, amely jelenleg fizetett.
A munka meg kell, hogy töltse le a 960 Rácsrendszerben. Letöltés után csomagolja ki egy mappát, majd nyissa meg a PSD-fájl 12 oszlopot nevű 960_grid_12_col.psd. ez a sablonok \ photoshop mappát. Először meg kell adni néhány munkahely, így megy fényképek> Canvas Size és állítsa be a szélesség (Width) és a Magasság 1200px (magasság) 1330px.
Hagyja 245px felülről honlapunk kép fejlécet. A fennmaradó térben, szürke (# f0f0f0) a Téglalap eszköz eszköz. Egyszerűen válassza ki az eszközt, és rajzoljon egy téglalap alakú terület, amely az összes tér alatt dédelgetett 245px. kijelölt a kupak alá. Vegye figyelembe, hogy amikor létrehoz egy téglalapot, meg kell kérni rá a megfelelő színű (# f0f0f0) a palettán.
Az eredmény a következőképpen néz ki:
2. lépés: A kép a fejlécben
3. lépés: A navigációs sáv
Segítségével Téglalap eszközt hozzon létre egy téglalap alakú területet 20px magassága és szélessége a teljes munkaterületet, majd vételéhez csatol réteg Opacity 25% - így fogjuk elérni áttetszőség réteg, amint az az alábbi képen.
Váltás a Horizontal Type Tool (T). A jövőben fogjuk használni a betűtípus Source Sans Pro - teljesen ingyenes font, amit könnyen megmondani a Google szervereiről.
Az opciók a következő stílus közül:
Ennek eredményeként, akkor kap ez:
4. lépés: Logo-szalag
Mivel a logó, akkor bármilyen raszteres vagy vektoros képet vagy felhívni a formája, mint az Adobe Photoshop eszközöket. Válassza a Nézet menü> Megjelenítés> Guides, így kapcsolja be az előre telepített a 960 Rácsrendszerben elrendezési vonal. Ha azt szeretnénk kapni hasonló szalag - A Toll eszköz, és egyszerűen körbe a kívánt kontúr mentén írástudó sorokat, majd adjunk hozzá egy elemet a zöld (# 79b02f) színű.
Most, hogy mi a szíj egy pár extra stílust, hogy úgy tűnjön, mint egy komplett logó. Kezdjük a Belső árnyék az Opacity 35%.
és adjunk hozzá Bevésés és domborítás. Paraméter Highlight Mode Opacity értéke 0% (mert nem kell a Highlight hatás), míg az árnyékoló üzemmódra 15% fedőképesség. Figyeljük meg, hogyan néz ki a képen:
Ezután adjuk hozzá a Gradient Overlay, hogy az elem. Paraméter Blend Mode Lágy fény, hagyja pozícióját. és Opacitás 50%. Úgy kell kinéznie a hatás beállításokat ablakban:
Most akkor egy kis szöveget a tetején a logó. Használja a Vízszintes szöveg eszköz és írjuk be a kívánt karaktert vagy szöveget. Ebben az esetben a betűk „DM” a font Nevis (Bold 36px) + csepp árnyék hatás.
5. lépés: Aktualitások
Regisztrációs címek már használt betűtípus Source Sans Pro, gondosan kiválasztott Bold „om. Minél nagyobb a fejléc típusát kialakítva, hogy a méret 24pt. kisebb - 18pt.
Így a főcímeket vigyázni közölték a hatás Árnyék:
6. lépés: körök
Most add meg a Céloldalra 3 kört 2 egyforma nagyságú kör plusz még egy, és azokat sorban 5px. Ahhoz, hogy a köröket használjuk a Ellipse Tool, és alkalmas a vonal Vonal eszköz a vonalvastagság 5 px.
Ezután az alapértelmezett véletlenszerűen kedvenc betűtípust és írjon több feliratokat a legfontosabb szempontok a leszállás. A nagy kör, add + 10pt a betűméretet.
7. lépés: call-to-action gombot (Cselekvésre)
Tehát, végül eljutott a felhívás a cselekvésre gombra. Mi ez a Lekerekített téglalap eszköz eszköz. Tegye sugár 3px + # 96c64f szín és rajzolás elemének 7px szélesség és magasság 35px. majd adjuk hozzá az elem a Drop Shadow hatások:
Ezután adjuk hozzá a Belső árnyék c távolsága 1PX és Opacity 30%. Kapunk a következő:
Ismét Bevésés és domborítás a cselekvésre ösztönző gombot. Ez a hatás megbirkózik a feladattal, így a kötet elemeket, ezért vagyunk itt, és használja. De vele is, főleg nem éri meg, hogy menjen is, hogy a hatás alig észrevehető, meg elhagyni a Highlight Mode Opacity opció 0% és az Árnyék mód - 7%.
További hozzátéve, hogy egy olyan elem hatást Gradient Overlay Lágy fény keverési mód Opacitás 60%:
Most, és azt kell, hogy adjunk néhány kulcsfontosságú zaj. Sok különböző technikákat, de mi továbbra is használhatja mintákat. Hogyan készítsünk saját egyéni mintát?
- Új dokumentum létrehozása bármilyen méretben
- Hozzon létre egy új réteget, és törölje az alapértelmezett háttér
- Select> Minden menü
- Válassza a Szerkesztés> Fill, hogy töltse ki az összes munkaterület
- Ezután távolítsa kiválasztása Select> Deselect
- Adjunk hozzá annyi zaj hallható következő műveleteket Filter> Noise> Add Noise
- Ismét válassza ki az összes munkaterület: Válassza> Minden
- Menj a menü Szerkesztés> Define Pattern
Gratulálunk, Ön létrehozott egy új mintát a zaj, amit most adni egy gombot. Add a Pattern Overlay, és válassza ki az újonnan létrehozott mintát.
Most, hogy mi a szenvedés gomb stroke-szerű hatást, és úgy dönt, hogy tegye a zöld árnyalataival. Gombok felett alig észlelhető, mert a színes háttérrel rendelkeznek, de erősödött a központ felé, és alján.
Ezután létre kell hozni egy kis elem, amely szolgál majd egy elválasztó között ikonok és szöveg a gombot. Ehhez hozzon létre egy függőleges vonal 10px magasságú szerszám Vonal eszköz. Hozzátéve, hogy a hatás GradientOverlay összhangban az alábbi paraméterekkel:
Mi ugyanazt a betűtípust, hogy szoktuk a fejléc és levelet cselekvésre, mint például a felirat Töltsd le most. Csatolja a szöveg egy sötétzöld színű (# 4d7500), és hozzá egy csepp árnyék hatás, fehér (#ffffff) színárnyalat és az átlátszóság 30%.
Ezután hozzá semmilyen tetszik ikonra vagy felhívni a saját. A mi esetünkben ez lesz a felhő ikonra.
8. lépés: A szalag a gomb melletti
Használja ugyanazt a technikát, amivel felhívta a szalagot a logó és tovább csökkenti az Opacity a háttérképet keresztül látható a szalagot. Az is fontos, hogy ne vonja el a látogató a fő felhívás a cselekvésre. Miután a szalagot kész lesz rá írni, mint valami „100% szabad”.
9. lépés: A fő tartalom
Azt mondhatjuk, hogy végül egy sapkát. Most, hogy dolgozzanak ki a fő tartalmi rész, ahol a legtöbb a főbb jellemzőit és előnyeit a terméket.
Használja a téglalap eszköz létrehozására eleme 220px széles és 214px magas. Alul kapott téglalap, rajzoljon egy kis téglalap 5px nagy és világos zöld (# 91c04c) színű. Használja az előállított DJ-szettek az ikonok és helyezze a kiválasztott ikon közepén a felső harmadában a téglalap. Ezután a Vízszintes szöveg eszköz és forrás Sans Pro betűtípus kiválasztott szürke (# 262626) a fejléc és egy világosabb árnyalatú a többi szöveg (# 9c9c9c). Ismétlődő megkapta a tételt háromszor, hogy a végén, akkor kap 4 ezeket az elemeket, cserélje ikonok és fejlécek a nyomaton. Meg kell szereznie, valahogy így:
Használja Nevis vagy tetszik a betűméretet 18pt Bold és írni néhány mondatot. A szöveg színe azonos, hogy mi használt a fejléc az előző lépésben, és zöld - színe a zöld téglalap, amit szintén elmarad az előző lépésben. Hangsúlyozzák az „Kapcsolat” - ez lesz a referencia, úgyhogy legyen aláhúzva.
Ugyanezzel a szürke színű, írjon egy pár sornyi szöveget, és helyezze az újonnan létrehozott címet. Vegyük az Ön által kiválasztott ikont (ebben az esetben - ez egy pénztárca ikon), és neki is zöld színű, hogy mi használható más zöld ikonok. Aztán hozzá a Drop Shadow hatás a zöld szín és a paraméterek az alábbiak szerint:
10. lépés: lábléc, pince. vagy bármi is?
Használja a téglalap eszköz létrehozására eleme 1200px szélességű és 280px magas. Festék, hogy szürke (# d0d0d0) - ez lesz a bekgraund a lábléc.
Használja a Vízszintes szöveg eszköz és ugyanazt a betűtípust, mint korábban, hogy írjon alá egy másik, mint a következő képen. Azt ossza meg Lábjegyzet 3 részre, és mindegyik lesz saját címét. Mint látható, a kép, a címe az első blokk azt mondja: „Több Rólunk”. Add hozzá a Drop Shadow hatás paraméterrel Opacity 50% -os és távolsága 1PX.
Használja ugyanazt a betűtípust kell írni a szöveget, a hal és hogy ez egy világosabb árnyalatú (# 7a7a7a).
Használja a Vonal eszköz, hogy egy egyszerű szürke vonal, amely szolgál majd egy elválasztó szakaszok közötti.
A következő rész az úgynevezett „Newsletter”. Hozzon létre egy beviteli mező a E-mail a lekerekített téglalap eszközt sugarú 3px. Adj bekgraund nagyon világos szürke színű (# f5f5f5). Adjon meg egy finom csepp árnyék hatás. Adj alakja egy igazán finom 1pxStroke réteg hatása. Használja a Horizontal Type Tool (T) bemeneti szöveget az alakja. Add pár effekt az ízlése: például vetett árnyékot, 1pxStroke. Írja be a szövegbeviteli mező a halak számára.