Ako si vyrobiť rozvrhnutie webových stránok pomocou Photoshopu

Budovanie rozloženie webovej stránky je náročná úloha, ktorá si vyžaduje grafické dizajnérmi roky zvládnuť . Pre oba skúsených a neskúsených , Adobe Photoshop ponúka rad nástrojov , ktoré napomáhajú v procese vytvárania vzhľadu stránok . Než začnete , mali by ste mať dobrú predstavu o tom , ako chcete , aby vaše webové stránky vyzerať . Pred začiatkom Nakreslite niekoľko vzoriek na papier tak , že už máte solídny východiskový bod . Začínať s logom už navrhnutý tiež urýchlenie vytvárania rozvrhnutie . Pokyny dovolená 1

Vytvorte nový súbor v Photoshope kliknutím na menu " Súbor " a voľbou " Nový . " Veľkosť obrazu určí finálnu veľkosť vašich webových stránok , takže vybrať šírku , ktorá je vhodná pre väčšinu obrazoviek . Šírka 750 pixelov , zaistí , že vaše webové stránky je viditeľný u každého , kto používa rozlíšenie obrazovky , ktorá sa rovná alebo väčšia ako 800 - by - 600 . Zadajte hodnotu pre výšku asi 500 pixelov . Toto môže byť upravená neskôr . Stlačte tlačidlo " OK " .
2

navrhnúť svoje webové stránky hlavičky , čo je oblasť , ktorá sa zobrazí v hornej časti svojej webovej stránky . Táto oblasť by mala byť obmedzená na maximálne 200 pixelov na výšku . Obsahovať meno svojej webovej stránky a loga v tejto oblasti , rovnako ako niektoré obrázky alebo fotografie , ktoré zdôrazňujú účel svojej webovej stránky . Napríklad , môže web layout nezisková spoločnosť patrí fotografovanie jednotlivcov , ktoré pomohli .
3

Vytvoriť navigačnú lištu pod hlavičku , ktorý je asi 50 pixelov vysoký . Vyberte " Text Type " nástroj z panela nástrojov na ľavej strane a kliknite na obrázok pre jeho typ . Zadajte názvy jednotlivých hlavných stránkach vášho webu ( napr. " Home " , " O nás " , " Contact " , " Produkty " , atď ) .
4

Vytvorte poľa pod vaším navigačná lišta predstavujú oblasť , ktorá textu na vaše webové stránky pôjde . Môžete opustiť tento priestor prázdny pre teraz , ale musíte mať oblasť vyhradená takže nemusíte pridávať návrhy k nemu . Táto oblasť môže byť rovnako široká ako hlavičky a navigačnej lište , alebo môže byť užší ubytovať postranné vľavo , vpravo alebo oboje .
5

dizajn postranné ak si ponecháva priestor pre nich . Tieto postranné začne pod hlavičkou a pôjde dole po celej dĺžke stránky do päty . Váš Bočný panel môže buď obsahovať grafiku alebo fotografie , alebo môže byť ďalší priestor pre text . Ak rezerváciu oblasti pre text , môžete si nechať prázdne . V opačnom prípade začnú navrhovať grafiku , ktoré sa objavia vo vašom okraja .
6

Vytvoriť päty v dolnej časti obrazu . Päta by malo byť rovnako široká ako hlavičky , ale môže byť rovnako vysoká alebo krátke , ako si prajete . Nemusíte sa starať o odchode dostatok priestoru medzi hlavičky a päty pre text ako svoj ​​dizajn bude automaticky rásť a zmenšovať sa ubytovať viac alebo menej textu. Zahrnúť informácie o autorských právach v päte , ako aj akékoľvek právne informácie , ktoré chcete pridať .
7

Pokračovať v práci na všetkých aspektoch vzhľadu stránok , kým nebudete spokojní s jeho pohľadom . Uložte súbor kliknutím na menu " Súbor " a voľbou " Uložiť " . Uložte obrázok vo formáte Adobe Photoshop ( * . PSD ) , takže môžete neskôr vrátiť sa k nemu , a vykonať ďalšie úpravy bez akejkoľvek straty kvality .
8

Zvoľte " Slice " nástroj z panela nástrojov na vľavo , a pretiahnite výber okolo rôznych oblastiach obrazu . Ak používate len hlavičky , textové polia a päty , aby sa tri výbery okolo týchto troch oblastí . Ak ste súčasťou postranné , vytvoriť ďalšie rezy okolo týchto oblastí . Pretiahnutia výberu rámček okolo oblasti s nástrojom rozrezanie vybraného je všetko , čo je potrebné k vytvoreniu rez .
9

Kliknite na " Súbor " a zvoľte " Uložiť pre Web . " Photoshop bude požadovať názvy súborov pre každý z rezy , ktoré vytvorili , a bude vytvárať samostatný obraz pre každý z plátkov . Plátky potom bude môcť byť pripojený na vaše webové stránky rozvrhnutie pomocou dizajnu webových stránok program , ako je FrontPage alebo Dreamweaver , alebo ručne pomocou HTML kódu .

• Predchádzajúca strana: Ako si vyrobiť tvar s Pen Tool vo Photoshope CS2 
• Ďalšia strana: Tutoriál , ako sa zbaviť červených očí vo Photoshope CS2