Ako navrhnúť webové stránky vo Photoshope pre Dreamweaver

Photoshop je skvelý nástroj pre tých , ktorí chcú , aby sa vizuálny prístup k Web design , alebo ktorí sú zastrašovaní predstavou rokovania s HTML kódom . Má všetky nástroje , ktoré potrebujete integrovať obrázky , text a grafiku do rozvrhnutie webovej stránky , a všetko potrebné k optimalizácii týchto prvkov pre web , a Adobe Dreamweaver najmä . Veci , ktoré budete potrebovať
počítačom
Adobe Photoshop Software (najlepšie CS3 alebo vyššia ) Spojené obrázkov a obsahu pre webové stránky ( alebo fiktívne obsah)
Zobraziť ďalšie inštrukcie
Počiatočné nastavenie foto 1

spustite Photoshop a vyberte Súbor > Nový z menu aplikácie . Kliknite na položku ponuky Prednastavenie drop - dole a vyberte Web na . Upravte veľkosť rozbaľovacieho zoznamu na štandardnú veľkosť webové , že chcete , aby vaše stránky byť .
2

Vyberte Súbor - > Otvoriť z ​​ponuky aplikácií a otvorte obrázok , ktorý chcete použiť ako Váš hlavičky. Tým sa vytvorí novú záložku alebo okno pre obraz, v závislosti na nastavení aplikácie Photoshop .
3

Vyberte Nástroj Obdĺžnikový výber z panela nástrojov na ľavej strane plátna . Nastavte drop - down menu Štýl na pevnú veľkostí v možnosti nástrojov paneli nad vašou plátna a nastavte šírku rovnajúcu sa šírke stránky , ktorú ste vytvorili v kroku 1. Výška môže byť vysoký alebo krátky , ako by ste chceli obraz záhlaví sa objaví na vašej webovej stránke .
4

Vyberte nástroj pre presun z panela nástrojov a posunúť rámček cez oblasť obrazu Ak ako hlavičky obrázku . Vyberte Obraz > Orezať z menu aplikácie .
5

vyberte Edit > Kopírovať skopírujte orezanú časť obrázku v záhlaví . Prepnite sa späť na záložku alebo okno obsahujúce vaše webové stránky plátna . Vyberte Úpravy > Vložiť vložte hlavičku na webovej stránke . Pomocou Presunúť nástroj , posuniete obraz záhlavie tak , aby jeho horná rohy zodpovedajú horné rohy webové stránky .
Projektovanie vaše stránky a vytváranie plátky
6

Otvoriť a pridať nejaké ďalšie prvky , ktoré chcete na vašej webovú stránku . Tu môžete vložiť do iných snímok s použitím rovnakého postupu použitého vložiť hlavičku . Zahrnúť menu s textom pomocou typu nástroja z panela nástrojov . Väčšina webových stránok obsahuje hlavičku , telo , ktoré obsahuje vaše hlavné obsah a grafiku , alebo obrázky spojené s obsahom alebo položky v menu a päty, ktorý často obsahuje kontaktné informácie alebo doložky o autorských právach .
7

Majte na pamäti , základnú predstavu o tom , tabuliek v dizajne webových stránok , kedy , ktorým sa vaše stránky vo Photoshope .
8

Vyberte Zobrazenie > Priťahovať z ponuky aplikácií a vyberte Slice Tool , vnorené pod nástroj Crop v panel nástrojov. Kliknite na tlačidlo a pretiahnite rámček pomocou nástroja okolo rozsahu svojej stránky začať .
9

Urobiť plátky okolo záhlavie , telo a päty stránky sa ďalej delí na stránku . Tento proces je začiatok , ktorým sa stránky v tabuľkovom formáte pre použitie v aplikácii Dreamweaver .
10

Urobiť plátky asi každý grafický prvok záhlavie , telo a päty , ako sú tlačidlá , logá alebo obrázky . Snažte sa udržať plátky pre vaše tlačidiel a vyrovnávacích prvkov usporiadaných . Funkcie snap pomôže , aby to jednoduchšie .
Ukladanie a Optimalizácia dizajn pre Dreamweaver Cestuj 11

prístup k pracovnej ploche vášho počítača a vytvoriť novú zložku pre vaše webové stránky . Mac užívatelia vyberú Finder > Nová zložka . Používatelia Windows kliknite pravým tlačidlom myši na pracovnú plochu a vyberte voľbu Nový > Priečinok . Vytvoriť ďalšie zložky v tejto jednej pod názvom " obrázky " .
12

Návrat do Photoshopu a vyberte Súbor > Uložiť pre Web ( alebo Uložiť pre web a zariadenia pre užívateľov CS4 ) . To vyvolá dialógové okno , kde budete optimalizovať svoje obrazov rozdelených na rezy pre web a Dreamweaver .
13

Skontrolujte typ súboru , kvalitné a farebné úpravy každej z vašich rezov v pravom stĺpci dialógové okno . Vyberte rez kliknutím na displeji v dialógovom okne . Fotografické obrazy by mali byť uložené ako súbory JPEG v rozbaľovacom zozname tesne pod Preset a pevné farebné obrazy , ako sú logá alebo menu tlačidla možno uložiť vo formáte GIF pre optimálny Web výkon . Kvalitatívne očistenie môžu byť vykonané v dvoch rozbaľovací nižšie . Väčšina obrázky môžu mať ich kvalita znižuje , zatiaľ čo stále hľadajú jemný na webovej stránke , tak zníženie kvality až uvidíte znateľný rozdiel . Tým sa vaše stránky zaťaženie rýchlejšie .
14

Kliknite na tlačidlo Uložiť , akonáhle každý rez bol upravený . Vyberte si HTML & obrázky vo formáte rozbaľovacom zozname v dialógovom okne , ktoré sa objavia . Zmeniť cieľovú zložku do zložky images vnútri zložky webové stránky vytvorené na ploche . Rozvrhnutie je teraz optimalizované a pripravená na použitie v aplikácii Dreamweaver . Prvky stránky možno nájsť na palete Súbory v Dreamweaver , na pravej strane okna miesta . Môžete si pohľad na celé rozvrhnutie nakrájané a optimalizované pre web a udržiavaná tak , ako je navrhnuté vo Photoshope otvorte html súbor vytvorený v priečinku obrázky , keď ste dokončili Uložiť pre web vo Photoshope ..

• Predchádzajúca strana: Ako vytvoriť tlačidlo webové stránky s Photoshop CS3 
• Ďalšia strana: Ako previesť na vysoké rozlíšenie vo Photoshope