Devi costruire un sito da un layout in photoshop di un designer? Micro operazioni se non hai mai usato photoshop e devi recuperare informazioni e esportare immagini per costruire un foglio di stile. Vuoi (o devi...) cimentarti nel progettare un layout da zero? Tips & tricks e best practice per sfruttare al meglio Photoshop nella progettazione web. http://www.webdebs.org/2012/brainpirlo-psd4nerd/ http://photoshop.acqualiofilizzata.com

1. Suggerimenti per sopravvivere a Photoshop
per sviluppatori web

2. (liofilizzo l’acqua)
MARIACHIARA PEZZOTTI
@merissimissima

3. acqualiofilizzata.it
facebook.com/acqualiofilizzata

4. DI COSA PARLEREMO?

5. E’ LO STRUMENTO GIUSTO?

6. RASTER VECTOR
RASTER O VETTORIALE?

7. RASTER VECTOR

8. IMPOSTAZIONI FILE E UDM
1) impostare il file in px e RGB
(cntl + n)
2) px nelle preferenze (testo)
(edit/preferences/Unit & Ruler)
3) cntl + R dx righello
pixel

9. TRASFORMAZIONI
E POSIZIONAMENTI
[ disegno una forma - selezione - livello ]
1) “V” (move) -> show trasform controll
2) ctrl + T
3) dx su w e h e impostare “pixel”
LE T RASFORMAZIONI VANNO CONFERMAT E

10. I LIVELLI (F7)
Ctrl + shift + N (nuovo)
Ctrl + G (gruppo)
Livello corrente
“V” -> attenzione
all’auto-select

11. NO (fuori)
SELEZIONI
Indico su quale parte
del livello voglio lavorare
Sì
Ctrl + A (seleziono tutto)
Ctrl + D (deseleziono)
Ctrl + shift + I (selezione inversa)
[sono il riferimento per gli allineamenti]

12. COME COLORO UN LIVELLO DI UN
UNICO COLORE (TINTA UNITA)?

13. tnks to @odracci @gandellinux @unlucio @cirpo @sandropaganotti
AP RO GIMP,
cmd+shift+n per anzi no, uso IN
il livello e poi ... non sono capac KSCAPE,
bho, forse doppio e a farlo con G
click sul layer IMP
e la selezione di q
ualche effetto
Scelgo un pennello
and+a per seleziona re tutto grosso e coloro tutto
comm t bucket
ivello e poi via di pain
il l
ci pr emo
ivello e poi
seleziono il live
llo, icona in ba ziono il l io. P oi non
(non ricordo i sso Sele
ro in secch uovo livello
l nome) e me dent creo un n
il colore che m tto ona e tto s opra.
i serve funzi e ce lo me
col orato
COME COLORO UN LIVELLO ?

14. MENU’ delle REGOLAZIONI
oooooohmmmmmm...

15. C ol or Patter
S o lid n
RIEMPIMENTI
Gradi
ent

16. COME RENDO UNA FOTOGRAFIA
IN BIANCO E NERO?

17. tnks to @odracci @gandellinux @unlucio @cirpo @sandropaganotti
me la gio
Uso Im ageMagic co con lo h
ue e gli
altri sett
ing in
image ->
Smanego i canali adjustme
nts
U so P icasa Me la mando
via fax
image -> mode -> gr
ayscale L a fotocopio
BIANCO E NERO

18. APPROCCIO NON DISTRUTTIVO
(save the pixel!)
PERCHE’?
gestione delle modifiche

19. LIVELLI DI REGOLAZIONE
1) creo un nuovo livello regolazione
2) imposto i valori e verifico
che sia SOPRA al livello interessato
3a) dx sul livello regolazione
“create clipping mask”
3b) gruppo imposto il blending mode
del gruppo da “pass though” a “normal”

20. DISEGNARE
?
?
? ?

21. DISEGNARE un RETTANGOLO
< cs6 == cs6
Livello tinta unita Maschera vettoriale
con una maschera nascosta
vettoriale della
forma (rettangolo) (ma la ritorvo nei path!)
(aberrante?)

