Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop
-
Upload
acqua-liofilizzata-snc -
Category
Technology
-
view
809 -
download
0
description
Transcript of Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop
![Page 1: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/1.jpg)
Suggerimenti per sopravvivere a Photoshop per sviluppatori web
![Page 2: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/2.jpg)
MARIACHIARA PEZZOTTI@merissimissima
(liofilizzo l’acqua)
![Page 3: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/3.jpg)
acqualiofilizzata.itfacebook.com/acqualiofilizzata
![Page 4: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/4.jpg)
DI COSA PARLEREMO?
![Page 5: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/5.jpg)
E’ LO STRUMENTO GIUSTO?
![Page 6: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/6.jpg)
RASTER O VETTORIALE?
RASTER VECTOR
![Page 7: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/7.jpg)
RASTER VECTOR
![Page 8: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/8.jpg)
IMPOSTAZIONI FILE E UDM
pixel
2) px nelle preferenze (testo)(edit/preferences/Unit & Ruler)3) cntl + R dx righello
1) impostare il file in px e RGB(cntl + n)
![Page 9: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/9.jpg)
TRASFORMAZIONI E POSIZIONAMENTI
[ disegno una forma - selezione - livello ]
1) “V” (move) -> show trasform controll2) ctrl + T3) dx su w e h e impostare “pixel”LE TRASFORMAZIONI VANNO CONFERMATE
![Page 10: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/10.jpg)
Ctrl + shift + N (nuovo)Ctrl + G (gruppo)Livello corrente“V” -> attenzione all’auto-select
I LIVELLI (F7)
![Page 11: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/11.jpg)
Ctrl + A (seleziono tutto)Ctrl + D (deseleziono)Ctrl + shift + I (selezione inversa)[sono il riferimento per gli allineamenti]
Indico su quale parte del livello voglio lavorare
SELEZIONI
Sì
NO (fuori)
![Page 12: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/12.jpg)
COME COLORO UN LIVELLO DI UN UNICO COLORE (TINTA UNITA)?
![Page 13: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/13.jpg)
COME COLORO UN LIVELLO ?
tnks to @odracci @gandellinux @unlucio @cirpo @sandropaganotti
cmd+shift+n per il livello e poi ... bho, forse doppio click sul layer e la selezione di qualche effetto
command+a per selezionare tutto
il livello e poi via di paint bucket
seleziono il livello, icona in basso (non ricordo il nome) e metto il colore che mi serve
APRO GIMP, anzi no, uso INKSCAPE, non sono capace a farlo con GIMP
Seleziono il livello e poi ci premo
dentro in secchio. Poi non
funziona e creo un nuovo livello
colorato e ce lo metto sopra.
Scelgo un pennello grosso e coloro tutto
![Page 14: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/14.jpg)
oooooohmmmmmm...
MENU’ delle REGOLAZIONI
![Page 15: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/15.jpg)
RIEMPIMENTI
Solid Color
Gradient
PatternPattern
![Page 16: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/16.jpg)
COME RENDO UNA FOTOGRAFIA IN BIANCO E NERO?
![Page 17: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/17.jpg)
BIANCO E NERO
tnks to @odracci @gandellinux @unlucio @cirpo @sandropaganotti
Uso Picasa Me la mando via fax
La fotocopio image -> mode -> grayscale
Smanego i canali
me la gioco con lo hue e gli altri setting in image -> adjustments
Uso ImageMagic
![Page 18: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/18.jpg)
APPROCCIO NON DISTRUTTIVO(save the pixel!)
PERCHE’?gestione delle modifiche
BIANCO E NERO
![Page 19: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/19.jpg)
LIVELLI DI REGOLAZIONE1) creo un nuovo livello regolazione2) imposto i valori e verifico che sia SOPRA al livello interessato3a) dx sul livello regolazione “create clipping mask”3b) gruppo imposto il blending mode del gruppo da “pass though” a “normal”
![Page 20: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/20.jpg)
DISEGNARE
??
?
?
![Page 21: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/21.jpg)
< cs6Livello tinta unita con una maschera
vettoriale della forma (rettangolo)
(aberrante?)
Maschera vettoriale nascosta
(ma la ritorvo nei path!)
== cs6DISEGNARE un RETTANGOLO
![Page 22: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/22.jpg)
1) Livello gradient in clipping mask2) Effects -> Gradient overlay3) Path (tracciati di lavoro)
RETTANGOLO CON PATTERN O SFUMATURA?
![Page 23: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/23.jpg)
Livello Solid Livello Gradient
Livello Pattern Vector MaskSelection
...
PATHSIl mio tracciato è il mio “stampino”.
Disegno la forma e poi decido cosa farne.
Solo per cs6Scelgo il riempimento dalla shape
![Page 24: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/24.jpg)
SOLUZIONE 1Uso Bezier (strumento pennae correlati)
Uso illustratorSOLUZIONE 2
NON SI VIVE DI SOLI RETTANGOLICome disegno?
![Page 25: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/25.jpg)
SOLUZIONE 3Faccio disegnare qualcun altro! :D
(e imparo a gestire il materiale proveniente da illustrator )
![Page 26: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/26.jpg)
Copio in illu.Incollo in Phtsp
come Smart Obj
Copio in illu.Incollo in Phtsp
come Path
ESEMPIO: Le Icone
![Page 27: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/27.jpg)
1) come si modificano2) 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]
SMART OBJECTda sapere:
![Page 28: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/28.jpg)
tnks to @sandropaganotti
1) linear e radia ok con CSS2) Reflected e Diamond si possono derivare da sfumature lineari 3) Angle (coniche) -> proposta http://lea.verou.me/specs/conical-gradient/1.html
SFUMATURE: psd vs CSSLINEAR RADIAL ANGLE DIAMONDREFLECTED
![Page 29: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/29.jpg)
GRADIENT EDITOR
Indicatori di colore: colore e
posizione (0 -100)
Indicatori di opacità: trasparenza e posizione (0 - 100)
![Page 30: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/30.jpg)
LEGGERE I VALORIbackground: linear-gradient( left, black 0%, white 100%);
background: linear-gradient( left, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
![Page 31: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/31.jpg)
LEGGERE I VALORIbackground: 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/
![Page 32: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/32.jpg)
OMBRE (drop e inner)
Sono gestite come effetti che si applicano al livello in maniera NON DISTRUTTIVA
PosizioneColore e opacità
Sfocatura
![Page 33: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/33.jpg)
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)
LEGGERE I VALORI
![Page 34: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/34.jpg)
Per calcolare lo scostamento usiamo il RULER TOOL
LEGGERE I VALORI
11px
15px
![Page 35: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/35.jpg)
< cs6#FAIL
Effetto stroke:no tratteggio
no finitura angoli
Proprietà della forma
Opt bar in modalità shape
== cs6BORDI - STROKE
![Page 36: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/36.jpg)
Attenzione a DOVE sto lavorando...ctrl + click sulla maschera
per visualizzazione in area di lavoro
MASCHERE RASTER
+ =
![Page 37: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/37.jpg)
ORGANIZZAZIONE LIVELLI
![Page 38: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/38.jpg)
![Page 39: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/39.jpg)
1° soluzione
![Page 40: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/40.jpg)
2° soluzione
![Page 41: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/41.jpg)
Slice Tool -> CNTL+ALT+SHIFT + S
CNTL + ALT + SHIFT + E -> CNTL + A -> CNTL + C
-> CNTL + N-> CNTL VCNTL + ALT +SHIFT + S
RITAGLIARE
(Necessita di almeno un grado di parentela con l’uomo ragno :D )
![Page 42: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/42.jpg)
slideshare.net/acqualiofilizzataphotoshop.acqualiofilizzata.com
MATERIALE (markettata!)
![Page 43: Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/558e0dcc1a28ab72318b4706/html5/thumbnails/43.jpg)
GRAZIE :D !(Alfred Doodle - allonzoinc.wordpress.com )