Domov › Internet › Maska v nápadech na webový design ve Photoshopu. Proč je Photoshop považován za nejlepší produkt Adobe pro webový design. Vytvořte obdélník ve Photoshopu

Maska v nápadech na webový design ve Photoshopu. Proč je Photoshop považován za nejlepší produkt Adobe pro webový design. Vytvořte obdélník ve Photoshopu

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í prostor“ (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 v nastavení nastaveny pixely, rozlišení je 72 pixelů na palec a barevný režim RGB 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ůžeš 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 s zaoblené hrany 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.

Adobe Photoshop- toto je nejlepší program na světě digitální zpracování snímky. 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 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 vytváření 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 písma WebINK a Google Webová písma při vytváření vzhledu webových stránek. Tento skvělý nástroj dává jednoduchý 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é množství výkonné funkce. Funkce tohoto pluginu zahrnují převzetí skupiny vrstev a zacházení s ní jako s jednou entitou. 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? design bytu? 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 vyřezávat ani 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í nejlepší způsob do vašeho designu.

Vše nejlepší!!!

Webdesign je mnohostranný a zahrnuje nejen práci na rozložení podle principu „co se kde bude nacházet“, ale také vytváření potřebných obrázků, zpracování fotografií, různé prvky uživatelské rozhraní, ikony, kliparty, promýšlení typografie a kombinací písem a mnohem, mnohem více. Protože weboví designéři vytvářejí vizuální rozvržení, pomocí Photoshopu více než pohodlné a srozumitelné. Mezitím se však různí řemeslníci po celém světě snaží používat širokou škálu aplikací Adobe a při vytváření pouze jednoho rozvržení používají Illustrator, Fireworks, InDesign, dokonce i Nejnovější zkušenosti Design (XD).

« Ale proč tolik?“ – ptáte se. " K čemu by mohly být dobré a jsou vůbec k něčemu?" Odpověď je jednoduchá i složitá. Faktem je, že na jedné straně jsou všechny produkty Adobe určeny pro různé účely, na straně druhé kdo je na co zvyklý a za třetí mají integraci mezi sebou. Každá aplikace má však stále charakteristické a zvláštní nuance a pokusíme se je zvážit níže. Pokud budete rozumně využívat možnosti každého jednotlivého produktu, pak bude tvorba návrhů webových stránek jednodušší a možná v některých ohledech i rychlejší.

Naším cílem není mluvit o konkrétní práci v každé aplikaci, ale upozornit na jejich vlastnosti, cíle a úkoly, které řeší. Pokud jste si již vybrali, v čem budete pracovat, a to je z 99,9 % Photoshop, pokračujte ve zdokonalování se v této konkrétní oblasti a zbytek nechte na další příležitosti a rozšíření dovedností.

Photoshop ve webdesignu

Původně byla aplikace vytvořena pro úpravu a retuš rastrových obrázků a práci s fotografiemi. Po 25 letech aplikace umožňuje vytvářet a upravovat 3D objekty, pracovat s osvětlením v obrazech, barvou, vrstvami, vytvářet animace a další.

Po mnoho let po celém světě je Photoshop vhodný pro vytváření webových stránek a rozvržení formát PSD, a to právě díky schopnosti pracovat s vrstvami. Umožňují změnu polohy vlastní prvky, upravte je samostatně. Rozvržení Photoshopu navíc zajistí, že weby budou ve webovém prohlížeči vždy vypadat tak, jak jste je původně zamýšleli, bez ohledu na rozlišení obrazovky. Za zmínku stojí sada filtrů, nástrojů a pluginů pro aplikaci.

Ilustrátor ve webdesignu

Aplikace vektorové grafiky. Zároveň můžete vytvářet jak vynikající kliparty, tak ikony, drobné favicony bez ztráty kvality a vzhledu pixelů, jako je tomu u rastrová grafika. Pokud potřebujete zpracovat logo, je samozřejmě vhodná i tato aplikace.

Pokud se ale na Illustrator podíváte z pohledu webdesignu a vzhledu webu, pak jako takový vhodný není. Minimálně nebudete moci upravovat fotografii a „hrát si“ s fonty. Co můžeme říci o značení a rozložení, animaci. Nicméně, Poslední aktualizace Illustrator CC (2017.1) od 5. dubna 2017 umožňuje oříznout rastrový obrázek bez programů třetích stran. V důsledku toho nejsou uloženy oříznuté části a velikost sdílený soubor klesá. Plně pracovat s obrázky v Illustratoru však stále není možné, ale některým webmasterům se daří vytvářet layouty webových stránek ve formátu AI a odesílat je zákazníkům.

InDesign ve webovém designu

Aplikace, která je stále podporována společností Adobe a je určena pro rozvržení tištěné produkty(brožury, plakáty, časopisy, letáky). Mezitím ale můžete s webem také pracovat, i když je to obtížnější a nebudete jej moci uložit do PSD a import tohoto formátu je často neohrabaný. Můžete ale zpracovat velké objemy textu. Přizpůsobte sloupce, pole, styl. Přiřaďte čísla stránek, přesouvejte rozvržení, organizujte a další.

Aplikace je připravena modulární mřížky, je zde panel pro prohlížení hotové stránky, dokonce například můžete vytvořit šablonu zápatí a připojit ji jednou ke všem stránkám. Můžete dokonce upravovat AI a PSD. Ale do práce Vstupní stránka, s propagačními stránkami budete stále potřebovat Photoshop. Pokud je váš web určen velké množství text nebo si zákazník objednal rozvržení mnoha stránek (více než 3-4) a je připraven je vidět i ve formátu PDF, pak je jeho vytvoření v InDesignu realistické a pohodlné.

Hluboké skenování

Myšlenka, že loga a ikony se snáze vytvářejí Photoshop - ne nejlepší, protože Vektorová grafika v aplikaci se promění v rastr. Aby nebyly vidět zkreslení a pixely, musí mít takový rastr velmi vysoké rozlišení, což bude ve skutečnosti grafika účtenek. Pokud vložíte hotový vektorový obrázek z Illustratoru, bude pixelován. Proto je výhodnější mít v počítači buď sady hotových obrázků ve vektoru nebo Illustratoru, abyste mohli s vektorem pracovat.

InDesign přesto, že je určen pro layout tiskovin, umí nabídnout minimální sada k vytvoření prvků webového designu. Tak minimální, že ho ještě musíte použít programy třetích stran. Nechybí ani odpovídající funkcionalita pro práci s fotografiemi a logy, případně filtry.

Ale tady je problém. InDesign vytváří rozvržení stránek na základě předem vytvořených a existujících šablon. Dokáže je dokonce rozložit a generovat CSS a HTML. ALE! Tento kód nebude optimalizován pro různé prohlížeče. Jak se říká: "kód bude špinavý." Čištění se promění ve složitou rutinu, která webovým vývojářům zabere obrovské množství času a automatická možnost vůbec nevydrží. To je důvod, proč má Photoshop větší výhodu tvůrčí proces zabere více času. InDesign je vhodný pouze tehdy, když zákazník potřebuje layout pro velký web s více stránkami, odlišným obsahem a množstvím textu.

Proč to nebude fungovat?Photoshop? Protože budete muset vytvořit samostatné PSD pro každou stránku a nakreslit je samostatně (InDesign má šablony), ale nebudete moci nastavit spojení a aktivní propojení mezi nimi (stránkami). Navíc vytvoření všech stránek v jednom PSD také nepřipadá v úvahu – velikost souboru bude velká a pro návrháře rozložení pak bude nepohodlné zjišťovat, co se kam dostane. Proto při práci na velkých stránkách na vstupní stránce - Photoshop nejlépe, co by mohlo být.

Pokud mluvit oIllustrator a InDesign , pak jsou si podobné, s tím rozdílem, že Illustrator nemá možnost vytvářet čísla stránek a předlohy knih. Ale umělá inteligence podporuje kreslicí plátna pro vytváření brožur nebo překládání rozvržení do ve formátu PDF. Do budoucna je vhodné takový layout prezentovat zákazníkům/klientům/partnerům. To znamená, že Illustrator stojí poněkud stranou od ostatních aplikací a hraje zvláštní roli ve webovém designu.

Existuje i taková aplikaceAdobe jako Fireworks . Přesněji řečeno existoval, ale o tom později. Úkolem aplikace je zpracovávat rastr a vektorové obrázky pro webové stránky. Zvláštností je, že je vhodné vytvářet prvky uživatelského rozhraní. Existuje dokonce možnost zkontrolovat jejich výkon, přidat animaci atd. Je to pracnější udělat to ve Photoshopu. Tuto aplikaci má proto na svém počítači i mnoho známých webmasterů a kombinují PS i Fw a vytvářejí layouty webových stránek. Výhodou je, že objekty vytvořené ve Fw lze přeložit do CSS a HTML a následně vložit přímo do stránek webu. A kód je vytvořen čistý.

Adobe Experience Design

Ale nyní program již není podporován a je nahrazen Adobe Experience Design neboXD . Je k dispozici v beta verzi pro Windows a Mac zdarma na oficiálních stránkách. Co je to za zvíře? Adobe XD je vytvořen pro makety rozhraní mobilní aplikace, weby. To znamená, že pokud byl InDesign vytvořen pro tisk a tištěné produkty a možnost vytvářet dokumenty pro web je bonusem, pak je Adobe XD vytvořeno naopak pro vývoj „digitálních produktů“ mobilní rozhraní, plocha počítače. Je zde kompatibilita s Illustratorem, Photoshopem, můžete vytvářet tlačítka, rozvržení, prvky, pracovat s odkazy, přechody, animacemi, videem. A mnohem víc. Můžete si vytvořit maketu a vidět ji v akci.

Mezitím někteří weboví designéři na něj nechtějí přejít. Aplikace vypadá velmi „syrově“ a mnoho funkcí, na které jsou lidé již zvyklí ve Fireworks i Photoshopu, tam prostě nejsou. Ano, šablony a principy pro tvorbu rozvržení vyvinula společnost Adobe s podporou mnoha předních specialistů, ale to vše zatím nebylo příliš úspěšně implementováno. Při obdržení objednávky na vytvoření designu webu je mnohem rychlejší otevřít PS a kreslit do něj, něco vytvořit a přenést z Fw nebo AI. Tráví se mnohem méně času.

Co si tedy vybrat

Společnost Adobe tedy nabízí širokou škálu aplikací pro webové designéry, z nichž každá je pohodlná a funguje svým vlastním způsobem různé úkoly. Ale zároveň musíte pochopit, že hlavní věcí při vytváření designu webových stránek je udělat to rychle a efektivně. V souladu s tím padá volba na známý a pohodlný Photoshop a Illustrator pro práci s vektory. Ale nezapomeňte na Fireworks, i když již není podporován, nadále se používá po celém světě. Plní své bezprostřední funkce a úkoly. A pokusit se jej nahradit Adobe Experience Design je také kontroverzní záležitost, protože verze pro Mac má stále více funkcí než verze pro Windows.

Účelem našeho materiálu nebylo říci vám: „ Podívej, to je jedinečná věc, používejte jen to!" Ne! Jen jsme vám chtěli připomenout, jaké produkty Adobe existují pro zjednodušení a urychlení práce webového designéra a designéra rozvržení. Zvažte mylné představy a nuance těchto programů, které se obvykle projeví až po několika hodinách usilovné práce v nich.

Photoshop opravdu nejvíc pohodlný program pro design webových stránek, InDesign vhodné pro rozložení, Ilustrátor- Pro vektorové obrázky, Fireworks/Adobe Experience Design- komplexní aplikace pro webdesign, rastrové a vektorové obrázky. Zde poznamenáváme, že někteří webmasteři se obecně snaží Photoshop při své práci vůbec nepoužívat a vše dělají pouze ve Fireworks, a to i v současné době. Nebo nepoužívají produkty Adobe, ale to jsou interní firemní funkce. Tak či onak, toto je samostatné téma, zvlášť když se Photoshop každým rokem neustále zlepšuje a Fireworks přechází na formát XD.

V tomto tutoriálu použijeme Adobe Photoshop k návrhu webového 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í 72, pozadí - 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 nejlepší část 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 Černobílý(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. Stažení 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ši 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 - Duplikovaná skupina(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 - Spojit 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 Spád (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é Průhledná
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): Odvážné
Vedoucí(Přední): 26 px
Sledování(Sledování): -25
Vyhlazování(Anti-aliasing): Ostré Průhledná
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 (já používám tvar "Arrow 9"), nakreslete bílou šipku o šířce 10px a 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

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): Odvážné
Vyhlazování(Anti-aliasing): Ostré Průhledná
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" a přidejte vektorovou masku. 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é Průhledná
Barva(Barva): #FFFFFF

Nyní vytvoříme seznam našich funkcí a umístíme 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: Za 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 klikněte na tlačítko Vertikální zarovnání středů (Zarovnejte svisle centra) a potom 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é budou reprezentovat 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

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í 72, pozadí - 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 Spád(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 (já používám tvar "Arrow 9"), nakreslete bílou šipku o šířce 10px a umístěte ji do kruhu.

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á).

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 klikně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é budou reprezentovat 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: