Photoshop+HTML

Mattheous · 28.03.2007., 17:10

Zanima me na koji način da dizajn napravljen u photoshopu povežem sa HTML-om? Primjerice:

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!

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

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.

28.03.2007., 17:10	#1
Mattheous Premium Moj komp Datum registracije: Apr 2005 Lokacija: Dalmatia Postovi: 205	Photoshop+HTML Zanima me na koji način da dizajn napravljen u photoshopu povežem sa HTML-om? Primjerice: 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? __________________ Greed, for lack of a better word, is good. Greed is right. Greed works. Greed clarifies, cuts through, and captures the essence of the evolutionary spirit. Greed, in all of its forms, greed for life, for money, for love, knowledge has marked the upward surge of mankind.

28.03.2007., 21:58	#3
Mattheous Premium Moj komp Datum registracije: Apr 2005 Lokacija: Dalmatia Postovi: 205	Jel možeš pojasnit? Nikad nisam nisam radija nešto slično. Dosad sam samo korisitija html i css. __________________ Greed, for lack of a better word, is good. Greed is right. Greed works. Greed clarifies, cuts through, and captures the essence of the evolutionary spirit. Greed, in all of its forms, greed for life, for money, for love, knowledge has marked the upward surge of mankind.

28.03.2007., 23:04	#5
Mattheous Premium Moj komp Datum registracije: Apr 2005 Lokacija: Dalmatia Postovi: 205	Ok, radit ću usemap. Još samo da te pitam- može li se postići kakav rollover efekt kada se priđe priko linka? __________________ Greed, for lack of a better word, is good. Greed is right. Greed works. Greed clarifies, cuts through, and captures the essence of the evolutionary spirit. Greed, in all of its forms, greed for life, for money, for love, knowledge has marked the upward surge of mankind.

29.03.2007., 09:23	#7
KnezTame Premium Datum registracije: Dec 2006 Lokacija: Zagreb Postovi: 489	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. __________________ Poslije BSG-a sve je glupo

29.03.2007., 17:26	#9
Mattheous Premium Moj komp Datum registracije: Apr 2005 Lokacija: Dalmatia Postovi: 205	Hvala svima na pomoći! __________________ Greed, for lack of a better word, is good. Greed is right. Greed works. Greed clarifies, cuts through, and captures the essence of the evolutionary spirit. Greed, in all of its forms, greed for life, for money, for love, knowledge has marked the upward surge of mankind.

28.03.2007., 20:43	#2
domy_os EMP moderator Datum registracije: Apr 2005 Lokacija: Osijek Postovi: 18,809	Pa imaš slice tool. Ne kužim u čemu je problem?

28.03.2007., 22:33	#4
mat Premium Moj komp Datum registracije: Feb 2006 Lokacija: zg Postovi: 2,105	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

29.03.2007., 08:21	#6
mat Premium Moj komp Datum registracije: Feb 2006 Lokacija: zg Postovi: 2,105	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

29.03.2007., 10:16	#8
mat Premium Moj komp Datum registracije: Feb 2006 Lokacija: zg Postovi: 2,105	opet losiji i zastarjeli nacin

11.04.2007., 10:16	#10
IP9 Premium Datum registracije: Jan 2006 Lokacija: zg Postovi: 116	da bezveze ne pišem, ja sam pobrao tamo stvar i zadovoljan => http://www.tutorijali.net/photoshop/...ce-izrezivanje

11.04.2007., 12:36	#12
F@NTOM Darth Pope Datum registracije: Jul 2006 Lokacija: localhost Postovi: 225	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. __________________

Oglasni prostor
PC Ekspert Forum Oglas