Vytvoření ceníku ve Photoshopu. Vytvoření stručného a moderního ceníku ve Photoshopu. Jak vyrobit jednoduchý znak pro začátečníky

Poznámka překladatele: fontyCalibri a Corbel - systém. Pokud tato písma nejsou ve vašem systému, můžete je převzít z archivu.

Krok 1

Vytvořte nový dokumentCtrl+N s následujícími údaji, které jsou zobrazeny na obrázku níže. Zapněte mřížku Zobrazit > Zobrazit > Mřížka ( View-Show-Grid) a také povolit přichycení k mřížce Zobrazit > Přichytit na > Mřížka(View-Snap to-Grid).

Potřebujeme mřížku 5 px. Chcete-li to provést, přejděte na stránku Upravit >Předvolby >průvodci,Mřížka &Plátky(Edit-Settings-Guides, Grid and Fragments). V položce Mřížka v poli Každý čára mřížky zadejte hodnotu 5 a do pole Pododdělení ( Vnitřní členění) zadejte 1. Nastavte barvu mřížky na #a7a7a7.

Krok 2

#205d7a. Vyberte nástroj Nástroj Zaoblený obdélník(Obdélník se zaoblenými rohy) poloměr rohu 5 px a nakreslete tvar o rozměrech 145 x 420 px. V panelu Vrstvy poklepejte na vrstvu tvaru a otevřete okno Styly vrstev.

aktivovat PoklesStín(Stín), VnitřníStín(Vnitřní stín), Vnější záře (Vnější záře), Vnitřní záře(Vnitřní záře) a Mrtvice(Mrtvice). Nastavte tyto styly na níže uvedené možnosti. Měli byste skončit s tvarem jako na druhém obrázku. Mřížku můžete dočasně zakázat, abyste viděli, jak tvar v této fázi vypadá.

Krok 3

Nastavit barvu popředí do černé. Vyberte nástroj Nástroj Obdélník(Obdélník). Vytvořte tvar 145 x 70 px a umístěte jej tak, jak je znázorněno na prvním obrázku.
V panelu Vrstvy otevřete okno Styl pro tento tvar a zadejte parametry zobrazené níže.

Poznámka překladatele: některé opravy ve stylech - StylVnitřní Stín (Vnitřní stín)-Vzdálenost (vzdálenost)-2 px., Styl Mrtvice(Mrtvice)-Pozice-Uvnitř (uvnitř),VyplnitTyp -Barva - přibližná barva - #60b9fb. Styly embosování a vnější záře nejsou nutné.

Krok 4

Duplikujte vrstvu s vytvořeným obdélníkem předchozí krok(Ctrl+J). Klikněte klikněte pravým tlačítkem myši najeďte myší na duplikát a vyberte Průhledná Styl vrstvy (Vymazat styly vrstev). Nainstalujte Vyplnit(Vyplnit) na 0 %. Otevřete okno Styly a zadejte níže uvedené parametry.

Krok 5

Pro tento krok budeme potřebovat mřížku 1 px. Jít do Upravit >Předvolby >průvodci,Mřížka &Plátky(Edit-Preferences-Guides, Grid and Slices) a zadejte 1 do pole Gridline Every.

Nastavte barvu popředí na #ed1c24 a vyberte nástroj Nástroj Obdélník(Obdélník). Vytvořte tvar o velikosti 145 x 1 px. Umístěte tvar, jak je znázorněno na prvním obrázku. Duplikujte tvar (Ctrl+J).
Posuňte kopii o 1 px dolů a změňte její barvu na #fed700.

Krok 6

Vyberte vrstvu červeného tvaru Vyplnit(Vyplnit) na 0 %. Otevřete okno Styly a zadejte níže uvedená nastavení.

Krok 7

Vyberte vrstvu se žlutým tvarem. Snížit Vyplnit(Vyplnit) na 0 %. Přidejte styl pomocí níže uvedených možností.

Krok 8

Znovu jít doUpravit >Předvolby >průvodci,Mřížka &(Edit-Settings-Guides, Grid and Fragments) a v poli Gridline Every nastavte hodnotu na 5.

