V tomto článku se podíváme na vytvoření vzhledu webu pomocí Adobe Photoshop.

V článku použiji ruskou verzi CS6, ale vše uvedené je vhodné pro jakoukoli verzi Photoshopu až po CS2 a všechny příkazy v ruštině jsou duplikovány v angličtině.

Pro nikoho není tajemstvím, že vývoj jakéhokoli webu začíná rozložením. A již podle hotového layoutu se udělá layout a upraví PHP kód.

Zde si jako příklad vezmeme vytvoření internetového obchodu, protože v současné době weby elektronického obchodu a vč. internetové obchody nejen získávají na popularitě, ale jsou také nejsložitější a nejzajímavější pro rozvoj.

Výsledkem je toto:

Pozn. Pro lepší pochopení materiálu si můžete stáhnout hotovou šablonu PSD pro téma webu z odkazů ve spodní části této stránky.

Tak začneme.

1. Vytvoření pozadí

První věc, kterou musíte udělat, je vytvořit nový dokument (stiskněte Ctrl+N) o rozměrech 1020 x 1200 pixelů na bílém pozadí a vyplňte výslednou vrstvu pozadí nástrojem "Vyplnit" (nástroj Paint Bucket Tool) se světle šedou barvou D7D7D7.

2. Horizontální menu přihlášení/registrace

Pro běžný provoz internetového obchodu je důležitá pohodlná registrace pro uživatele, tento bod je třeba zohlednit při vývoji stránek. Proto vytvoříme samostatné horizontální podmenu přihlášení/registrace umístěné v horní části stránky webu.

Vytvořte novou skupinu vrstev, nazvěme ji "přihlášení/reg" a v ní novou vrstvu, bude to pozadí pro menu, nazval jsem to "zpět" .

Pozn. V budoucnu budou všechny nové prvky vytvářeny v nových vrstvách a seskupovány podle témat. V budoucnu se o tom nebudu zmiňovat, abych ušetřila čas.

Pomocí nástroje Rectangle Marquee vytvořte výběr asi 50 pixelů vysoký a celé plátno široké, vyplňte jej černou barvou (000000). Takto vypadá rozvržení celé:

Zrušte výběr stisknutím Ctrl+D. Pozadí pro menu je připraveno.

Nyní vytvoříme vstupní pole a tlačítka pro přihlášení a registraci v pravém horním rohu stránky. V paletě Barvy nastavte barvu popředí na 313131, poté použijte nástroj Zaoblený obdélník, do panelu Možnosti zadejte poloměr vrcholu 3 pixely a přepněte režim na „pixely“:

Nyní vytvořte obdélník o šířce 125 a výšce 30 pixelů. Tento obdélník bude sloužit jako přihlašovací formulář. Zadáme tam slovo "login" , vstupní barva textu je FBFCDD, velikost znaků se volí v závislosti na fontu, já jsem použil font Arial o velikosti 13 pt. Seskupte tyto dvě vrstvy:

Takto vypadá toto vstupní pole v plné velikosti:

Zduplikujte tuto skupinu, přejmenujte ji na "pass" a posuňte ji o kousek doprava. Nahraďte písmena v textové vrstvě kroužky (jako tyto: ????????). Toto bude pole pro zadání hesla:

Nyní vytvoříme přihlašovací a registrační tlačítka.Stejným způsobem, jakým jste vytvořili obdélník pro vstupní pole, vytvořte další obdélník, ale tentokrát o šířce 70px. Použijte na něj styly vrstev Vnitřní stín (vnitřní stín) a překrytí přechodem (překrytí přechodem) s následujícími parametry:

Přidejte textovou vrstvu s textem "Přihlášení" s písmeny stejné velikosti a barvy jako ve vstupních polích. Zarovnejte slovo vodorovně pomocí možností zarovnání.

Stejným způsobem vytvořte další obdélník, ale tentokrát o šířce 90 pixelů, aplikujte na něj stejné styly vrstev, umístěte jej napravo od přihlašovacího tlačítka a vytvořte textovou vrstvu se slovem "Registrace" . Měli byste skončit s něčím takovým:

3. Vytvoření záhlaví webu

Pomocí nástroje Obdélníkový výběr vytvořte výběr o výšce 115 pixelů a šířce celého plátna a vyplňte jej černou barvou (000000):

Nyní přidejte do této vrstvy styl Překrytí přechodem s následujícím nastavením:


