Home » Resurse Web Design » Portofoliu Web in Adobe

 
 
 

Portofoliu Web in Adobe

In tutorialul acesta vom afla cum putem sa facem un portofoliu pentru pagina noastra web in Adobe Photoshop.

Ok, sa incepem. Creati un nou document in Photoshop cu dimensiunile 800×750. Faceti dublu-click pe layer-ul de background, apasati ok pe mesajul de pop-up. Acum layer-ul dumneavoastra va fi deblocat si editabil. Pentru inceput vom face un gradient overlay pe background precum vedeti mai jos.

step1

Ok dupa ce ati creat gradientul vom creea in partea de sus a documentului de lucru un dreptunghi cu ajutorul uneltei pentru dreptunghi. Figurina ar trebui sa fie in jur de 33px inaltime si lata cat este documentul de lat. Umpleti dreptunghiul cu orice culoare apoi aplicati aceste setari in Layer -> Layer Style -> Blending Options.

step2

step3

Ar trebui sa va iasa ceva de genul acesta

step4

Selectati tool-ul pentru dreptunghi si desenati un dreptunghi destul de maricel cu o raza de 10px undeva in partea de sus a documentului dumneavoastra.

step5

Acum va trebui sa adaugam aceste stiluri dreptunghiului dumneavoastra. Aceste stiluri se pot aplica mergand la Layer -> Layer Style -> Blending Options

step6

step7

step8

Setati opacitatea layer-ului cam la 45-50%. Daca nu sunteti multumiti de rezultati puteti sa o coborati si mai mult. Ar trebui sa obtineti ceva de genul acesta:

step9

Acum adaugati ce nume doriti si un meniu simplu format din 4-5 link-uri

step10

Ok acum creati un dreptunghi mai mare sub elementele de mai sus

step11

Adaugati aceste stiluri pentru a arata la fel ca in exemplul nostru

step12

step13

step14

step15

Pentru urmatorul pas trebuie sa creem un pattern cu care sa umplem dreptunghiul cel mare. Creeaza un document nou 25×25 px si umplel cu pattern-ul de mai jos.

step16

Odata copiata patterna mergeti la Edit->define pattern. Inchideti documentul si mergeti la documentul initial, creati un nou layer deasupra dreptunghiului mare. Tineti tasta Ctrl apasata si faceti click pe iconita mica a layer-ului dreptunghiului mare din panoul de layere. Aceasta setare va face o selectie. Acum selectati layerul de deasupra (cel nou creat) si cu ajutorul Paint Bucket umpleti layer-ul cu pattern-ul de mai sus. Modificatii opacitatea incat sa va comvina. Ar trebui sa aveti ceva precum vedeti mai jos:

step17

Cu tool-ul de dreptunghiuri mai desentati un dreptunghi in interiorul celui mare

step18

Adauga aceste layere pentru a face dreptunghiul sa arate ca in exemplu.

step19

step20

Acum faceti click pe thumbnail-ul dreptunghiului mic (ultimul creat) apasand tasta Ctrl pentru a face o selectie a acestuia apoi mergeti la select > modify > contract, si setati o valoare de 8px. Copiati imaginea care doriti sa o aratati pe clipboard (deschide imaginea in calculator si apasa Ctrl+c) apoi mergem la edit > paste into. Apasati Ctrl+T pentru a face resize la imagine (as sugera marirea ei, dupa care va veti da seama de setarile facute).

Adaugati un simplu Inner glow thumbnail-ului ca sa arate astfel.

In partea dreapta a imaginii adaugati un titlu si putin text. Puteti sa faceti duplicate dupa cum am facut eu desi nu este necesar deoarece cand se va coda se va putea face duplicate cu ajutorul CSS-ului.

step21

In curand voi posta un tutorial si cum puteti sa codati un astfel de template. 🙂 Enjoy

Video showoff
{Cum sa faci un portofoliu web cu ajutorul Adobe Photoshop}

Eticheta:

Comentariile sunt inchise

Ne pare rau, dar nu poti lasa un comentariu pentru acest post.

Resurse web design