Dannati CSS e Photoshop crucco coi Psd

[Zerg010]

raga mi serve una mano,
ho un file .psd che rappresenta un interfaccia web da usare assieme a css il problma è che io non sono stato capace di trovare una guida che dica in modo chiaro come diavolo impostare photoshop per usare ogni bottone in un modo...dividerli a sezione

aiuto

[knamir]

Zerg010 ha scritto lun, 19 giugno 2006 alle 22:01
raga mi serve una mano,
ho un file .psd che rappresenta un interfaccia web da usare assieme a css il problma è che io non sono stato capace di trovare una guida che dica in modo chiaro come diavolo impostare photoshop per usare ogni bottone in un modo...dividerli a sezione

aiuto

non puoi con photoshop.

con photoshop puoi creare l'immagine del bottone ecc, ma per dargli un comportamento(cambia colore quando lo clicchi,ci passi sopra ecc) ti consiglio di usare dreamweaver+fireworks

[Toru Watanabe]

dunque. Prendi la tua immagine, anche in jpg va benissimo. Poi prendi quello strumento che sembra una taglierina, non so come si chiama. Solitamente è in alto a destra sotto agli strumenti di selezione (credo sotto la bacchetta magica o giu di lì).
A quel punto di tracci dei rettangoli che identificano le varie zone, tasti ecc ecc. Poi vai su File-> save for web. Ti si apre una finestra di dialogo, tu imposti se vuoi che ti salvi le immagini in jpg o gif o altro, gli dici dove salvare e salvi in html. A quel punto ti ritrovi una pagina html identica alla tua immagine, ma composta da tante immagini quante erano le tue suddivisioni. Suddette immagini sono ordinatamente riposte nell'apposita cartella images che photoshop ti crea nella stessa cartella in cui hai salvato la tua pagina.
A questo punto se ti apri sto html con dreamweaver o simili puoi modificarti quello che vuoi. Se ti fai due copie dell'immagine di partenza, modificando colore o qualcos'altro di quelli che saranno i tasti, te la salvi nello stesso modo e poi ti usi le immagini modificate per farti dei pulsanti di rollover o roba simile.

Era questo che chiedevi? Se sì bene, altrimenti non ho capito

[Nyo]

Toru Watanabe ha scritto lun, 19 giugno 2006 alle 22:28
dunque. Prendi la tua immagine, anche in jpg va benissimo. Poi prendi quello strumento che sembra una taglierina, non so come si chiama. Solitamente è in alto a destra sotto agli strumenti di selezione (credo sotto la bacchetta magica o giu di lì).
A quel punto di tracci dei rettangoli che identificano le varie zone, tasti ecc ecc. Poi vai su File-> save for web. Ti si apre una finestra di dialogo, tu imposti se vuoi che ti salvi le immagini in jpg o gif o altro, gli dici dove salvare e salvi in html. A quel punto ti ritrovi una pagina html identica alla tua immagine, ma composta da tante immagini quante erano le tue suddivisioni. Suddette immagini sono ordinatamente riposte nell'apposita cartella images che photoshop ti crea nella stessa cartella in cui hai salvato la tua pagina.
A questo punto se ti apri sto html con dreamweaver o simili puoi modificarti quello che vuoi. Se ti fai due copie dell'immagine di partenza, modificando colore o qualcos'altro di quelli che saranno i tasti, te la salvi nello stesso modo e poi ti usi le immagini modificate per farti dei pulsanti di rollover o roba simile.

Era questo che chiedevi? Se sì bene, altrimenti non ho capito

grazie kayo..sempre utile.

[Toru Watanabe]

Nyo ha scritto lun, 19 giugno 2006 alle 22:37

Toru Watanabe ha scritto lun, 19 giugno 2006 alle 22:28
dunque. Prendi la tua immagine, anche in jpg va benissimo. Poi prendi quello strumento che sembra una taglierina, non so come si chiama. Solitamente è in alto a destra sotto agli strumenti di selezione (credo sotto la bacchetta magica o giu di lì).
A quel punto di tracci dei rettangoli che identificano le varie zone, tasti ecc ecc. Poi vai su File-> save for web. Ti si apre una finestra di dialogo, tu imposti se vuoi che ti salvi le immagini in jpg o gif o altro, gli dici dove salvare e salvi in html. A quel punto ti ritrovi una pagina html identica alla tua immagine, ma composta da tante immagini quante erano le tue suddivisioni. Suddette immagini sono ordinatamente riposte nell'apposita cartella images che photoshop ti crea nella stessa cartella in cui hai salvato la tua pagina.
A questo punto se ti apri sto html con dreamweaver o simili puoi modificarti quello che vuoi. Se ti fai due copie dell'immagine di partenza, modificando colore o qualcos'altro di quelli che saranno i tasti, te la salvi nello stesso modo e poi ti usi le immagini modificate per farti dei pulsanti di rollover o roba simile.

Era questo che chiedevi? Se sì bene, altrimenti non ho capito

grazie kayo..sempre utile.

ma non l'aveva chiesto un altro?!

[Cyberik]

Toru Watanabe ha scritto lun, 19 giugno 2006 alle 22:28
dunque. Prendi la tua immagine, anche in jpg va benissimo. Poi prendi quello strumento che sembra una taglierina, non so come si chiama. Solitamente è in alto a destra sotto agli strumenti di selezione (credo sotto la bacchetta magica o giu di lì).
A quel punto di tracci dei rettangoli che identificano le varie zone, tasti ecc ecc. Poi vai su File-> save for web. Ti si apre una finestra di dialogo, tu imposti se vuoi che ti salvi le immagini in jpg o gif o altro, gli dici dove salvare e salvi in html. A quel punto ti ritrovi una pagina html identica alla tua immagine, ma composta da tante immagini quante erano le tue suddivisioni. Suddette immagini sono ordinatamente riposte nell'apposita cartella images che photoshop ti crea nella stessa cartella in cui hai salvato la tua pagina.
A questo punto se ti apri sto html con dreamweaver o simili puoi modificarti quello che vuoi. Se ti fai due copie dell'immagine di partenza, modificando colore o qualcos'altro di quelli che saranno i tasti, te la salvi nello stesso modo e poi ti usi le immagini modificate per farti dei pulsanti di rollover o roba simile.

Era questo che chiedevi? Se sì bene, altrimenti non ho capito

Ah ok grazie kayo

[Zerg010]

grazie, si era esattamente questo

Edit: perchè lo chiamate kayo a Toru ?

[Zerg010]

spero possano interessare questo -> http://www.deviantart.com/deviation/3260 2088/

e questo sito con tanti templates non in psd ma direttamente in formato web -> http://andreasviklund.com/templates/

e poi http://www.oswd.org/

[Sticky©]

Le slice rullano.

[Toru Watanabe]

Zerg010 ha scritto mar, 20 giugno 2006 alle 21:22
grazie, si era esattamente questo

Edit: perchè lo chiamate kayo a Toru ?

il mio nick prima era Kayoken. Molti vecchi utenti mi chiamano sempre con quel nome.

[Zerg010]

oggi mi sono letto una bella guidona da html.it
però vorrei fare una cosa e credo di non poterla fare in due passaggi veloci veloci, chiedo quindi qui
ho un foglio html tutto arricchito con la grafica che serve, con tutte le immagini nei posti giusti messi dentro a delle tabelle, però adesso devo dividere questa pagina fatta ad arte tra css e una nuova pagina html.
ho creato un div, la sua classe si chiama container.
dovrei fare così:
mettere al lato sinistro il bordino a immagine, mettere a destra l'altro bordino formato immagine e così anche per i restati due punti cardinali. non sono ancora capace di farlo suggerimenti ?

il problema nasce perchè vorrei evitare di creare dei div dentro al container per i 4 lati.

[Pegaso42]

parere dell'ingegnere:
allora...l'arte di usare html e css come andrebbero usati (cioè senza usare le tabelle) non è da tutti!io c'ho messo 2 corsi ad ingegneria e ancora non è che c'ho tutto chiarissimo! è per questo che la maggior parte della gente usa le tabelle e bon...inoltre stai attento perchè i vari browser visualizzano i css in maniera diversa (in teoria è uno standard ma poi fanno tutti a modo loro...) ma se vuoi fare le cose bene è meglio che visualizzi in internet explorer che segue lo standard passo passo (firefox no!)... non ti preoccupare di creare div su div...è così che si fa...per posizionare le cose all'interno del div dovrai usare
position: relative
height: ...
etc...
se lo vuoi fare bene devi usare le percentuali...cmq ti consiglio di dare uno sguardo qui: http://www.w3.org/TR/CSS21/
per imparare html e css bene in generale: www.w3c.org
è il sito del consorzio mondiale per gli standard in internet (Ibm, Microsoft, tuttiquellichecontanoqualcosa)...li ti spiegano le cose come andrebbero fatte (come le hanno pensate) e non come poi le fa la gente...
parere dell'uomo: lascia stare le cavolate come div e css xkè ti fanno perdere solo tempo e usa le tabelle che sono l'unica cosa che tutti i browser ti leggono allo stesso modo...altrimenti perderai 2 settimane buone a fare una cosa che con le tabelle ci mettevi 10 minuti...se lo standard fosse stato rispettato forse sarebbe stato carino impararlo, ma se poi fanno tutti come vogliono loro allora sti ca**i!

[Zerg010]

Pegaso42 ha scritto gio, 22 giugno 2006 alle 10:28
parere dell'ingegnere:
allora...l'arte di usare html e css come andrebbero usati (cioè senza usare le tabelle) non è da tutti!io c'ho messo 2 corsi ad ingegneria e ancora non è che c'ho tutto chiarissimo! è per questo che la maggior parte della gente usa le tabelle e bon...inoltre stai attento perchè i vari browser visualizzano i css in maniera diversa (in teoria è uno standard ma poi fanno tutti a modo loro...) ma se vuoi fare le cose bene è meglio che visualizzi in internet explorer che segue lo standard passo passo (firefox no!)... non ti preoccupare di creare div su div...è così che si fa...per posizionare le cose all'interno del div dovrai usare
position: relative
height: ...
etc...
se lo vuoi fare bene devi usare le percentuali...cmq ti consiglio di dare uno sguardo qui: http://www.w3.org/TR/CSS21/
per imparare html e css bene in generale: www.w3c.org
è il sito del consorzio mondiale per gli standard in internet (Ibm, Microsoft, tuttiquellichecontanoqualcosa)...li ti spiegano le cose come andrebbero fatte (come le hanno pensate) e non come poi le fa la gente...
parere dell'uomo: lascia stare le cavolate come div e css xkè ti fanno perdere solo tempo e usa le tabelle che sono l'unica cosa che tutti i browser ti leggono allo stesso modo...altrimenti perderai 2 settimane buone a fare una cosa che con le tabelle ci mettevi 10 minuti...se lo standard fosse stato rispettato forse sarebbe stato carino impararlo, ma se poi fanno tutti come vogliono loro allora sti ca**i!

ah,

però ti confesso che alcune delle cose che mi hai detto vanno in contrasto con quello che ho appreso ieri durante il corso http://css.html.it/guide/leggi/2/guida-c ss-di-base/ a proposito delle regole seguite da internet explorer ma non da firefox ( forse uno scambio involontario ?), e poi io i css li voglio usare devo fare l'evoluzione dalle tabelle che usavo prima infatti.

il link che mi hai dato ora me lo spulcio per benino, grazie

[Pegaso42]

mmmm, a me sembra che sia firefox non aderente agli standard...ma in reltà lo standard è cambiato nel tempo(varie versioni di html), quindi è probabile che firefox risulti aderente agli ultimi standard e explorer no (dato che non si è mai evoluto)...in ogni caso il fatto che i 2 maggiori browser non visualizzino i css nella stessa maniera è un bel dito al c... se vuoi un consiglio cmq non usare mai (anche se prima ti ho detto il contrario) le posizioni relative con le percentuali(che dovrebbero essere obbligatorio) xkè mentre explorer calcola la percentuale rispetto all'angolo superiore sinistro del div, firefox la calcola rispetto all'angolo superiore sinistro del body...quindi se le usi rendi obbligatorio l'uno o l'altro dei browser...questa è la cosa più fastiodiosa del mondo...usa invece posizionamenti assoluti (ti viengono in aiuto i righelli di photoshop se vuoi sapere la posizione assoluta in cui vuoi mettere un oggetto)...inoltre...impara l'uso dell'attributo float...ma ricorda che non è banale da capire...in ogni caso: buono spulciamento! bellaz

[Zerg010]

Pegaso42 ha scritto gio, 22 giugno 2006 alle 23:35
mmmm, a me sembra che sia firefox non aderente agli standard...ma in reltà lo standard è cambiato nel tempo(varie versioni di html), quindi è probabile che firefox risulti aderente agli ultimi standard e explorer no (dato che non si è mai evoluto)...in ogni caso il fatto che i 2 maggiori browser non visualizzino i css nella stessa maniera è un bel dito al c... se vuoi un consiglio cmq non usare mai (anche se prima ti ho detto il contrario) le posizioni relative con le percentuali(che dovrebbero essere obbligatorio) xkè mentre explorer calcola la percentuale rispetto all'angolo superiore sinistro del div, firefox la calcola rispetto all'angolo superiore sinistro del body...quindi se le usi rendi obbligatorio l'uno o l'altro dei browser...questa è la cosa più fastiodiosa del mondo...usa invece posizionamenti assoluti (ti viengono in aiuto i righelli di photoshop se vuoi sapere la posizione assoluta in cui vuoi mettere un oggetto)...inoltre...impara l'uso dell'attributo float...ma ricorda che non è banale da capire...in ogni caso: buono spulciamento! bellaz

mammamia che martirio, avevi ragione. ho provato di qua e di là coi CSS Explorer va bene con alcune cose ma si crea un macello di quà e di là Opera sembra un alcolizzato quando il container non è in pixel ma in percentuale