Domov › Tarify › Základy webdesignu ve Photoshopu. Proč je Photoshop považován za nejlepší produkt Adobe pro webový design. Co si tedy vybrat

Základy webdesignu ve Photoshopu. Proč je Photoshop považován za nejlepší produkt Adobe pro webový design. Co si tedy vybrat

V tomto tutoriálu použijeme Adobe Photoshop vytvořit webové rozhraní, které lze použít pro jakýkoli mobilní web. Budeme používat různé metody, včetně tvarů, masek, ikon, písem a mnoha dalších, které lze snadno aplikovat na váš vlastní vývoj ve webdesignu.
Konečný obrázek.

Materiály pro lekce:

Krok 1 Začněme vytvořením nového dokumentu. V nabídce Soubor - Nový(Soubor - Nový) nastavte šířku a výšku na 1100px, rozlišení na 72, pozadí na bílé.

Dále musíme vytvořit dva vodítka, která budou fungovat jako ohraničení naší stránky.
Vyberte nabídku (Zobrazit - Nový průvodce). Pro první vodítko nastavte Orientace - Vertikální a pozice 70 pixelů. (Orientace na Vertikální a Pozice 70 px).
Pro druhého průvodce znovu vyberte nabídku Zobrazit - Nový průvodce(Zobrazit - Nový průvodce) a vložte Orientace - Vertikální a pozice 1030 pixelů.

A tak jsme pro naši webovou stránku připravili prostor o šířce 960 px.

Krok 2 Dalším krokem je příprava pozadí. Vyberte nástroj Vyplnit(Nástroj Paint Bucket Tool (G)), nastavte barvu popředí na 1e1e1e. Poté kliknutím kamkoli na plátno aplikujte barvu na vrstvu pozadí.

Pojďme přidat texturu do našeho pozadí. Udělejme to v menu Filtr - Šum - Přidat šum(Hluk > Přidat šum). Dát poloměr(Částka) 2.5 a klikněte na OK.

Krok 3 Dále zvýrazníme vrchní díl naše stránka. Tento krok přitáhne hlavní pozornost na tuto oblast, jinými slovy, bude zaměřena.
Vyberte nástroj Štětec(Nástroj štětec), změňte velikost na 400 pixelů, tvrdost 0 %

Vytvořit nová vrstva a pojmenujte jej "Spotlight".

Změňte barvu popředí na „FFFFFF“ (bílá) a pomocí nástroje vytvořte kruh v horní části dokumentu Štětec(Štětec).

Aby se tato vrstva vešla do pozadí, přidáme do ní také trochu šumu výběrem Filtr - Šum - Přidat šum(Filtr>Přidat šum). Nastavte tato nastavení. Účinek(Částka) 20 a vyberte možnost Monochromatický(Monochromatické) a klepněte na OK.

Chcete-li tento záblesk vyhladit, vyberte Filtr - Rozostření Gaussovské rozostření(Filtr-Rozostření-Gaussovské rozostření).
Nastavte poloměr na 50,0 a klikněte na OK.

Nakonec nastavte krytí vrstvy Spotlight asi 25 %.

Krok 4. Je čas přidat grafické prvky. Stáhnout Obrázek iPhone. Mějte na paměti, že můžete použít jakýkoli telefon, který vám vyhovuje konkrétní úkoly(Android, Blackberry atd...).
Po stažení otevřete PSD soubor ve Photoshopu. Rozbalte složku „iPhones“, klikněte klikněte pravým tlačítkem myší na složku „iPhones“ a vyberte Duplicitní skupina(Duplicitní skupina). V okně, které se objeví, pojmenujte skupinu (použil jsem „iPhone“) a označte dokument, na kterém právě pracujete, a klikněte na OK. Až budete hotovi, zavřete iphone PSD.

Naše pozice první iPhone se dotýká levého vodítka a přibližně 100 pixelů od horní části plátna dokumentu.

Nyní je čas nastavit snímek obrazovky na vašem iPhone. Nejjednodušší způsob, jak to udělat, je umístit snímek obrazovky nabídky telefonu převzatý z internetu a umístit jej úplně nahoře ve skupině „iPhone“, upravit velikost podle velikosti obrazovky.