To je s pozadím vše. Nyní musíme určit místo, kde bude umístěno logo webu a kde budou umístěny odkazy na sekce internetového obchodu. V logu použiji bílé písmo Calibri (FFFFFF) 40pt a pro odkazy použiji písmo Helvetica Bold F7F6F6 (font Helvetica s podporou azbuky je v archivu, který si můžete stáhnout z odkazů na spodní část stránky). Výsledkem je takový roztomilý klobouk:

Pro označení aktivního odkazu pod ním vytvoříme podložení pomocí nástroje Zaoblený obdélník, pouze poloměr zaoblení bude nyní nastaven na polovinu výšky obdélníku, respektive 20 pixelů, samotný obdélník bude být 40 vysoký a šířka bude vybrána v závislosti na délce slova v odkazu. Tady někde takhle:

Nyní do tohoto obdélníku přidáme efekt odsazení, k tomu přidáme styly vrstev „Razítko“ (Úkos a reliéf), „Vnitřní stín“ (Vnitřní stín) a
„Překrytí přechodem“ ( Překrytí přechodem).Nastavte styly na následující možnosti:

Výsledek by měl vypadat takto:

To je zatím s kloboukem vše.

Vyhledávací formulář

Pomocí nástroje Obdélníkový výběr vytvořte výběr o výšce 64 pixelů a šířce celého plátna a vyplňte jej černou barvou (000000):

Použijte na vrstvu styly Vnitřní stín a Překrytí s přechodem s následujícím nastavením:

Nyní vytvoříme vstupní formulář pro vyhledávací dotazy. Jako obvykle k tomu použijeme nástroj Rounded Rectangle, tentokrát však s poloměrem 10 px.Vytvořte obdélník o výšce 42 pixelů a šířce 306 pixelů a použijte stejné styly vrstev jako minule s následujícím nastavením:

V důsledku toho získáme následující vyhledávací formulář:

Nyní zbývá přidat ikonku-tlačítko pro spuštění vyhledávání a zadat výchozí text, který po kliknutí do formuláře zmizí (ikonku si můžete stáhnout z odkazů níže, je v archivu spolu s hotový soubor PSD šablony motivu a písma internetového obchodu):

Potřebujeme do této sekce přidat rozbalovací nabídku pro seznam kategorií produktů.

Udělejme to pomocí nástroje Rectangle Marquee Tool, vytvořte výběr o velikosti 140 x 27 px a vyplňte jej černou:

Přidejte k této vrstvě styly Překrytí přechodem (překrytí přechodem) a Tah (tah) a nastavte jim následující parametry:

Pomocí nástroje Polygonální laso vytvořte trojúhelník se šipkou podobný tomu, který je zobrazen níže a vyplňte jej černou 000000. Přidejte text "Kategorie" barvou 323232:

Slider Show

Pod vyhledávací formulář umístíme prezentaci s popisy produktů a obrázky.Nejprve si vyrobíme podkladový substrát pro změnu obrázků. Pomocí nástroje Rectangular Marquee Tool vytvořte výběr o velikosti 958 x 304 px, vyplňte jej bílou barvou a umístěte jej pod oblast hledání. Zarovnejte vrstvu vodorovně s ohledem na pozadí pomocí možností zarovnání vrstvy:

Přidejte do své vrstvy následující styly:

Nyní musíme přidat obrázky, které budou tvořit slide show. Záleží již na tématu internetového obchodu. Nechte náš obchod prodávat témata pro vývoj webových stránek, vložte příslušný obrázek:

Sekce obecného tématu

Vytvořte dva obdélníky 958 x 158 px, použijte stejné styly jako na pozadí prezentace a umístěte je podle obrázku. Toto bude pozadí pro obsah:

Vkládejte obrázky s motivy, textovými popisky a ikonami, které si můžete stáhnout ze sady na odkazech ve spodní části stránky. Mělo by to vypadat nějak takto:

Zápatí tématu

Zduplikujte obdélník pozadí záhlaví webu, zvyšte jeho výšku na 152 pixelů pomocí nástroje Free Transform Tool (Ctrl+T) a umístěte jej úplně dole do šablony. Toto bude zázemí pro suterén. Zde budeme psát copyright atd.

Nejprve vytvoříme oddělovače. Pomocí nástroje Obdélníkový výběr vytvořte výběr o šířce 1 px a výšce 120 px, poté jej vyplňte 030508. Aplikujte na tuto vrstvu styl Vržený stín s následujícím nastavením:

Zadejte text, barvu FFFFFF pro názvy, BBC9D7 pro popisy a odkazy.

Až budete hotovi, výsledek by měl vypadat takto:

Stáhněte si archiv s hotovou šablonou PSD pro internetový obchod, ikony a font Helvetica s podporou azbuky:Stáhnout z Depositfiles.com

Kategorie: