Kako oblikovati spletno stran v Photoshopu za Dreamweaver

Čeprav je Photoshop predvsem slikovni učinek in program za urejanje, je tudi odlično orodje za oblikovanje videza spletnih strani. Z uporabo vgrajenih orodij lahko Photoshop zlahka uporabite za ustvarjanje profesionalnih postavitev, ki jih nato lahko prenesete na Dreamweaver za dejansko delo s kodami. Ko je dejansko projektno delo opravljeno v Photoshopu, boste ugotovili, da ustvarjanje spletne strani v realnosti s programom Dreamweaver ni tako težko.

Oblikujte stran s Photoshopom

1.

Odprite Photoshop, kliknite na “File” meni in izberite “New”. Izberite “pixels” kot enoto za merjenje in nato vnesite želeno širino in višino za vašo spletno stran. Za največjo združljivost s končnimi uporabniki izberite širino, ki je manjša od 1100 slikovnih pik. Pustite ozadje belo, nastavite ločljivost na “72” in se prepričajte, da je barvni način nastavljen na “RGB Color”. Kliknite “OK”.

2.

V orodni vrstici kliknite orodje »Oblike« in izberite želeno obliko za vašo postavitev. Ko izberete, kliknite in povlecite dokument, da ustvarite obliko. To ponovite po potrebi z različnimi oblikami, da ustvarite postavitev spletne strani. Če želite spremeniti barvo ali slog oblike, ko ste jo ustvarili, dvokliknite obliko v paleti »Plasti« in naredite želene spremembe.

3.

Dodajte želeno besedilo v postavitev spletne strani z orodjem »Besedilo« v orodni vrstici. Če ne ustvarjate logotipa, morate vedno uporabiti standardno pisavo, ki jo je zelo enostavno videti, na primer Verdana, Georgia ali Times New Roman (samo nekaj). Ko imate vse sloje, ki jih želite za svojo spletno stran, dvakrat kliknite na plasti enega za drugim, da jih preimenujete. To vam bo pomagalo zapomniti, za kaj je vsak sloj.

Prenesite zasnovo v Dreamweaver

1.

Dvakrat kliknite na vsako obliko in plast besedila, za katero ste omogočili določeno barvo, in kliknite barvni vzorec, da si ogledate HEX kodo za barvo. Te kode boste potrebovali, ko prenesete svojo zasnovo v Dreamweaver. Ko končate, shranite stran v privzetem formatu Photoshop (PSD) in nato shranite kopijo JPEG. JPEG bo uporabljen kot referenčna slika in PSD lahko uporabite, če želite spremeniti.

2.

Odprite Dreamweaver in ustvarite nov dokument HTML. Pojdite na zavihek »Vstavi« in vstavite novo tabelo ali DIV in nastavite atribute elementov, ki ustrezajo tistim, ki so uporabljeni v postavitvi Photoshopa (npr. Širina / višina in barva ozadja). Medtem ko se sklicujete na JPEG sliko postavitve spletne strani Photoshop, vnesite potrebno besedilo v ustrezna mesta in poravnajte različne elemente, da se ujemajo z vašo Photoshopovo zasnovo.

3.

Vrnite se na JPEG sliko svojega dizajna in uporabite orodje za obrezovanje v Photoshopu, da obrežete logotip. Shranite jo v mapo, kjer ste shranili datoteko HTML. V Dreamweaverju odprite pogled oblikovanja in kliknite mesto, kjer želite vstaviti logotip. Odprite zavihek »Vstavi« in kliknite »Slika«, da vstavite svoj logotip na spletno stran. Vaša Photoshop / Dreamweaver oblikovana stran je zdaj pripravljena za uporabo.

 

Pustite Komentar