22. RETTANGOLO CON PATTERN
O SFUMATURA?
1) Livello gradient in clipping mask
2) Effects -> Gradient overlay
3) Path (tracciati di lavoro)

23. PATHS
Il mio tracciato è il mio “stampino”.
Disegno la forma e poi decido cosa farne.
G rad ient
Selecti Livel lo Solid Li vello
on
Livello Pattern ... Vector Mask
Solo per cs6
Scelgo il riempimento dalla shape

24. NON SI VIVE DI SOLI RETTANGOLI
Come disegno?
SOLUZIONE 1
Uso Bezier (strumento pennae correlati)
SOLUZIONE 2
Uso illustrator

25. SOLUZIONE 3
Faccio disegnare qualcun altro! :D
(e imparo a gestire il materiale proveniente da illustrator )

26. ESEMPIO: Le Icone
Copio in illu. Copio in illu.
Incollo in Phtsp Incollo in Phtsp
come Path come Smart Obj

27. SMART OBJECT
da sapere:
1) come si modificano
2) se la fonte è vect è vect anche in PHT!
3) propagazione delle modifiche
[4) se uso dei filtri su uno smart
saranno applicati in maniera NON distruttiva]

28. SFUMATURE: psd vs CSS
LINEAR RADIAL ANGLE REFLECTED DIAMOND
1) linear e radia ok con CSS
2) Reflected e Diamond si possono derivare
da sfumature lineari
3) Angle (coniche) -> proposta
http://lea.verou.me/specs/conical-gradient/1.html
tnks to @sandropaganotti

29. GRADIENT EDITOR
Indicatori di
opacità:
trasparenza e
posizione (0 - 100)
Indicatori di
colore: colore e
posizione (0 -100)

30. LEGGERE I VALORI
background: linear-gradient(
left,
black 0%,
white 100%
);
background: linear-gradient(
left,
rgba(0,0,0,1) 0%,
rgba(255,255,255,1) 100%
);

31. LEGGERE I VALORI
background: linear-gradient(
left, rgba(0,0,0,1) 0%,
rgba(128, 128, 128,0) 50%,
rgba(255,255,255,1) 100%
);
mismatch tra opacity picker e color picker:
aggiungere altri color picker
http://www.colorzilla.com/gradient-editor/

32. OMBRE (drop e inner)
Posizione
Colore e opacità
Sfocatura
Sono gestite come effetti che si
applicano al livello in maniera
NON DISTRUTTIVA

33. LEGGERE I VALORI
box-shadow:
-11px (scostamento x)
11px (scostamento y)
0px (blur)
rgba(0, 0, 0, 0.75);
(colore + opacità)
Corrisponde a 45°distance 15px
(per semplicità portiamo size a 0 == ombra non sfocata)

34. LEGGERE I VALORI
15px
11px
Per calcolare lo scostamento usiamo il RULER TOOL

35. BORDI - STROKE
< cs6 == cs6
Proprietà della forma
#FAIL
Opt bar in modalità
Effetto stroke:
shape
no tratteggio
no finitura angoli

36. MASCHERE RASTER
+ =
Attenzione a DOVE sto lavorando...
ctrl + click sulla maschera
per visualizzazione in area di lavoro

37. ORGANIZZAZIONE LIVELLI

39. 1° soluzione

40. 2° soluzione

41. RITAGLIARE
Slice Tool -> CNTL+ALT+SHIFT + S
CNTL + ALT + SHIFT + E
-> CNTL + A -> CNTL + C
-> CNTL + N-> CNTL V
CNTL + ALT +SHIFT + S
(Necessita di almeno un grado di parentela con l’uomo ragno :D )

42. MATERIALE (markettata!)
slideshare.net/acqualiofilizzata
photoshop.acqualiofilizzata.com

43. GRAZIE :D !
(Alfred Doodle - allonzoinc.wordpress.com )