Vyberte vrstvy tenkého obdélníku a seskupte je (Ctrl + G). Duplikujte vytvořenou skupinu a přesuňte ji dolů, jak je znázorněno na obrázku níže.

Krok 9

Vytvořte dalších pět kopií skupiny a umístěte duplikáty, jak je znázorněno na obrázku níže.

Krok 10

Nastavte barvu popředí na #a1d8ff. Vybrat Nástroj Zaoblený obdélník(Obdélník se zaoblenými rohy) poloměr 3 px. Vytvořte tvar 95 x 25 px a umístěte jej jako na obrázku níže.
Otevřete okno Styly a zadejte níže uvedená nastavení.

Krok 11

Zakázat mřížku Zobrazit > Zobrazit > Mřížka(Zobrazit-Zobrazit-Mřížka).
Otevřete panel Znaky (Okno - Znak). Vyberte nástroj Text, nastavte barvu na #ddf1ff a napište slovo BASIC. Použijte písmo Sakkal Majalla Bold o velikosti 20 bodů. Pomocí níže uvedených možností přidejte do textu styl.

Krok 12

Vyberte font Calibry Bolt velikost 35 pt barva #205d7a a napište cenu. Pro tento text přidejte styly pomocí možností níže.

Zobrazit > Zobrazit > Mřížka (Zobrazit-Zobrazit-Mřížka). Vyberte nástroj Nástroj Obdélník(Obdélník). Vytvořte dva čtverce 5 x 5 px a umístěte je podle obrázku níže.

Krok 17

Nastavte barvu popředí na #282828. Vyberte nástroj Nástroj Obdélník(Obdélník) a vytvořte tvar o velikosti 600 x 600 px. Vrstvu s tímto tvarem umístěte pod všechny skupiny v panelu vrstev (Shift + Ctrl + [). Použijte styl vrstvy na tvar pomocí níže uvedených možností. Vyberte vzor, ​​který jste vytvořili dříve.

Podrobnosti lekce
Použitý software: Adobe Photoshop CS6
Složitost: průměrný
Přibližný čas dokončení: 1 hodina

Co budeme tvořit

Photoshop se často používá k vytváření grafiky a rozvržení ve webovém designu. Tato lekce ve Photoshopu popisuje proces vytváření, pomocí kombinace vektorových tvarů a stylů vrstev, ceníku pro hostingovou společnost. Pojďme tedy začít!

Krok 1: Příprava
Začneme vytvořením nového dokumentu (Command/Ctrl + N) o velikosti 800x600 pixelů.

Sha2
Přidejte vrstvu úprav Solid Color, která se použije jako pozadí. Nastavte barvu na #f7f8eb.

Krok 3
Stáhněte si zdarma vzor pixelů. Poté poklepejte na vrstvu úprav a aplikujte na ni styl vrstvy Překrytí vzorem.

Krok 4
Vytvořit nová vrstva a naplňte ji černou barvou. Přejděte do nabídky Filtr> Šum> Přidat šum (Filtr> Šum> Přidat šum).

Krok 5
Nastavte paletu vrstev na režim prolnutí – obrazovka.

Krok 6: Základ
Začneme vytvářet základnu. Kreslit zaoblený obdélník poloměr 10 pixelů. Vyplňte ji velmi světle modrou barvou, bez jakéhokoli tahu.

Krok 7
Poklepáním na tuto vrstvu otevřete okno Styly vrstev. Aplikujte styly vrstev Tah a Vnitřní stín(Inner Shadow) s níže uvedeným nastavením.

Krok 8: Titulní lišta
Duplikujte tento tvar a změňte barvu kopie. V jeho spodní části vytvořte další obdélník a nastavte režim kreslení na „Odečíst od oblasti tvaru“ (Odečíst). Skončili jsme u tohoto malého panelu.

Krok 9
Použijte na něj styly vrstev Tah, Vnitřní záře a Překrytí přechodem s níže uvedeným nastavením.

