Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Tvorba čistého a vkusného designu

  • napsalDave777
  • sekcePhotoshop
  • kategorieWebdesign
  • verze programuCS3
  • znalostiAutor předpokládá, že máte pročteny minimálně základy v Photoshopu.

20. 8. 2009 v 0:00 2 Tvorba čistého a vkusného designu

Vytvořit čistý a přitom pěkný design není nic jednoduchého. Pokud máte zájem si přečíst, jak se takový design tvoří od začátku do konce, čtěte dál povedený článek od grafika a návštěvníka tutorials Davida Pertla, alias Dave777.

Jmenuji se David Pertl a tvorbou grafiky se zabývám téměř 2 roky. I já jsem byl kdysi úplný začátečník a ani teď nemohu říct, že už znám všechny triky a techniky, co Photoshop nabízí. Vím, že první krůčky bývají nejtěžší. Proto bych chtěl dnes ukázat trochu ze svého „know-how“. Doufám, že tento článek bude mít přínos jak pro začínající webdesignéry, tak i pro ostřílené a zkušené grafiky. Budeme tvořit design pro realitní kancelář, která na svých stránkách prodává formou aukce drahé byty. Už z tématu je jasně čitelné, že by design měl být nečím vyjímečný a působit luxusním dojmem. Zároveň by se měl návštěvník webu rychle v designu zorientovat. Nebudeme se zbytečně zdržovat a pustíme se do práce.

Příprava plátna

Otevřeme si Photoshop a vytvoříme si plátno o velikosti 1280px x 2500px. Standartní hodnota rozlišení pro internetovou grafiku je 72 bodů na palec (pixels/inch). Color mode necháme na RGB Color a barvy budou 8 bitové. Pozadí zvolíme bílé.

plátno

Dnešní maximálně doporučovaná šířka pro www stránky je okolo 960px, nám bude ale stačit 850px. Protože naše plátno má šířku 1280px, tak si lehce spočítáme, že na levé právé straně bude potřeba (1280px – 850px) / 2 = 215px. V nabídce View si vybereme New Guide a vytvoříme 2 vodící linky s vertikální orientací o pozicích 215px a 1065px (1280px – 215px). Pokud vás budou vodící linky obtěžovat, tak je jednoduše vypněte/zapněte klávesovou zkratkou CTRL + H.

plátno

Ještě zmíním, že typ písma je Verdana, velikost 11px, barva #5e5e5e a mezery mezi řádkami (Set the leading) 16px.

font

Pozadí

Ještě než začneme vytvářet jednotlivé vrstvy, mějte na paměti, že je důležite si svoji práci „strukturovat“, tzn. jednotlivé části grafiky (hlavička, menu, obsah,…) sdružovat do skupin. Budete se lépe orientovat a určité sekce rychleji editovat. Vyplatí se to! A pokud tvoříte design pro webdesignové studio nebo programátora, který bude váš design kódovat, je jakási slušnost jednotlivé vrstvy rozumně pojmenovávat a slučovat do skupin. Je to vizitka grafika. Pomocí klávesové zkratky CTRL + G si vytvoříme skupinu a pojmenujeme ji „Pozadi“.

Konečně můžeme začít „malovat“.
Vezmeme si Rectangle Tool a uděláme 15px vysoký pruh přes celou šířku. V Layer Style nastavíme Gradient Overlay z barvy #646464 na #717171. Pro vytvoření dojmu vlnek je hned několik způsobů. My si vystačíme tak, že pomocí Eliptical Marquee Tool vytvoříme malé kruhy s bílým pozadím a asi z poloviny pruh překryjeme.

vlnky

Nejefektivnější způsob je udělat jeden kruh, ten zduplikovat, posunout o pár pixelů doprava (CTRL + šipka doprava) a tyto vrstvy sloučit (CTRL + E). Tento postup opakujeme tak dlouho, než budeme mít celou šířku pruhu.

postup

Logo

Vytvoření loga nechám na vás. Moje logo ztvárňuje klíč jako rybu plavající ve vodě, protože byty se prodávají v ulici Rybářská.

logo

Menu

Další neméně duležitá čast webu je menu. Menu musí být přehledné, dobře čitelné a mělo by uživatele zaujmout.

menu

Pro pozadí aktivního odkazu použijeme obdélník (Rectangle Tool) vyplněný pěknou modrou barvou #5399ba. Zvolíme Direct Selection Tool (A). Pro přepínání mezi sdruženými nástroji použijeme zároveň SHIFT + A, abychom vybrali Direct Selection Tool, ne Path Selection Tool. Poté už stačí jenom levý dolní roh posunout o 10px dolů. Klávesa SHIFT vám ulehčí práci pro přesně svislé posunutí bodu.

hover

Barva aktivního odkazu je bílá, ostatních světle černá (#5e5e5e). Všechny nově vzniklé vrstvy si znovu označíme a sdružíme do skupiny Menu (CTRL + G).

O čem stránka vlastně je?

Návštěvníkovi by mělo být hned jasné, kde se nachází a o čem web je. Nejvíce uživateli pomůže logo, banner nebo úvodní text. To je naše další část práce.

text

Zde není asi moc co vysvětlovat, neboť by vše mělo být jasné z obrázku. Jenom bych chtěl zmínit, že font písma je Vogue, velikost 24px a barva #5e5e5e (všechny texty mají barvu #5e5e5e). Font může být samozřejmě i jiný, záleží pouze na vás.
Text by měl být kontrastní, lehce čitelný a nejdůležitější slova zvýrazněna (modrá barva #5399ba).

Obsah – hlavní foto

Nyní přejdeme k obsahu. Ten se bude skládat z názvu bytu, hlavní fotky, aukční sekce, dalších náhledů bytů a jednotlivých popisků, které umístíme do skupiny Obsah.
Uděláme skupinu (CTRL + G) a přejmenujeme ji na Obsah. Umístíme libovolnou fotku a podle potřeb ji ořežeme nástrojem Rectangular Marque Tool. Vytvoříme vrstvu a na ní umístíme obdélník jako podklad pro hlavní fotku. Na vrstvu aplikujeme Gradient Overlay (#f7f7f7 → #fbfbfb) a Stroke, jehož velikost je 1px a barva tmavší, než je podklad fotky (#cacaca).

podklad

Pokud si chceme být naprosto jistí, že fotka je uprostřed našeho podkladu, označíme si vrstvu fotky a vrstvu podkladu a zvolíme Move Tool. Pro daný nástroj se objeví příslušné menu v horní nabídce. Zde klikneme na Align vertical centers (zarovnání na střed vertikálně) a potom na Align horizontal centers (zarovnání na střed horizontálně).

move tool

Aby design nebyl „přiliš čistý“, vylepšíme ho ozdobným a dnes docela hojně se vyskytujícím štítkem. Použijeme Pen Tool nebo Lasso Tool pro dosažení kýženého tvaru. Barva štítku bude stejná jako barva v menu. Přidáme stín podle obrázku.

stín štítek

Stále to ale není ono. Proto pro větší reálnost vytvoříme 2 malé obdélníky tmavé barvy (#48606c), díky kterým budeme mít dojem, že štítek fotku „obaluje“.

obalení

Napíšeme nějaký text a transformací ho otočíme o 45 stupňů.
Pozn. klávesa SHIFT automaticky nastaví úhel po 45 stupních.

hotový štítek

Obsah – aukce

Aukční část bude pro majitele a zájemce tou nejdůležitější částí. Musíme brát v potaz, že případný budoucí majitel může být i osoba, která internetu zrovna neholduje. Tedy by měla být co nejjednodušší a uživatelsky přívětivá (user friendly).

aukce

Dále vytvoříme dva „inputy“ nástrojem Rectangle Tool (U). Nyní styl vrstvy podkladu hlavní fotky zkopírujeme na náš input. V nabídce vrstev klikneme pravým tlačitkem myši na vrstvu(podklad fotky), vybereme Copy Layer Style a následněně znovu klikneme pravým tlačítkem na vrstvu s naším inputem a zvolíme Paste Layer Style.
Tuto vrstvu zduplikujeme (CTRL + J) a posuneme dolů (CTRL + SHIFT + šipka dolů). Klávesa SHIFT umožní posun vrstvy po 10px.

input

Pokud se naučíte u nástrojů, které často používáte, klávesové zkratky, práce bude efektivnější a zbyde vám více času pro věnování se samotnému designu. Já sám jsem si vytvořil hned několik dalších klávesových zkratek, které mi ulehčují práci. V nabídce Keyboard Shortcuts (ALT + SHIFT + CTRL + K) jsem si např. pro kopírování stylu vrtsvy zvolil CTRL + SHIFT + C a pro vložení CTRL + SHIFT + X.

Aby účastník aukce mohl přihodit do aukce, musí nějak svůj příhoz potvrdit. Uděláme podobně jako v menu obdelník stejné barvy.

tlačítko

Dále klikneme myší v paletě vrstev na vrstvu s obdélníkem. Tím se obejví výběr vyplněné vrstvy. Dále si vezmeme Rectangular Marquee Tool a se stisknutým tlačítkem ALT odebereme polovinu výběru.

tlačítko - výběr

Nyní vytvoříme novou vrstvu (CTRL + SHIFT + N nebo CTRL + SHIFT + ALT + N) a vyplníme ji bílou barvou (ALT + BACKSPACE). Opacity vrstvy nastavíme na 10% a vepíšeme text „Vložit částku“.

hotové tlačítko

Zrekapitulujeme si, co jsme zatím udělali

rekapitulace

Obsah – náhledy

Počítejme s tím, že náhledů bude více než jen 4. Proto musíme vytvořit 2 tlačítka, která umožní posun fotek zleva doprava a naopak.

Začneme tvarem tlačítka. Vybereme Rounded Rectangle Tool (U) a zhotovíme tvar podobný tvaru na obrázku.

šipka

Dále ve paletě vrstev klikneme na masku našeho tlačítka.

paleta

Vybereme Rectangle Tool (U) a s klávesou ALT část tlačítka ořežeme.

oříznutí

Stejně jako jsme kopírovali styl u podkladu fotky, tak nyní styl zkopírujeme na tlačítko.

tlačítko

Do tlačítka vložíme malý trojúhelník značící směr výběru fotek pomocí Polygon Tool se 3 stranami. Barva výplně je #5e5e5e.

polygonal tool hotové tlačítko

Teď nám zbývá už jen přidat 4 náhledy, které uděláme stejně jako u hlavní fotky.

náhledy

Nakonec, abychom jednotlivé byty oddělili, přidáme jemný gradient jako je znázorněn na obrázku.

gradient

Vytvoříme si novou vrstvu (musí být umístěna pod ostaními vrtstvami v paletě vrstev), nástrojem Rectangular Marque Tool uděláme obdélník, který následně překryjeme gradientem (#fcfcfc → #ffffff). tvorba gradientu

Obsah – popisky

Informace o bytu vložíme přímo pod náhledy. Jednotlivé texty oddělíme 1px linkami (např. nástrojem Rectangular marque Tool – M), které budou mít tmavě šedou barvu (#d9d9d9). Také zde umístíme tlačítko se stejným stylem jako u podklady fotky, inputu nebo tlačítka u náhledů (vytažení, nebo-li Stroke, může být tmavší).

popisky

Obsah – duplikace

Konečně uvidíme výhody skupin. Naši obsahovou část 2× zduplikujeme (CTRL + SHIFT +Q, CTRl + J je pouze pro jednu vrstvu) a umístíme rovnoměrně pod sebou.

obsah

Patička

Na úplný závěr doděláme patičku (doplněnou o pár jednoduchých ikonek) s kontakty na majitele stránky a odkazem na autora designu.

patička

Uklidili jste si po sobě?

Asi nějak takto by měla vypadat vaše paleta vrstev.

strukturovaná paleta vrstev

Čistý a vkusný design je hotový

Clean and Clear design je hotový

Pár mých rad na závěr

1. Využívejte co nejvíc klavesové zkratky.
2. Nadefinujte si i svoje vlastní zkratky.
3. Mějte pořádek ve vrstvách.
4. Když něco vytvoříte, nechte to uležet a po pár hodinách se ke své práce znovu vraťte. Uvidíte, kolik názorů a nových nápadů budete mít.
5. Inspirujte se na CSS galeriích.
6. Učte se nové techniky pomocí tutoriálů.
7. Trpělivost!

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #2
  • Lithianne
  • 1. November 2011 | 20:58
  • Skupina: Registrovaní Uživatelé

Waw, vypadá to dobře... ^^

  • #1
  • Shareaza
  • 10. March 2011 | 19:00
  • Skupina: Registrovaní Uživatelé

Můžu se zeptat, jestli si děláte třeba ještě návrh na papír než začnete dělat design v PSku? Jako takové to základní rozvržení, co, kde, kam, barvy atd. Nebo už jedete hned na ostro?

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi