PC Ekspert Forum

PC Ekspert Forum (https://forum.pcekspert.com/index.php)
-   Web dizajn, programiranje i ostalo (https://forum.pcekspert.com/forumdisplay.php?f=39)
-   -   Photoshop+HTML (https://forum.pcekspert.com/showthread.php?t=65038)

Mattheous 28.03.2007. 17:10

Photoshop+HTML
 
Zanima me na koji način da dizajn napravljen u photoshopu povežem sa HTML-om? Primjerice: http://img59.imageshack.us/img59/1460/finalqk0.gif

kako u ovom dizajnu pretvorit ovo Home, About, Portfolio u linkove? Na w3 schools sam naša "usemap" tag gdje određujem koordinate. Postoji li još kakav način?

domy_os 28.03.2007. 20:43

Pa imaš slice tool. Ne kužim u čemu je problem?

Mattheous 28.03.2007. 21:58

Jel možeš pojasnit? Nikad nisam nisam radija nešto slično. Dosad sam samo korisitija html i css.

mat 28.03.2007. 22:33

u photoshopu imas na ljevoj strani 2 stupca s raznim alatima. u drugom, treci odozgora je 'slice tool'. odaberi i s njim napravi slice-ove. dakle s njim rezes sliku na vise manjih. dakle 'home' ti bude jedan 'slice'. sejvas i fino bubnes slikice gore jednu pored druge (najlakse ti je jednu 1*1 tablicu napravit i nutra ih nagurat), a ove 'home', 'forums' itd linkas na kaj trebaju bit linkane.

no, inace, potrudi se nauciti usemap jer je puno ljepsi i moderniji

Mattheous 28.03.2007. 23:04

Ok, radit ću usemap. Još samo da te pitam- može li se postići kakav rollover efekt kada se priđe priko linka?

mat 29.03.2007. 08:21

naravno. zove se 'hover'. ja ga namjestam u stilovima (css) no mozes ga namjestiti i za svaku sliku posebno u opcijama. nemrem sad tipkat previše evo ti quick links:
http://www.liamdelahunty.com/tips/css_img_hover.php
http://tinyurl.com/2kwcyy

KnezTame 29.03.2007. 09:23

Evo tu imas tutorialcic kak se to radi:
http://70.87.94.162/~megatuts/Detailed/2.html

Rollover efekte radis s ImageReady, automatski ti kod exportiranja u html napravi gumbice s rollover efektima.

Naravno grafiku koju zelis da ti se prikaze napravis u PS u novom layeru koji onda ukljucujes il iskljucujes u Imagereadyu kad radis gumb.

mat 29.03.2007. 10:16

opet losiji i zastarjeli nacin

Mattheous 29.03.2007. 17:26

Hvala svima na pomoći! :care:

IP9 11.04.2007. 10:16

da bezveze ne pišem, ja sam pobrao tamo stvar i zadovoljan => http://www.tutorijali.net/photoshop/...ce-izrezivanje

frANZi 11.04.2007. 11:43

Citiraj:

Autor mat (Post 687308)
no, inace, potrudi se nauciti usemap jer je puno ljepsi i moderniji

Možda je lakši, ali moderniji ili čak ljepši? Nikako. Ne postoji niti jedan dizajn koji se ne može putem slajsanja pretvoriti u (X)HTML. Dakle, slajsiranje služi da stranica ne bude jedna velika slika (ili više malih) od 1mb, nego se putem slajsanja dijelovi koji se ponavljaju (primjerice, u headeru imaš "traku" dužine 700px, visine 100px, a preko nje je stavljen horizontalni gradijent iz crnog u bijelo) izdvoje u najmanjoj mogućoj jedinici (dakle, konkretno u ovom primjeru uzet ćemo dužinu od 1px i visinu od 100px) i preko HTML/CSSa ugraditi u željeno mjesto (konkretno, stavit ćemo background property na header). Na taj način stranica postaje optimiziranija i dobiva se ušteda na prostoru te u konačnici, štedi se posjetiteljev promet. ;)

Usemap je metoda koja nikako nije preporučljiva.

F@NTOM 11.04.2007. 12:36

mozes i cssom sve rijesit...cijelu sliku osim slova mozes staviti kao background i ako slova imaju neki hover, to mozes isto cssom sredit preko image replacement tehnike.


Sva vremena su GMT +2. Sada je 23:39.

Powered by vBulletin®
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© 1999-2024 PC Ekspert - Sva prava pridržana ISSN 1334-2940
Ad Management by RedTyger