Níže vidíte výsledek použití stylů vrstev na titulní pruh.

Krok 10
Přidejte textový název ceníku. Dodejte jí reliéfní efekt použitím stylu vrstvy Vnitřní stín.

Krok 11: Informace o ceně
Teď, když jsem se zeptal větší písmo, přidejte samotnou cenu. Použití šedá barva střední nasycení. Aplikujte na tuto vrstvu styly vnitřní stín, vnitřní stín a zkosení a reliéf.

Níže můžete vidět rozdíl před a po použití stylů vrstev.

Krok 12
K ceně přidejte případné další informace.

Krok 13: Seznam (položky)
Duplikujte základní vrstvu a změňte její barvu na #f0f0f0. Nakreslete na duplikát kruh a obdélník pomocí režimu Odečítání.

Krok 14
Použijte styly vrstev Tah, Vnitřní záře a Překrytí přechodem.

Krok 15
Na tomto tvaru vytvořte novou vrstvu. Přelakovat nejlepší část postavy v bílém. Stisknutím Command/Ctrl + Alt + G převedete tuto vrstvu na ořezovou masku. Nyní pod tímto tvarem vytvořte další novou vrstvu a pomocí černé barvy do ní přidejte stín.

Zde je výsledek ve 100% měřítku.

Krok 17
Každou položku v seznamu oddělte černou čarou 1 pixel.

Krok 18
Ujistěte se, že jsou čáry stále aktivní, poté klikněte na toto tlačítko Další možnosti a vyberte tečkovanou čáru.

Krok 19
Vytvořte masku vrstvy pro vrstvu čáry a natřete pravý a levý konec čar černou barvou.

Krok 20: Tlačítko
Nakreslete zaoblený obdélník barvou #a7bed5.

Krok 21
Aplikujte na tvar styly vrstev Tah, Vnitřní záře a Překrytí přechodem.

Krok 22
Zduplikujte tlačítko, umístěte kopii pod originál a posuňte ji o několik pixelů dolů.

Krok 23
Na tento tvar použijte stejné styly vrstev jako na první, ale zvyšte neprůhlednost stylu vrstvy Překrytí přechodem, aby byl tmavší.

Chcete-li kolem tlačítka přidat jemný stín, použijeme styl vrstvy Vnitřní stín.

Takhle by to mělo ve finále vypadat.

Krok 24
Aplikujte text na povrch tlačítka. Aplikujte na něj Vnitřní stín, abyste získali reliéfní efekt.

Krok 25
Vyberte všechny vrstvy související s vytvořeným ceníkem a stisknutím Command/Ctrl + G je spojte do jedné skupiny. Nyní podržte Alt a přetáhněte skupinu na stranu a vytvořte její kopii. Tímto způsobem vytvořte 3 tabulky.

Krok 26
Samozřejmě nemusí být totožné, takže změňte informace o cenách, které obsahují.

Krok 27
Pojďme si nyní nějak vyzdvihnout jeden z vytvořených tarifních plánů. Chcete-li to provést, posuňte druhý plán mírně nahoru. Zarovnat spodní okraj jeho panely záhlaví podél horních okrajů dalších dvou panelů.

Krok 28
Měli bychom dbát na to, aby byly sladěny i pozice v ceníku. Vyberte řádek textu a řádek pod ním a přetáhněte je a zarovnejte je se sousedními. Mělo by ti zbýt volný prostor, kde budou doplněny další informace.

Krok 29
Změňte také polohu tlačítka.

Krok 30
Upravte základní postavu tak, že ji trochu zvýšíte.

Krok 31
Přidejte další informace.

Krok 32
Přetáhněte pravý okraj druhé cenové tabulky přes levý okraj první tabulky.

Krok 33
Níže vidíte výsledek před a po úpravě tvarů.

Krok 34
Dále zvedneme zvýrazněný plán o něco více, čímž mu přidáme stín o něco protáhlejší vzhled. Nejprve podržte Command/Ctrl a klikněte na ikonu vrstvy se základnou vybrané tarifní plán v paletě Vrstvy a vytvořte výběr.