Duplikujte skupinu iPhone výběrem nabídky Vrstvy - Duplikovat skupinu(Vrstva - Duplicate Group), pojmenujte ji „iPhone 2“ a v dialogovém okně klikněte na OK.
V nabídce Úpravy - Transformace - Měřítko(Edit-Transform-Scale) změňte velikost druhého telefonu. V nastavení zadejte pro šířku a výšku 107,0 %. Pozice tohoto iPhonu bude přibližně 50px od horního okraje a 200px od levého vodítka.

Opakujte krok výměny obrazovky na „iPhone 2“, jak je uvedeno výše.

Krok 5. Posledním dotykem pro naše iPhony je vytvoření jejich odrazu. Vyberte dvě skupiny – „iPhone“ a „iPhone 2“, poté v nabídce Vrstvy - Duplikovat vrstvy(Vrstva - Duplikovat vrstvy) a klikněte na OK. Pak znovu menu Vrstvy - Sloučit vrstvy(Vrstva - Sloučit vrstvy).
Dále musíme převrátit naše telefony, abychom vytvořili odraz. Přejděte do nabídky Úpravy - Transformace - Převrátit svisle(Edit-Transform-Flip Vertical). Upravte odraz na původní telefony.

Přidejte masku vrstvy kliknutím na ikonu masky vrstvy na panelu Vrstvy.

Vyberte nástroj Gradient (Nástroj přechodu(G)) z černé na bílou a nakreslete čáru shora dolů podél reflexní vrstvy.

Nakonec snižte krytí této vrstvy na 30 %.

Krok 6. Dále bychom měli přidat hlavní detaily napravo od našich telefonů. Než začneme, přidáme dalšího průvodce, abychom s ním mohli sladit budoucí prvky návrhu. Vyberte nabídku Zobrazit - Nový průvodce(Zobrazit – Nový průvodce). Pro tento návod nastavte Orientace - Vertikální a pozice 550 pixelů. (Orientace na Vertikální a Pozice 550 px).
Přibližně 100 pixelů. od okraje dokumentu přidáme logo. Autor použil vlastní logo. Můžete jednoduše použít text nebo vložit své logo.

Pod logo přidáme text popisující naši aplikaci. Vyberte nástroj Text(Nástroj pro vodorovný typ) a nakreslete obdélník mezi středovým a pravým vodítkem. Pro text nastavte následující nastavení:
Písmo(Písmo): Helvetica Neue
Velikost(Velikost): 16 px
Styl(Styl): Pravidelné
Vedoucí(Přední): 26 px
Sledování(Sledování): -25
Vyhlazování(Anti-aliasing): Ostré Jasný
Barva(Barva): #FFFFFF

Krok 7 Dále vytvoříme tlačítko pro návštěvníky, kteří si chtějí zakoupit náš produkt. K tomu použijeme nástroj (Rounded Rectangle Tool (U)) Nakreslete obdélník s následujícím nastavením 240x75px 4px, kde 4 je poloměr rohu. Zarovnejte levou stranu tlačítka se středovým vodítkem a snižte jej pod text asi o 45 px.

Nyní použijeme některé styly vrstev. Dvakrát klikněte na vrstvu v panelu Vrstvy a použijte snímky obrazovky níže pro nastavení.

Vložte ikonu Apple a změňte její krytí na 30 %.

Napravo od ikony přidejte další text, nastavení níže:
Písmo(Písmo): Helvetica Neue
Velikost(Velikost): 11 px a 24 px
Styl(Styl): Tučné
Vedoucí(Přední): 26 px
Sledování(Sledování): -25
Vyhlazování(Anti-aliasing): Ostré Jasný
Barva(Barva): #FFFFFF

Přidejme k textu styly vrstev. Použijte nastavení ze snímku obrazovky.

Změňte krytí čárové vrstvy na 15 %, duplikujte ji výběrem nabídky Vrstvy - Duplikovat vrstvu(Vrstva>Duplikovat vrstvu) a klikněte na OK. Změňte barvu této čáry na #000000 (černá) a změňte krytí druhé vrstvy čáry na 10 %. Pak se přesuňte černá čára 1 pixel vlevo od bílé čáry.

