cum se creeaza o pagina web

In photoshop putem realiza cu usurinta layout-ul unui site. Asta inseamna ca pentru a putea transpune ideea noastra intr-un site complet functional, vom mai avea nevoie si de alte programe (de ex Dreamweaver) sau daca nu, cunostine de html.
Sa spunem ca am desenat urmatoarea schita pentru un site:

Pentru a incarca mai repede intr-un browser, si pentru a face butoanele functionale vom trebui sa sectionam layout-ul, folosind Slice Tool. Cursorul va avea forma unui cutit. Imediat sub slice tool gasim Slice Select Tool, cu care putem selecta slice-urile si pe putem redimensiona, redenumi etc.

Incepand din coltul din stanga sus, incepem sa cream slice-urile, avand grija ca fiecare buton sa fie cuprins intr-un singur slice si sa nu avem nici o portiune libera. Este de recomandat ca cel putin la butoane sa le dam un alt nume fata de cel care il da implicit photoshop-ul. Putem face asta executand click dreapta pe slice, si selectand Edit Slice Options.


Dupa ce am terminat de "taiat" layout-ul nostru, mergem la File - Save for Web, si dupa ce selectam toate slice-urile (sau doar cele pe care le vrem) din dreapta alegem calitatea imaginilor, apoi dam Save si alegem optiunea html+images (de la Save As Type). In acest mod, photoshop-ul ne creaza un fisier index.html incare sunt trecute toate slice-urile noastre sub forma unui tabel, iar pe langa acest fisier vom avea un director Images in care se vom afla toate slice-urile noastre.


Daca de exemplu lucram in Dreamweaver, si vrem ca butonul sa aiba doua stari diferite (cand tinem mouse-ul peste el fontul sa aiba culoarea neagra), ne reintoarcem in Photoshop, schimbam font-ul butoanelor si redenumim slice-urile respective apoi in momentul in care facem Save for Web nu mai selectam optiunea Html+Images ci doar images.
Spor la lucru!

alinierea cu background-ul

Lucrand mai mult cu Illustrator, folosesc des fereastra Align si optiunea Align to Artboard, dar nu stiam ca ceva asemanator este si in Photoshop. Mai pe scurt, ati patit vreodata sa scrieti ceva sau sa desenati un anumit obiect si apoi sa incercati manual (fara a folosi grid-ul, ci doar ochiometric) sa-l aliniati cu background-ul? Eu am incercat, si la un zoom mai mare se vede clar ca nu am aliniat perfect.

Solutia e extrem de simpla. Sa zicem ca facem un document nou, 1280*800, creem un layer nou in care desenam un dreptunghi, undeva prin centru. Selectam cele 2 layer-e (folosind Ctrl) si apoi mergem la meniul Layers - Align si selectam Vertical Centers apoi intram din nou si selectam Horizontal Centers, si observam ca dreptunghiul se pozitioneaza chiar in mijlocul imaginii. Celelalte optiuni de la align se pot folosi in diverse situatii.


Spor la desenat!

Threshold

Suna cam urat cuvantul asta, dar cu ajutorul acestui Threshold putem realiza figuri ca mai jos, pe care probabil le-ati intalnit in multe reviste de publicitate, sau chiar pe net, pe diverse site-uri



Cu ajutorul Threshold-ului putem realiza imagini cu tonalitati duble (duotones), iar functia pe care o face e urmatoare: converteste o imagine color sau grayscale intr-o imagine alb/negru cu contrast puternic (nu vedem tonalitati de gri, ci doar alb si negru). Mai bine va arat cum se face. Deschideti urmatoarea poza :



Mergeti la Image - Adjustments - Threshold si introduceti valoarea 63. Apoi mergeti la Image - Adjustments - Hue&Saturation si introduceti valorile 311,60,35 (nu uitati sa aveti bifat colorize). Salvati imaginea cu un alt nume, apoi redeschideti prima imagine, mergeti iar la Threshold si introduceti 63, apoi la Hue&Saturation (bifati Colorize), punand valorile: 151,46,-35 pentru a colora cerul.


Cu aceasta imagine deschisa, cautati optiunea Color Range sub meniul Select, iar in fereastra ce va apare dati un click pe cer apoi pe OK. Apoi apasati Ctrl+C si mergeti la cealalta imagine si apasati Ctrl+V, si ar trebui ca imaginea finala sa fie precum cea de la inceputul tutorialului.

Halftones

Probabil ati vazut prin reviste sau chiar pe net figuri de genul:



