Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop

Suggerimenti per sopravvivere a Photoshop per sviluppatori web

(liofilizzo l’acqua)MARIACHIARA PEZZOTTI@merissimissima

acqualioﬁlizzata.itfacebook.com/acqualioﬁlizzata

DI COSA PARLEREMO?

E’ LO STRUMENTO GIUSTO?

RASTER VECTORRASTER O VETTORIALE?

RASTER VECTOR

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

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 T RASFORMAZIONI VANNO CONFERMAT E

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

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]

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

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 ?

MENU’ delle REGOLAZIONI oooooohmmmmmm...

C ol or PatterS o lid n RIEMPIMENTI Gradi ent

COME RENDO UNA FOTOGRAFIA IN BIANCO E NERO?

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

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

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”

DISEGNARE ? ?? ?

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

RETTANGOLO CON PATTERN O SFUMATURA?1) Livello gradient in clipping mask2) Effects -> Gradient overlay3) Path (tracciati di lavoro)

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

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

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

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

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

SFUMATURE: psd vs CSSLINEAR RADIAL ANGLE REFLECTED DIAMOND1) linear e radia ok con CSS2) Reflected e Diamond si possono derivareda sfumature lineari3) Angle (coniche) -> propostahttp://lea.verou.me/specs/conical-gradient/1.html tnks to @sandropaganotti

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

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%);

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 pickerhttp://www.colorzilla.com/gradient-editor/

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

LEGGERE I VALORIbox-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 15px 11pxPer calcolare lo scostamento usiamo il RULER TOOL

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

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

ORGANIZZAZIONE LIVELLI

1° soluzione

2° soluzione

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 )

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

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

Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop

by Acqua Liofilizzata S.n.c. on Jun 18, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Psd4Nerd PSD4NERD – Suggerimenti a sviluppatori web su come sopravvivere a Photoshop Presentation Transcript