Posledním prvkem tohoto tlačítka je ikona, která ukazuje na Stáhnout. Použijme nástroj Elipsa (Nástroj Elipsa) a nakreslete kruh o průměru 25 pixelů.

Přidejte následující styly vrstev pro elipsu:

Nakonec vezměte nástroj Volná postava(Custom Shape Tool) a vyberte šipku (používám tvar "Arrow 9"), nakreslete šipku s bílou barvou o šířce 10px, umístěte ji do kruhu.

Krok 8 Vytvořme obrázek, který bude zobrazovat cenu produktu. Vezměte si nástroj Obdélník s zaoblené rohy (Nástroj Zaoblený obdélník (U)), poloměr rohu 4 px. Obdélník by měl překrývat tlačítko stahování a měl by mít výšku 52 pixelů a šířku větší než 100 pixelů.

Změňte barvu tohoto obdélníku na " 2B2B2B“ a přesuňte jej pod tlačítko načíst na panelu vrstev.

Mrtvice

Nyní můžeme přidat informace o ceně. K tomu vytvoříme dvě samostatná textová pole. Každý bude mít svůj styl.
Pro první textové pole použijte následující nastavení:
Písmo(Písmo): Helvetica Neue
Velikost(Velikost): 19 px
Styl(Styl): Tučné
Vyhlazování(Anti-aliasing): Ostré Jasný
Barva(Barva): #FFFFFF

Pro druhé textové pole použijeme následující nastavení:

Krok 9 Přejdeme na konec naší stránky, kde musíme vytvořit oddělovač. K tomu použijeme stejnou techniku, jakou jsme použili k vytvoření oddělovače na tlačítku stahování.
Chcete-li to provést, vyberte nástroj Čára(Line Tool) a držení Klávesa Shift, nakreslete čáru z levého vodítka doprava a poté změňte barvu čáry na „000000“ (černá).

Změňte krytí této čáry na 80 %, duplikujte tuto vrstvu výběrem nabídky Vrstvy - Duplikovat vrstvu(Vrstva>Duplikovat vrstvu) a klikněte na OK. Změňte barvu této čáry na #FFFFFF" (bílou) a změňte krytí druhé vrstvy čáry na 10 %. Poté bílou čáru posuňte o 1 pixel dolů od černé čáry.

Krok 10 V sekci pod oddělovačem řádků, který jsme právě vytvořili, přidáme dva sloupce pro snímky obrazovky a funkce. Začněme screenshoty. Vyberte snímek obrazovky ze svého iPhone a vložte jej, upravte velikost a umístěte jej blízko levého vodítka.

Vyberte tuto vrstvu na panelu Vrstvy a dvakrát klikněte na tlačítko "Přidat masku" pro přidání vektorová maska. Nyní vyberte nástroj Obdélník se zaoblenými rohy(Nástroj Zaoblený obdélník (U)), změňte poloměr rohu na 6px a vytvořte obdélník o velikosti 175x120px.

Ve stylech vrstev přidejte obdélník Mrtvice(Stroke), nastavení na snímku obrazovky.

Opakujte tyto kroky pro všechny snímky obrazovky a dejte jim mezi sebou mezeru 35 pixelů.

Krok 11 Nakreslete oddělovač pro vytvořené snímky obrazovky. Nakreslíme čáru 1 px. z horního snímku obrazovky na spodní a umístěte tento oddělovač napravo od nich o přibližně 55 pixelů. Změňte barvu čáry na „FFFFFF“ (bílá) a nastavte krytí na 5 %.

Krok 12 Nyní přidáme nějaký text s informacemi. Umístění textu je 55 pixelů od levého oddělovacího řádku. Pro text používáme následující nastavení:
Písmo(Písmo): Helvetica Neue
Velikost(Velikost): 24 px
Styl(Styl): Pravidelné
Sledování(Sledování): -10
Vyhlazování(Anti-aliasing): Ostré Jasný
Barva(Barva): #FFFFFF

Nyní vytvořte seznam našich funkcí a umístěte jej pod nadpis. Vytvořte textové pole a přidejte pět nebo šest řádků a zadejte jim následující nastavení:
Písmo(Písmo): Helvetica Neue
Velikost(Velikost): 15 px
Styl(Styl): Pravidelné
Vedoucí(Přední): 28 px
Sledování(Sledování): -10
Vyhlazování(Anti-aliasing): Ostré Ostrý
Barva(Barva): #8d8c90

Opakováním výše uvedených kroků přidejte další textový blok s požadavky pro aplikaci.

Krok 13 Chcete-li nějak zvýraznit seznam funkcí aplikace, můžete použít některé triky. Posuňte tento blok textu o 25 pixelů doprava.

Použijte nástroj Elipsa(Ellipse Tool) o průměru 9 pixelů. a nakreslete kruh s barvou "bce086".

Přidejte pro tento kruh následující styly vrstev:

Krok 14 Duplikujte tyto hrnky v nabídce Vrstva - Duplikovat vrstvu(Vrstva> Duplikovat vrstvu) a umístěte ji jako na snímku obrazovky níže.

Krok 15 Vytvořte další oddělovač pomocí techniky, kterou jsme použili dříve.

Krok 16 Nyní musíme nějaké přidat užitečné odkazy na dně. Nejprve vytvoříme čtyři textová pole vedle sebe, která budou obsahovat tyto odkazy.
Začněte vytvořením textového pole o velikosti přibližně 160 x 40 pixelů. Přidejte do něj text a opakujte 3x.

Zde je příklad textu, který můžete použít:
Krabice 1: Sledujte @MyCompany na Twitteru pro novinky a aktualizace.
Box 2: Pro pomoc a podporu.
Pole 3: Informace o produktu.
Pole 4: Copyright 2011 "My Company", LLC.

Pro text použijte tato nastavení:
Písmo(Písmo): Helvetica Neue
Velikost(Velikost): 12 px
Styl(Styl): Pravidelné
Vedoucí(Přední): 20 px
Vyhlazování(Anti-aliasing): Ostré Ostrý
Barva(Barva): #5555552

Určitě jste si toho všimli textové bloky nejsou zarovnané, nebojte se, vypořádáme se s tím v dalším kroku.

Krok 17
Abychom vyřešili náš problém se zarovnáním, umístíme textové bloky do skupiny tzv "Zápatí".
Za prvé, poloha prvního textového pole je 55 pixelů od levého vodítka a poslední pole se dotýká pravého vodítka.

Nyní vyberte čtyři textové vrstvy ve složce "Zápatí", aktivujte nástroj Stěhování(Nástroj pro přesun) a klepněte na tlačítko Vertikální zarovnání středů (Zarovnejte svisle centra) a poté klepněte na Zarovnání středů vodorovně(Rozmístit horizontální středy).