Nu incercati sa faceti figurile standard si apoi sa desenati mici cercuri in jurul lor, pentru ca va chinuiti degeaba si oricum nu va iesi la fel. Efectul se cheama Halftone. Deschideti un document nou, sa zicem 800*800 si desenati 3 figuri ca mai jos (foarte important: ele tb sa aiba culorile R:255 apoi G:255 si B:255 si restul zero, altfel va iesi ceva diferit)

Apoi, apasati Ctrl+Shift+E (pentru a rasteriza imaginea) si pe urma cautati in meniul Filter - Pixelate - Color Halftone si introduceti valorile de mai jos:


Mai jucativa cu culorile si setariel de la Halftone pentru diferite efecte. Sau, pentru a obtine imaginea de mai jos,



Desenati un cerc negru in mijlocul suprafetei albe, apoi apasati Ctrl+Shift+E pentru a rasteriza imaginea. Aplicati Filter - Blur - Gaussian Blur introducand valoarea 100, si apoi Filter - Pixelate - Color Halftone cu valorile: 15,30,30,30,30.

imbatranirea unei poze

In acest tutorial va voi arata cate putin din: transformarea unei poze din color in alb-negru, adaugarea de zgomot, dodge&burn si aplicarea unei texturi peste o poza.
Sa deschidem mai intai urmatoarea poza in Photoshop:


Urmatorul pas, care ar trebui sa fie ca un reflex, este duplicarea layer-ului Background.

Tot aici mai deschidem si urmatoarea textura, pe care urmeaza sa o aplicam primei poze. Penteru aceasta, tinem apasat Ctrl+Alt si tragem de textura peste imaginea noastra initiala, si avand noul layer cu textura selectat schimbam blending mode-ul astfel: Hard Light de opacitate 40% (puteti incerca si alte moduri). Schimbam denumirea noului layer in Textura.


In caseta Layers selectam Background copy, apoi mergem la Filter - Noise - Add Noise si introducem valorile din figura:


Selectam layer-ul Textura, apoi merge la Layer - New adjustment layer si selectam Gradient Map, pentru a face imaginea alb-negru, si facem ca in figura:

Ne intoarcem iar la layer-ul Textura, si incercam sa innegrim putin barele si marginile pozei si sa albim putin centrul ei (capul leului) folosind Burn Tool si Dodge Tool. Selectam mai intai Burn Tool (Midtones, 50%) si "pictam" cu pensula peste bare si peste marginile pozei.


Apoi, (avem grija sa fie tot layer-ul Textura selectat), cautam unealta Dodge Tool (sub Burn Tool - cu optiunile Midtones 20% si eventual Highlights 20%) si "pictam" cu pensula peste capul leului, scotandu-l astfel putin in evidenta.


Cam asta e. Eventual se poate aplica o alta textura cu un alt blending mode, iar imaginea se mai poate transforma in una alb negru desaturand-o (Ctrl+Shift+U)

Cereri tutoriale

Lasati un comment sau trimiteti-mi un mail (bdobreav@gmail.com) cu sugestii de tutoriale, si voi incerca in cel mai scurt timp sa le fac.

Imbinarea a doua imagini

Poate nu am ales cel mai sugestiv titlu, dar ceea ce vreau sa va prezint in acest tutorial este cum anume putem lua un obiect (sau mai multe) dintr-o imagine si sa il(le) mutam intr-o alta imagine. Acest lucru se poate face in mai multe moduri, dar eu ma voi stradui sa va explic doar unul dintre ele, momentan.
Ok, sa spunem ca avem urmatoarele doua poze (facute in fata la Baneasa Shopping City), si sa zicem ca vrem sa-i mutam pe cei 2 din dreapta primei imagini in imaginea a doua.



Primul lucru care trebuie facut este selectarea celor doi. Iar ca sa facem asta, folosim modul Quick Mask al Photoshop-ului. Va explic indata ce-i cu el. Cu prima imagine selectata, apasam Q (sau butonul Edit in Quick Mask Mode din josul casetei de instrumente). Avand negrul selectat ca foreground color (asta inseamna ca negru trebuie sa fie peste alb) selectam un brush de dimensiuni medii, apoi facem zoom pe poza pana cand in cadru apar doar cei 2. Acum incepem sa pictam peste ei cu brush-ul, si observam ca desi am ales culoarea Negru, brush-ul nostru este rosu. Ei bine, de fapt Photoshop-ul nu picteaza peste poza noastra, ci de fapt noi ii spunem lui ca portiunea de imagine de sub aceastra culoare rosie urmeaza a fi selectata.



In principiu, trebuie sa ii "pictam" pe cei doi cu rosu (atentie, brush-ul e bine sa aiba un hardness foarte apropiat de 100% sau chiar 100%). Tineti minte un lucru: in caseta de instrumente, cand negrul e peste alb inseamna ca brush-ul va fi rosu, adica facem selectia noastra, iar cand albul este peste negru (ori apasam pe sageata dubla de langa cele 2 dreptunghiuri, ori apasam X), stergem din selectia noastra.



Pentru a face o selectie cat mai buna la margini, dam un zoom cat mai mare (Ctrl + + si Ctrl + -) si marim sau micsoram pensula noastra (tastele [ si ]). Si nu uitam de X, cand e nevoie sa stergem ceva.

Daca toate au mers bine, imaginea ar trebui sa arate cam asa:



Ok, si acum partea interesanta. Iesim din modul Quick Mask (apasam pe tasta Q sau pe butonul Edit in Standard Mode), apoi inversam selectia apasand Ctrl+Shift+I sau Select - Inverse din meniu), si, cu mouse-ul apasat pe cei doi (avand Move Tool selectat din caseta de instrumente - sau tasta V), ii tragem in ce-a de-a doua imagine.



Observam imediat ca Photoshop i-a pus pe cei doi intr-un nou layer,iar cei doi trebuiesc mariti putin, si pentru acest lucru intram in modul Transform (apasam Ctrl+T). Va apare un chenar in jurul lor, iar noi va trebui sa-l marim putin, tragand dintr-un colt al lui inspre exterior, tinand apasata tasta Shift pentru a pastra proportiile), si cand suntem multumiti de rezultat apasam Enter.
Daca ne intoarcem la prima poza, observam ca cei doi inca mai sunt selectati. Pentru a-i deselecta, apasam Ctrl+D.



Cam asta e cu Quick Mask. Destul de simplu de folosit, dar necesita mult timp pentru o selectie cat mai buna a marginilor. Inca ceva, pentru a arata cat mai realistic, se poate "picta" umbra lor, folosind o pensula neagra de dimensiuni mici si opacitate redusa.

Actions

Sa zicem ca ati fost intr-o excursie, si ati facut 100 de poze la rezolutia de 10 MegaPixeli, si doriti sa le postati repede pe blog-ul dvs sau sa le trimiteti cuiva prin mail sau messenger. In mod evident, va dura foarte mult. Daca fiecare poza are 5-6 Mb asta inseamna 5-600 de Mb ce trebuiesc trimisi. Daca aveti conexiune foarte buna, va dura in jur de 20-30 minute, dar pentru cei cu o conexiune mai slaba, sau chiar internet mobil, va dura cateva ore bune, deci in principiu nu se justifica trimiterea unor poze atat de mari.
Cel mai bine ar fi sa le redimensionam pe toate, ca sa reducem cu mai mult de 70-80 dimensiunea lor. Evident, ele trebuiesc salvate ca niste copii, pastrand pozele originale (tineti minte faptul ca, daca doriti sa retusati o imagine, Photoshop-ul se descurca mult mai bine cu o poza de mari dimensiuni).
Dar ar dura prea mult sa deschidem fiecare poza, sa o redimensionam, apoi sa o salvam, mai ales daca e vorba de zeci, sute de poze. Si tocmai aici intervin actiunile Photoshop-ului. Trebuie sa avem deschisa caseta Actions (daca nu e deschisa mergem la Window - Actions sau Alt+F9).

Mai intai deschidem o poza. Avem aici flacara din fata la UMF, Iasi. Poza e facuta la 5 megapixeli, si vrem sa o redimensionam astfel incat sa aiba rezolutia desktop-ului nostru. Avand caseta Actions deschisa, facem click pe sageata din dreapta ei si selectam New Action (sau mai simplu apasam pe butonul New Action din josul casetei).


Va apare o fereastra, in care ne cere sa dam un nume actiunii. Sa-i spunem Redimensionare. Apoi apasam pe Record.


Observam ca in caseta Actions a aparut o actiune noua, si s-a inrosit butonul rosu (Record). Asta inseamna ca incepand din acest moment si pana cand apasam pe butonul stop (patratelul din stanga) Photoshop-ul va "inregistra" tot ce facem noi. Sa-l vedem la treaba.



Mai intai am zis ca redimensionam imaginea. Mergem la Image - Image Size, avem grija sa fie bifat Constrain Proportions si scriem la Width 1280 si la Height este deja autocompletat 958. Bun, acum dam OK si observam in caseta actions ca s-a modificat ceva la actiunea noastra. Acum hai sa salvam o copie a acestei imagini redimensionate.



Mergem la File - Save as si nu uitam sa bifam optiunea As a Copy (eventual putem da alt nume). Acum dam Save, si o fereastra ne va intreba cum vrem sa fie compresia pozei. Lasam 10 si dam Ok. Apoi inchidem poza fereastra cu poza noastra. Copia pozei s-a salvat, si observam ca s-a modificat iar ceva la Actions.

Acum dam Stop (patratelul din stanga butonului rosu din caseta Actions).


Si acum sa testam actiunea proaspat creata. Deschidem alta poza. Aici avem 2 lebede de prin parcul Cismigiu, Bucuresti. Cu fereastra Actions deshisa, dam click pe numele actiunii noastre (Redimensionare) si dam Play (dreptunghiul de langa butonul de inregistrare). Observam ca programul parcurge elementele actiunii, si anume redimensioneaza poza, apoi o salveaza si inchide fereastra, intrebandu-ne daca vrem sa salvam modificarile aduse pozei originale. Selectam Nu.



E bine de stiut faptul ca putem lucra cu mai multe poze deschise in acelasi timp. De exemplu selectam toate pozele dintr-un folder, si le tragem pe toate in photoshop, apoi la fiecare aplicam actiunea de Redimensionare.
Sper ca v-a fost de folos!

Despre Layer-e

Layer-ele au fost introduse prima data in Photoshop versiunea 3.0 si reprezinta o unealta fundamentala, pe care trebuie sa o stapanim foarte bine. Layer inseamna Strat, iar folosirea acestui cuvand la plural ne face sa ne gandim la mai multe straturi suprapuse.
Bun, si la ce ne ajuta pe noi asta? Ei bine, ne ajuta extrem de mult. Sa spunem ca avem o imagine, si vrem sa ii modificam contrastul sau sa stergem un element din ea, dar sa nu ne placa rezultatul si sa vrem sa revenim la poza initiala ca sa o prelucram altfel. Ganditi-va ca peste poza noastra este suprapusa aceeasi poza, pe care o putem modifica, fara a umbla deloc la poza originala, de sub ea, si daca nu ne place cum a iesit poza de deasupra, o stergem si revenim la prima poza, pastrata intacta.

Caseta cu Layers o avem in dreapta-jos (implicit) iar daca nu apare mergem la meniul Window - Layers sau apasam F7. Daca nu avem nici un document deschis in Photoshop, observam ca caseta Layers este goala. Haideti sa deschidem o poza sa vedem ce se intampla.


Observam ca apare un layer nou, numit implicit Background. Pentru a redenumi un layer dam dublu click pe numele lui, iar in fereastra care apare scriem noul nume. Tot timpul cand deschideti o poza este recomandat sa duplicati layer-ul, ca sa nu regretati mai tarziu faptul ca nu puteti reveni la poza originala. Acest lucru se cheama editare nedistructiva, pentru ca orice ati face cu layer-ul sau layer-ele de deasupra, cel de jos va ramane neschimbat.

Layer-ul Background se duplica astfel: ori apasam pe el cu mouse-ul si il tragem in jos, spre iconita create a new layer, ori avand cursorul pe layer facem Click dreapta - Duplicate Layer, ori, avand layer-ul selectat, apasam Ctrl+J.


Si acum sa vedem layer-ele la treaba. Deschideti orice poza aveti la indemana, apoi duplicati layer-ul background. Apoi, avand layer-ul de deasupra selectat, duceti-va la meniul Image - Adjustments - Hue/Saturation si modificati slider-ul saturation, oricum vreti. Eu modificat culoarea florii din galben in rosu. In dreapta layer-ului duplicat se afla un ochi, iar daca dati click pe el modificati vizibilitatea layer-ului de deasupra. Sau, in caseta Layers, in dreapta sus, se afla Opacity, de unde puteti schimba opacitatea layer-ului de sus, astfel incat sa vedeti cum cele 2 imagini se intrepatrund.



Lasati opacitatea 100% si ochiul selectat, si acum selectati din caseta de instrumente radiera (Eraser Tool - sau mai simplu apasati pe E) si incepeti sa stergeti din imagine (avand o pensula destul de mare). Observati cum "prin" imaginea de sus se poate vedea imaginea de jos.


Pentru a sterge un layer, il puteti trage cu mouse-ul peste iconita cu cosul de gunoi din caseta Layers, ori Click dreapta - Delete Layer, ori apasand pe iconita Delete Layer (cosul de gunoi).


Sper ca pana aici ati inteles. Nu e atat de complicat, dar necesita putin timp pana va familiarizati cu aceste Layer-e. Un alt lucru despre care am sa va vorbesc in tutorialele urmatoare este Blending Modes (in caseta Layers dati click pe sageata din dreptul textului Normal). Acestea sunt modurile de "imbinare" (mixare) a layer-elor. Nu stiu exact explicatia tehnica pentru fiecare, dar de cele mai multe ori obtin rezultate foarte bune incercand diverse blending mod-uri.

Shadow/Highlight

De multe ori, cand lasam camera pusa pe Auto, si incercam sa fotografiem un obiect in spatele caruia se afla o sursa puternica de lumina (soarele, in cazul nostru), fotografia va fi foarte intunecata, precum cea de mai jos.


Pentru a corecta acest lucru, Photoshop vine cu o unealta foarte usor de folosit, pe care o gasim la Image - Ajustments - Shadow/Highlight. Chiar cum deschidem fereastra, observam ca deja zonele intunecate din poza devin mai stralucitoare putin. Putem controla acest lucru, modificand slider-ul Amount de la Shadows. Tot din aceasta fereastra putem controla si zonele cu luminozitate ridicata (highlights), iar daca facem click pe show more options apar optiuni noi, avand un control mai bun asupra umbrelor (shadows) si asupra zonelor luminoase (highlights).


Dar, putem face toate acestea si intr-un alt mod, folosind Layer-e, despre care va voi vorbi in tutorialul urmator.

brightness&contrast + hue&saturation

Am vrut sa fac un tutoriale care sa imbine toate aceste 4 elemente, pentru ca nu e asa de mult de zis si in plus nu e mare lucru de modificat.
Okey, sa incepem cu urmatoarea poza, care, dupa cum observati, pare putin cam stearsa, spalacita. Nu sunt saturate bine culorile, si nici contrastul nu e satisfacator, si in plus e putin cam albicioasa poza (trebuie redus brightness-ul).


Sa le luam pe rand. Sa spunem ca vrem mai intai sa marim putin contrastul imaginii. Pentru asta, mergem la Image - Ajustments - Brightness/Contrast si modificam slider-ele astfel: cel de la contrast il dam putin spre dreapta pentru a mari contrastul, iar slider-ul de la brightness il dam putin spre stanga, ca mai jos. Nu uitati sa aveti tot timpul Preview bifat, pentru a vedea in timp real rezultatele.


Apoi, sa coloram putin imaginea. Mergem la Image - Adjustments - Hue/Saturation si modificam slider-ul Saturation putin spre dreapta, pentru a intensifica culorile din poza. Daca vrem ca de exemplu sa facem copacii albastri, modificam slider-ul Hue (care inseamna nuanta de culoare) in stanga, pana cand observam ca frunzele devin albastre.

Indreptarea imaginilor

Tehnica folosita aici se poate aplica si la poza din tutorialul anterior. Sa presupunem ca avem o poza putin inclinata, cum e cea de aici, facuta la Teatrul Odeon din Bucuresti, si vrem sa o indreptam.

Pentru a face acest lucru, trebuie sa gasim unealta care se numeste Measure Tool. Daca ne uitam atent in caseta de instrumente din stanga, nu o gasim. Ea e ascunsa sub EyeDropper Tool (in forma de pipeta). Dam click pe EyeDropper Tool, tinem apasat butonul stang al mouse-ului, si observam ca apare si unealta de care avem noi nevoie, si anume Measure Tool (o rigla). O selectam si acum urmeaza partea interesanta.


Noi de fapt trebuie sa-i spunem Photoshop-ului ce linie ar trebui sa fie dreapta. Sa va explic mai bine. Observam ca linia de sub acoperisul cladirii este inclinata, si ea ar trebui sa fie dreapta, in mod normal. Deci, cu Measure Tool selectat, facem click in partea stanga a cladirii, sub acoperis, si apoi trasam o linie pana in partea dreapta a cladirii, ca in figura de mai jos, urmarind planul cladirii.



Observam sus in bara de optiuni ca apare un unghi. Ei bine, acesta reprezinta cat de mult e inclinata poza fata de axa orizontala. Iar acum mergem la meniul Image - Rotate Canvas - Arbitrary, si observam ca deja e scris acolo unghiul respectiv. Dam click pe ok si gata! imaginea e indreptate.

Ei, defapt e aproape gata pentru ca poza trebuie decupata, ca sa scapam de portiunile negre care apar la colturi. Folosind Crop Tool (vezi tutorialul anterior) selectam cat de mult putem din poza originala si apasam Enter.


Abia acum e gata!