Suggerimenti per sopravvivere a Photoshop per sviluppatori web

MARIACHIARA PEZZOTTI@merissimissima

(liofilizzo l’acqua)

acqualiofilizzata.itfacebook.com/acqualiofilizzata

DI COSA PARLEREMO?

E’ LO STRUMENTO GIUSTO?

RASTER O VETTORIALE?

RASTER VECTOR

RASTER VECTOR

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)

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

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

I LIVELLI (F7)

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)

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

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

oooooohmmmmmm...

MENU’ delle REGOLAZIONI

RIEMPIMENTI

Solid Color

Gradient

PatternPattern

COME RENDO UNA FOTOGRAFIA IN BIANCO E NERO?

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

APPROCCIO NON DISTRUTTIVO(save the pixel!)

PERCHE’?gestione delle modifiche

BIANCO E NERO

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

??

?

?

< cs6Livello tinta unita con una maschera

vettoriale della forma (rettangolo)

(aberrante?)

Maschera vettoriale nascosta

(ma la ritorvo nei path!)

== cs6DISEGNARE un RETTANGOLO

1) Livello gradient in clipping mask2) Effects -> Gradient overlay3) Path (tracciati di lavoro)

RETTANGOLO CON PATTERN O SFUMATURA?

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

SOLUZIONE 1Uso Bezier (strumento pennae correlati)

Uso illustratorSOLUZIONE 2

NON SI VIVE DI SOLI RETTANGOLICome disegno?

SOLUZIONE 3Faccio disegnare qualcun altro! :D

(e imparo a gestire il materiale proveniente da illustrator )

Copio in illu.Incollo in Phtsp

come Smart Obj

Copio in illu.Incollo in Phtsp

come Path

ESEMPIO: Le Icone

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:

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

GRADIENT EDITOR

Indicatori di colore: colore e

posizione (0 -100)

Indicatori di opacità: trasparenza e posizione (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 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/

OMBRE (drop e inner)

Sono gestite come effetti che si applicano al livello in maniera NON DISTRUTTIVA

PosizioneColore e opacità

Sfocatura

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

Per calcolare lo scostamento usiamo il RULER TOOL

LEGGERE I VALORI

11px

15px

< cs6#FAIL

Effetto stroke:no tratteggio

no finitura angoli

Proprietà della forma

Opt bar in modalità shape

== cs6BORDI - STROKE

Attenzione a DOVE sto lavorando...ctrl + click sulla maschera

per visualizzazione in area di lavoro

MASCHERE RASTER

+ =

ORGANIZZAZIONE LIVELLI

1° soluzione

2° soluzione

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 )

slideshare.net/acqualiofilizzataphotoshop.acqualiofilizzata.com

MATERIALE (markettata!)

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