Krok 18 Nyní můžeme přidat nějaké vlastní ikony, které reprezentují naše odkazy. Vyberte nástroj Elipsa(Nástroj Elipsa (U) a vytvořte kruh o průměru 36 pixelů, umístěte jej vedle prvního textové pole. Změňte barvu tohoto kruhu na „FFFFFF“ (bílá). Nyní vyberte Vrstva - Rastrovat vrstvu(Vrstva-Rasterizovat vrstvu).

Přidejte ikonu Twitteru do vytvořeného kruhu, který si můžete vzít

Adobe Photoshop je nejlepší program na světě digitální zpracování obrázky. Po mnoho let až doteď je tomu tak software je nejvíce nejlepší přítel webdesignéři z celého světa experimentovat a zkoumat nové horizonty digitální vizualizace.

Někdy to však vyžaduje spoustu času a úsilí, zejména pokud jde o to jemné doladění efekty ve Photoshopu, aby konečný návrh vypadal opravdu skvěle. pluginy pro Photoshopčasto pomáhají vývojářům dělat jejich práci efektivněji.

Ale vyberte si dobré pluginy není to tak snadné a může to chvíli trvat. Buďte v klidu: vyrobili jsme to speciálně pro vás výborný výběr bezplatné pluginy, které výrazně usnadní proces tvorby designu.

Co je někdy nejtěžší při tvorbě designu? Vyberte si tu pravou barevné schéma aby váš design vypadal harmonicky. Plugin Adobe Kuler vám v této věci pomůže nejlepším možným způsobem a vybere pro vás všechny vhodné odstíny barevná paleta na základě základní barvy.

2. Web Font Plugin

Tento bezplatný plugin, který umožňuje používat WebINK a Písma Google Webová písma při vytváření rozvržení webových stránek. Tento skvělý nástroj dává snadný přístup používat více než 1000 webových písem WebINK přímo v aplikaci Adobe Photoshop. Chcete-li získat plugin, musíte si jej stáhnout a nainstalovat zkušební verze Suitcase Fusion 5 je profesionální správce písem od Extensis. V současné době Webový plugin Písmo lze použít v aplikacích Adobe Photoshop CS5, Adobe Photoshop CS5.1, Adobe Photoshop CS6, Adobe Photoshop CC (verze 14), Adobe Creative Suite 5.5.

3.Průvodce

Vzhledem k tomu, že vytvoření mřížky ve Photoshopu může být někdy hodně práce, většina návrhářů na ni jen kouká a přetahuje vodítka náhodně. Jedná se o skvělý plugin, který poskytuje nástroj pro vytváření pixelově přesných sloupců, řádků, mediánů a základní úrovně. Pokud máte aktivní volba ve vašem dokumentu Photoshopu vytvoří GuideGuide mřížku, kterou určíte v rámci hranic výběru.

4. Flaticon.com

Flaticon.com je oblíbená platforma s více než 35 tisíci ikonami, které splňují všechny nejnovější designové trendy. A před časem se platforma vyvinula speciální plugin pro Photoshop, takže návrháři mohou rychle najít ikony, které potřebují, aniž by opustili své pracovní prostředí. Flaticon, vytvořený speciálně pro designéry a vývojáře, je skvělý bezplatný projekt, kterou byste si rozhodně měli prohlédnout. Můžete najít potřebné ikony, vybrat je a použít v vektorový formát. Můžete si je také upravit dle libosti.

5.CSS3PS

6. Cut&Slice me

Cut&Slice me - Adobe plugin Photoshop CS6 vyvinutý Danielem Peruho. Nástroj se zvýší na moderní procesřezání s velký počet výkonné funkce. Funkce tohoto pluginu zahrnují převzetí skupiny vrstev a zacházení s ní jako s jedním objektem. Poté ořízne další pixely a exportuje skupinu do souboru obrázku.

7. Jemné vzory

Váš web nebo design potřebuje podrobné informace obrázek na pozadí? V tomto případě můžete pro své potřeby použít plugin SubtlePatterns. Dodává se s velkým množstvím šablon a je docela snadné jej používat. Mimochodem, téměř všechny šablony byly vytvořeny samotnými uživateli, takže o jejich kvalitě nemůžete ani pochybovat. I když pro šablonu zvolíte efektní komponenty, můžete si být jisti, že nebudou odvádět pozornost návštěvníků webu od hlavního obsahu.

8. Skeuomorfismus

Je pro vás obtížné proměnit vaše skeuomorfní PSD stránky na? plochý design? Pak zkuste použít tento nástroj, abyste na tento problém jednou provždy zapomněli. Jedná se o skvělý plugin, který si můžete snadno stáhnout a použít k odstranění zbytečné efekty na vrstvách vašeho návrhu.

9. SiteGrinder

Jak vytvořit webové stránky z PSD? Použijte SiteGrinder. Tento nástroj vám pomůže přeměnit soubory PSD na webové stránky. S SiteGrinder nemusíte řezat nebo psát kód. Pokud jste někdy měli to potěšení pracovat s Divine Elemente, téměř okamžitě si toho všimnete tento plugin má téměř podobnou snadnost použití.

10. SuitcaseFusion

Pokud hledáte plugin, který vám pomůže se správou písem, pak je tento nástroj to, co potřebujete. Můžete si zobrazit písma, která plánujete použít ve svém projektu, a také vám je pomůže uspořádat a snadno je otevřít. Plugin je dodáván se sadou písem, ze kterých si můžete vybrat to, které se hodí tím nejlepším možným způsobem do vašeho designu.

Vše nejlepší vám!!!

Pokud se teprve začínáte učit Photoshop pro webdesign, začněte správně. Řeknu vám o nastaveních Photoshopu, která musíte použít, aby nic na webu nevybledlo ani nevybledlo.

Otevřete Photoshop, po instalaci to bude vypadat takto:

Přejděte na kartu „okno“ -> „pracovní plocha“ ( pracovní prostředí) a vyberte typografii („typografii“)

Uvidíte takový panel.

Panel „styl odstavce“ obvykle zavírám, abyste to udělali, musíte dvakrát kliknout a zobrazí se panel znaků a odstavců (práce s fonty). Samozřejmě vlevo, panel nástrojů.

Stisknutím ctrl + K otevřete hlavní nastavení.

V části „jednotky a pravítka“ vyberte pixely. Pixely, protože pracujeme pro web a na webu se měření provádějí v pixelech, nikoli v bodech, centimetrech atd.

Když tvoříte nový soubor, ujistěte se, že u každého nového projektu jsou pixely v nastavení, rozlišení je 72 pixelů na palec a barva RGB režim 8 bitů. Tato nastavení stačí.

Další důležité nastaveníšipky. Nezapomeňte zaškrtnout políčko „automatický výběr“, nastavit zaškrtávací políčko „vrstva“ a „zobrazit ovládaný prvek“.

To je k základnímu nastavení vše. Nyní o objektech, které se používají ve FS pro webdesign.
Nejčastěji se používá obdélník. Jen to zdržujeme správnou velikost, nastavte barvu výplně, barvu tahu a šířku. Nechybí ani obdélník se zaoblenými rohy. Najdete ho kliknutím na malou šipku v pravém dolním rohu obdélníku na panelu nástrojů.

Práce s ním je stejná jako s běžným obdélníkem, ale existuje doplňkový parametr(v nových verzích) - poloměr zakřivení.

Zajímavosti Photoshopu: pokud vyberete objekt a podržíte klávesu Shift, změní se proporcionálně a nedeformuje se. To je velmi užitečné při práci s ikonami nebo fotografiemi. Pokud držíte alt klíč při tažení prvek jednoduše zkopírujete. Nemusíte dále klikat na „kopírovat“ a „vložit“.

Nastavení prolnutí ve Photoshopu

Velmi často se ve FS používá nastavení prolnutí. Vyberte objekt, dvakrát klikněte na vrstvu a otevře se okno nastavení vrstvy.

Můžete to přidat různé efekty na vrstvu: vržený stín, vnitřní záře, textura, přechod nebo barevný překryv, vnitřní stín, vnitřní záře, tah a vytlačování. Nepřehánějte to, začátečníci se často nechají unést a jde to do tuhého.

Jak vytvořit tlačítko ve Photoshopu

Vytvořím nový soubor o velikosti 400x300 pixelů. Vyberu obdélník se zaoblenými hranami s poloměrem zaoblení 5 pixelů. Dávám svému obdélníku barvu. Vezmu textový nástroj, kliknu na místo, které potřebuji, a napíšu „stáhnout“. Vyberu text, vyberu font (můžete ho vybrat, než napíšete text). Šipkou zarovnávám nápis tak, aby byl na střed. Mimochodem, pro zarovnání můžete podržet tlačítko Shift a vybrat potřebné prvky(v našem případě obdélník a text) a na ovládacím panelu nahoře klikněte na ikonu „zarovnat středy vodorovně“. Vše se automaticky zarovná. Nebo můžete použít šipky na klávesnici při každém stisknutí šipky se vybraný prvek posune o 1 pixel, při držení klávesy Shift - o 10. Šipky často používám k zarovnání, je to velmi pohodlné. Nyní tlačítku přidáme hlasitost. Dvakrát klikněte na vrstvu, přidejte nastavení prolnutí: malý vnitřní stín. Úhel stínu jsem nastavil na -90 stupňů. Velikost 4 pixely a průhlednost 57.

Můžete použít stejné parametry, nebo si můžete vytvořit nějaké vlastní. Tlačítko je připraveno.

Dále pomocí stisknutého tlačítka vyberte naše 2 vrstvy v poli vrstev vpravo tlačítka ctrl, stiskněte ctrl + G a získáte skupinu vrstev. Budu tomu říkat tlačítko. Dále pořídíme screenshot našeho obrázku pomocí gyazo a pošleme jej do komentářů pod příspěvek.

V tomto tutoriálu použijeme Adobe Photoshop k návrhu webového rozhraní, které lze použít pro jakýkoli mobilní web. Použijeme různé techniky včetně tvarů, masek, ikon, písem a dalších, které lze snadno aplikovat na vaše vlastní snahy o tvorbu webu.
Konečný obrázek.

Materiály pro lekce:

Krok 1 Začněme vytvořením nového dokumentu. V nabídce Soubor - Nový(Soubor - Nový) nastavte šířku a výšku na 1100px, rozlišení na 72, pozadí na bílé.

A tak jsme pro naši webovou stránku připravili prostor o šířce 960 px.

Pojďme přidat texturu do našeho pozadí. Udělejme to v menu Filtr - Šum - Přidat šum(Hluk > Přidat šum). Dát poloměr(Částka) 2.5 a klikněte na OK.

Krok 3 Dále zvýrazníme horní část naší stránky. Tento krok přitáhne hlavní pozornost na tuto oblast, jinými slovy, bude zaměřena.
Vyberte nástroj Štětec(Nástroj štětec), změňte velikost na 400 pixelů, tvrdost 0 %

Vytvořte novou vrstvu a pojmenujte ji "Spotlight".

Změňte barvu popředí na „FFFFFF“ (bílá) a pomocí nástroje vytvořte kruh v horní části dokumentu Štětec(Štětec).

Chcete-li tento záblesk vyhladit, vyberte Filtr - Rozostření Gaussovské rozostření(Filtr-Rozostření-Gaussovské rozostření).
Nastavte poloměr na 50,0 a klikněte na OK.

Nakonec nastavte krytí vrstvy Spotlight asi 25 %.

Krok 4. Je čas přidat grafické prvky. Stáhněte si obrázek pro iPhone. Mějte na paměti, že můžete použít jakýkoli telefon, který vyhovuje vašim konkrétním potřebám (Android, Blackberry atd...).
Po stažení otevřete soubor PSD ve Photoshopu. Rozbalte složku „iPhones“, klikněte pravým tlačítkem myši na složku „iPhones“ a vyberte Duplicitní skupina(Duplicitní skupina). V okně, které se objeví, pojmenujte skupinu (použil jsem „iPhone“) a označte dokument, na kterém právě pracujete, a klikněte na OK. Až budete hotovi, zavřete iphone PSD.

Pozice našeho prvního iPhonu se dotýká levého vodítka a přibližně 100 pixelů od horní části plátna dokumentu.

Opakujte krok výměny obrazovky na „iPhone 2“, jak je uvedeno výše.

Přidejte masku vrstvy kliknutím na ikonu masky vrstvy na panelu Vrstvy.

Vyberte nástroj Gradient(Nástroj Gradient (G)) z černé na bílou a nakreslete čáru shora dolů podél reflexní vrstvy.

Nakonec snižte krytí této vrstvy na 30 %.

Nyní použijeme některé styly vrstev. Dvakrát klikněte na vrstvu v panelu Vrstvy a použijte snímky obrazovky níže pro nastavení.

Vložte ikonu Apple a změňte její krytí na 30 %.

Přidejme k textu styly vrstev. Použijte nastavení ze snímku obrazovky.

Změňte krytí čárové vrstvy na 15 %, duplikujte ji výběrem nabídky Vrstvy - Duplikovat vrstvu(Vrstva>Duplikovat vrstvu) a klikněte na OK. Změňte barvu této čáry na #000000 (černá) a změňte krytí druhé vrstvy čáry na 10 %. Poté posuňte černou čáru o 1 pixel doleva od bílé čáry.

Posledním prvkem tohoto tlačítka je ikona, která ukazuje na Stáhnout. Použijme nástroj Elipsa(Ellipse Tool) a nakreslete kruh o průměru 25px.

Přidejte následující styly vrstev pro elipsu:

Nakonec vezměte nástroj Volná postava(Custom Shape Tool) a vyberte šipku (používám tvar "Arrow 9"), nakreslete šipku s bílou barvou o šířce 10px, umístěte ji do kruhu.

Krok 8 Vytvořme obrázek, který bude zobrazovat cenu produktu. Vezměte si nástroj Obdélník se zaoblenými rohy(Nástroj Zaoblený obdélník (U)), poloměr rohu 4 px. Obdélník by měl překrývat tlačítko stahování a měl by mít výšku 52 pixelů a šířku větší než 100 pixelů.

Změňte barvu tohoto obdélníku na " 2B2B2B“ a přesuňte jej pod tlačítko načíst na panelu vrstev.

Mrtvice

Pro druhé textové pole použijeme následující nastavení:

Krok 9 Přejdeme na konec naší stránky, kde musíme vytvořit oddělovač. K tomu použijeme stejnou techniku, jakou jsme použili k vytvoření oddělovače na tlačítku stahování.
Chcete-li to provést, vyberte nástroj Čára(Nástroj Čára) a podržte klávesu Shift, nakreslete čáru z levého vodítka doprava a poté změňte barvu čáry na „000000“ (černá).

Vyberte tuto vrstvu na panelu Vrstvy a dvakrát klikněte na tlačítko "Přidat masku" pro přidání vektorové masky. Nyní vyberte nástroj Obdélník se zaoblenými rohy(Nástroj Zaoblený obdélník (U)), změňte poloměr rohu na 6px a vytvořte obdélník o velikosti 175x120px.

Ve stylech vrstev přidejte obdélník Mrtvice(Stroke), nastavení na snímku obrazovky.

Opakujte tyto kroky pro všechny snímky obrazovky a dejte jim mezi sebou mezeru 35 pixelů.

Opakováním výše uvedených kroků přidejte další textový blok s požadavky pro aplikaci.

Krok 13 Chcete-li nějak zvýraznit seznam funkcí aplikace, můžete použít některé triky. Posuňte tento blok textu o 25 pixelů doprava.

Použijte nástroj Elipsa(Ellipse Tool) o průměru 9 pixelů. a nakreslete kruh s barvou "bce086".

Přidejte pro tento kruh následující styly vrstev:

Krok 14 Duplikujte tyto hrnky v nabídce Vrstva - Duplikovat vrstvu(Vrstva> Duplikovat vrstvu) a umístěte ji jako na snímku obrazovky níže.

Krok 15 Vytvořte další oddělovač pomocí techniky, kterou jsme použili dříve.

Krok 16 Nyní musíme přidat několik užitečných odkazů na konec. Nejprve vytvoříme čtyři textová pole vedle sebe, která budou obsahovat tyto odkazy.
Začněte vytvořením textového pole o velikosti přibližně 160 x 40 pixelů. Přidejte do něj text a opakujte 3x.

Možná jste si všimli, že textové bloky nejsou zarovnány, nebojte se, s tím se vypořádáme v dalším kroku.

Nyní vyberte čtyři textové vrstvy ve složce "Zápatí", aktivujte nástroj Stěhování(Nástroj pro přesun) a klepněte na tlačítko Vertikální zarovnání středů(Zarovnejte svislé středy) a klikněte na tlačítko Zarovnání středů vodorovně(Rozmístit horizontální středy).

Krok 18 Nyní můžeme přidat nějaké vlastní ikony, které reprezentují naše odkazy. Vyberte nástroj Elipsa(Nástroj Elipsa (U) a vytvořte kruh o průměru 36 pixelů, umístěte jej vedle prvního textového pole. Změňte barvu tohoto kruhu na „FFFFFF“ (bílá). Nyní vyberte Vrstva - Rastrovat vrstvu(Vrstva-Rasterizovat vrstvu).

Přidejte ikonu Twitteru do vytvořeného kruhu, který si můžete vzít

Oblíbené v kategorii: