| Precedente :: Successivo |
| Autore |
Messaggio |
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
 Inviato: 19 Ago 2006 05:58 Oggetto: * pagine web photoshop e html |
 |
|
Salve,non so se questo e' il forum giusto,per postare questo argomento se non lo e' chiedo scusa anticipatamente.
Mi piace imparare ad usare photoshop per creare pagine web,ho anche dei testi su photoshop,ma insegnano ad usare il solo software, di pagine web molto poco. Sulla rete ho trovato qualcosa ma non e' sufficente . Cerco un qualcosa da stampare in formato pdf,premetto che la versione di photoshop che uso e': photoshop cs v.8.0.
saluti e grazie |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 10:06 Oggetto: |
|
|
ciao albatro 
photoshop e' un programma di grafica e serve per creare le immagini che userai nel web; per avere qualche esempio di cosa puoi fare con i programmi di fotoritocco, puoi dare un'occhiata a questa discussione: i tutorial sono stati fatti con altri programmi, ma sono certa che non avrai difficolta' a seguirli; in particolare ti segnalo questa discussione in cui si crea un'intestazione che si ricollega ad un progetto di pagina web
di solito si progetta una pagina proprio partendo da photoshop: la si simula in tutti i suoi elementi, poi quando si ha un'idea abbastanza chiara del risultato finale, si decide quali parti saranno delle immagini e quali invece saranno ricostruite in html (o meglio ancora nella sua evoluzione, l'xhtml) e in css; ti consiglio di dare un'occhiata ai vari tutorial presenti in questa discussione, in particolar modo alle ultime due sezioni; il progetto che si collega al thread che ti ho segnalato sopra e' questo |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 19 Ago 2006 11:46 Oggetto: |
|
|
Ti ringrazio,ma come ho detto sopra,per non salvare una lezione alla volta,e poterlo esaminare anche in altre parti che non sia sul pc,e non comperare un altro libro che costicchia un po',avrei preferito un pdf,da poter stampare.
comunque grazie anche della celerita'nella risposta  |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 12:29 Oggetto: |
|
|
| se non hai una fretta del diavolo, provo a traslocartelo in pdf, ma non garantisco di riuscire ad ottenere una cosa decente |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 14:50 Oggetto: |
|
|
il pdf del codice di questo tutorial
per quello dell'header devi avere pazienza che riesca a ritagliarmi un'altra mezz'oretta 
edit: trovata prima del previsto! eccoti il pdf di questo tutorial; attenzione che sono piu' o meno 375 kb
nota: ho fatto poco piu' di copiaeincolla, percio' troverai sicuramente delle discordanze o scritte tipo "clicca qui" che non esistono piu', cmq il grosso del lavoro dovrebbe esserci
manca nel template del codice tutta la parte che serve per creare la pagina, ad ogni modo ti e' sufficiente dare una letta al thread di riferimento per completare quel che manca
L'ultima modifica di rebelia il 19 Ago 2006 14:52, modificato 1 volta |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 19 Ago 2006 15:34 Oggetto: |
|
|
ora mi dirai male 
prima di tutto voglio ringraziarti,per la tua disponibilita',e celerita'
nelle risposte,forse mi sono spiegato male,se io capissi il codice html ... ( e non e' che non mi ci sia dedicato in passato) sarei un bel passo in avanti io vorrei fare pagine web in photoshop,questo perche':
1- mi piace la grafica
2- per creare una pagina il codice lo crea photoshop
3- e' tutto piu' rapido nel vedere il risultato
io tempo fa ho trovato questo sito,e devo dire che in due lezioni
qualcosa e' uscito di buono,anche se avrei delle domande,a cui
non ho potuto avere una risposta; riguardo lo Slice Tool e il salvataggio
del layout.
felice weekand link[/code] |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 16:16 Oggetto: |
|
|
| Albatro ha scritto: | ora mi dirai male
|
mh... mi sa che mi sono spiegata male io
photoshop serve per creare LE IMMAGINI da usare nelle tue pagine; non conosco il programma, ma so che esporta per il web: beh, quel che esporta e' una schifezza che non si puo' nemmeno chiamar codice
se vuoi imparare a fare un lavoro come si deve, devi:
- simulare con photoshop il layout finale
- tagliare le immagini che ti serviranno per decorare il layout
- creare la griglia in (x)html usando uno dei tutorial che trovi in giro (qua nel forum o altrove)
- usare i css per caricare le immagini create in photoshop sulla tua griglia
a questo punto ottieni una pagina base (template) da usare per creare tutte le altre ed e' *l'unico* modo corretto per ottenere un buon risultato; tutto il resto (photoshop, ma anche gli editor usati dalla parte visuale e qualunque programma che permetta di esportare per il web) producono solo un palliativo di una pagina decente 
nota: quello del tutto piu' rapido e' una falsa illusione: se decido di rivoluzionare completamente un qualsiasi sito che ho nel mio portfolio, posso riuscirci in meno di un'ora: ti sfido a fare altrettanto con un qualsiasi lavoro fatto con un programma che esporta in automatico per il web: e' impossibile, te lo posso incidere su pietra quando vuoi
scusami, non intendo far polemica, non mi interessa, pero' mi pare giusto essere molto chiara perche' ho toccato con mano la differenza e so di cosa parlo; credo sia molto piu' corretto partire dalle basi - e col pdf di codice+css commentati che ti ho postato non e' affatto difficile - piuttosto che iniziare male e rendersi poi conto che era meglio lavorare in modo diverso perche' il tempo che si "risparmia" (!!!) ora in realta' lo si spreca con interessi molto alti piu' avanti 
edit: io non uso photoshop, ma ci sono utenti che lo usano regolarmente: se intendi proseguire su quella strada, nessun problema, solo devi aspettare che tornino, perche' al momento sono in vacanza |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 19 Ago 2006 16:49 Oggetto: |
|
|
Ok,non metto assolutamente in dubbio quello che mi dici,anzi credo che ne faro' tesoro dei consigli che mi hai dato
grazie di nuovo |
|
| Top |
|
|
ioSOLOio
Amministratore
Registrato: 12/09/03 19:01
Messaggi: 16342
Residenza: in un sacco di...acqua
|
| Inviato: 19 Ago 2006 17:36 Oggetto: |
|
|
| non è che per caso hai confuso il nome di Photoshop (programma di grafica) con quello di qualche editor html tipo Dreamweaver ? |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 18:55 Oggetto: |
|
|
| ioSOLOio ha scritto: | | non è che per caso hai confuso il nome di Photoshop (programma di grafica) con quello di qualche editor html tipo Dreamweaver ? |
credo che photoshop dia la possibilita' di esportare per il web, probabilmente si riferisce a questa funzione, solo che io non lo uso e non posso verificare... hai mica fotosciop sottomano, per caso? 
edit: anche paint shop pro ha qualcosa del genere: esporta -> suddividi immagine e ti propone un pannellino di esportazione per il web |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 19 Ago 2006 19:36 Oggetto: |
|
|
| rebelia ha scritto: | | ioSOLOio ha scritto: | | non è che per caso hai confuso il nome di Photoshop (programma di grafica) con quello di qualche editor html tipo Dreamweaver ? |
credo che photoshop dia la possibilita' di esportare per il web, probabilmente si riferisce a questa funzione, solo che io non lo uso e non posso verificare... hai mica fotosciop sottomano, per caso?
edit: anche paint shop pro ha qualcosa del genere: esporta -> suddividi immagine e ti propone un pannellino di esportazione per il web |
se tu non usi quel sistema posso capirti perfettamente,ma non sono ancora arrivato alla frutta per confondere photoshop con Dreamweaver anche se li ho entrambi.Infatti paintshop e photoshop sono molto similari nelle loro funzionalita',forse paintshop e' piu rapido nel fare le animazioni,e ci sono piu' opzioni,ma credo che photoshop sia molto piu' professionale (ovviamente e' solo un'opinione che puo essere condivisa o meno) |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 20:48 Oggetto: |
|
|
| Albatro ha scritto: |
paintshop e photoshop sono molto similari nelle loro funzionalita' |
quello piu' completo e professionale e' di gran lunga photoshop, ma costa una paccata di soldi, invece psp non costa tantissimo (la versione completa sui 140 euro mi par di ricordare, cmq non sono molto distante) e per le mie esigenze e' piu' che sufficiente
al momento lo alterno a gimp, cosi' giusto per far pratica anche con quello
cmq sono sicura che iosoloio non intendeva offenderti |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 19 Ago 2006 21:24 Oggetto: |
|
|
| rebelia ha scritto: | | Albatro ha scritto: |
paintshop e photoshop sono molto similari nelle loro funzionalita' |
quello piu' completo e professionale e' di gran lunga photoshop, ma costa una paccata di soldi, invece psp non costa tantissimo (la versione completa sui 140 euro mi par di ricordare, cmq non sono molto distante) e per le mie esigenze e' piu' che sufficiente
al momento lo alterno a gimp, cosi' giusto per far pratica anche con quello
cmq sono sicura che iosoloio non intendeva offenderti |
non mi sono offeso ci mancherebbe,comunque a parte il paintshop il resto li ho tutti,da flash a photoshop a dreamwever,ogni tanto quando mi prende una fissa,allora li rispolvero,paintshop a dire il vero, ho avuto sempre quello freeware,lo usavo solo per i banners,sai come'i software si usano una volta uno e una volta l'altro,a secondo di quello che ci si deve fare,ora per i banner ne uso un altro.
Tempo fa' leggendo una rivista del settore (web),parlava di immagini a ricalco,mi ha incuriosito e siccome avevo sia dreamwever che photoshop
volli provare......e poi dicono che solo le donne so curiose... |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 19 Ago 2006 23:10 Oggetto: |
|
|
| Albatro ha scritto: | | li ho tutti,da flash a photoshop a dreamwever |
ok, allora sei a cavallo anche se non vuoi approfondire granche' il codice:
disegna il layout con photoshop
salva le immagini
importa tutto con dreamweaver e crea le tue pagine
se devi fare un logo, il programma giusto e' flash che ti permette di lavorare in vettoriale
(cosi', un riassunto al volo ) |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 20 Ago 2006 01:50 Oggetto: |
|
|
| rebelia ha scritto: | | Albatro ha scritto: | | li ho tutti,da flash a photoshop a dreamwever |
ok, allora sei a cavallo anche se non vuoi approfondire granche' il codice:
disegna il layout con photoshop
salva le immagini
importa tutto con dreamweaver e crea le tue pagine
se devi fare un logo, il programma giusto e' flash che ti permette di lavorare in vettoriale
(cosi', un riassunto al volo ) |
non serve dreamweaver,se lo si sa fare con photoshop,il punto per me
e' propio sulla delimitazione delle zone del layout,quando ce ne sono troppe nasce il qui' quo' qua' ti porto un esempio:
con il psd sotto.
Rebelia tu mi insegni che il layout e' composto di tre parti:
parte del logo (header)
parte centrale (immagini)
parte bassa (footer)
quando vado a delimitare tutte ste zone faccio til!  perche si accavallano.
buona notte  |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 20 Ago 2006 09:30 Oggetto: |
|
|
| Albatro ha scritto: | | non serve dreamweaver,se lo si sa fare con photoshop |
errore! con photoshop si puo' agevolmente sezionare l'immagine ed esportarla per il web, ma *non* si possono creare delle pagine in html! per questo strumento c'e' dreamweaver col quale pero' *non* si possono disegnare sfondi
per quanto riguarda il tuo layout, non ti serve tagliare tutto, ma soltanto la parte piu' alta, anzi, solo una parte di essa: tutto il resto puo' essere agevolmente riprodotto con i css con un gran risparmio di peso
questa e' la parte che ti serve, tutto il resto no:
 |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 20 Ago 2006 11:30 Oggetto: |
|
|
| rebelia ha scritto: | | Albatro ha scritto: | | non serve dreamweaver,se lo si sa fare con photoshop |
errore! con photoshop si puo' agevolmente sezionare l'immagine ed esportarla per il web, ma *non* si possono creare delle pagine in html! per questo strumento c'e' dreamweaver col quale pero' *non* si possono disegnare sfondi
per quanto riguarda il tuo layout, non ti serve tagliare tutto, ma soltanto la parte piu' alta, anzi, solo una parte di essa: tutto il resto puo' essere agevolmente riprodotto con i css con un gran risparmio di peso
questa e' la parte che ti serve, tutto il resto no:
|
la parte superiore cioe' il top del layout dove va il logo,non mi crea problemi,infatti potrei farlo anche il due parti,( il logo piu il resto dell'immagine)dopo pero' la toolbar con le varie scritte devo per forza tagliarle altrimenti quando vado ad inserire i vari link ipertestuali no li fa piu singoli per ogni scritta,ma si collegano tutti insieme.
In pratica quello che voglio dire e' questo,qui e' solo una prova:
toolbar tagliata ( anche se l'ho tagliata male)
vedi se la toolbar fosse intera come faccio a creare i vari link ipertestuali per oggni scritta?
poi come dici tu sicuramente e'migliore fare il resto con i css
anche se dovrei imparare come:roll: |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 20 Ago 2006 17:12 Oggetto: |
|
|
html:
| Codice: |
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="it">
<head>
<title>Fucina Web</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenitore">
<div id="alto">
<div id="header">
<h1>Fucina Web</h1>
</div>
<hr />
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Mappa del sito</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">E-mail</a></li>
</ul>
</div>
</div>
<hr />
<div id="contenuto">
[contenuto]
</div>
<hr />
<div id="footer">
</div>
</div>
</body>
</html>
|
css:
| Codice: |
body {
background: #fff;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
border: 0px;
margin: 0px;
padding: 0px;
}
hr, h1 {
display: none;
}
img {
border: 0px;
}
#contenitore {
}
#alto {
background: #999;
border-bottom: 3px solid #000;
padding-bottom: 7px;
}
#header {
height: 62px;
background: #000 url(logo.gif) no-repeat top left;
}
#menu {
padding: 10px;
border-bottom: 3px solid #000;
background: #c0c0c0;
}
#menu ul {
list style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
#menu ul li a {
text-decoration: none;
padding: 5px 10px 5px 10px;
color: #000;
}
#menu ul li a:hover {
color: #ac6100;
}
#contenuto {
padding: 10px;
text-align: left;
}
|
UNICA immagine usata:
(ritoccata male, non farci caso)
salva la prima parte in un file che chiami template.html
salva la seconda parte in un file che chiami stile.css
ricrea un'immagine della stessa dimensione di quella che ti ho postato e salvala nella medesima directory con nome logo.gif
clicca su template.html e nel browser ti dovrebbe comparire questo:
ora dimmi quel che non capisci e quello che ci vuoi aggiungere e partiamo da li' |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 20 Ago 2006 19:09 Oggetto: |
|
|
Io non ho parole,dico solo cha hai, non una ma 1001 ragioni, e' veramente fantastico lavorare così,con poche righe hai fatto quello che non ho fatto io da due giorni,certo per me che ho passione per la grafica,ma non ho le capacita' di fare quello che hai fatto tu,beh..la vedo molto dura
mi chiedevi cosa non avessi capito e tu con la tua squisita gentilezza e simpatia me lo spiegheresti..beh come vedi da te stessa. sono completamente a zero quindi ...
e' molta bella quella toolbar,aggiungendo del codice si puo modificare molto bene.
Comunque poi ci sono riuscito a capire qualcosa in piu e l'ho fatto quel layout,ma non mi piace molto,xche quando poi inserisco lo scritto; tipo link anche sulla parte centrale, non essendo elastico se metto qualche riga in piu' si scollano le parti,ecco xche' dico...che me so squagliato dal caldo qui davanti ..e ..grrr
grazie |
|
| Top |
|
|
Albatro
Eroe in grazia degli dei
Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma
|
| Inviato: 20 Ago 2006 19:39 Oggetto: |
 |
|
visualizzando in anteprima il layout,ho notato che manca la footer,e le due parti laterali,per il logo quello potrei rifarlo basta attenersi alle misure originali vero? ma le due fasce ai lati come potrei farle?  |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
