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.
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.
Ar trebui sa va iasa ceva de genul acesta
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.
Acum va trebui sa adaugam aceste stiluri dreptunghiului dumneavoastra. Aceste stiluri se pot aplica mergand la Layer -> Layer Style -> Blending Options
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:
Acum adaugati ce nume doriti si un meniu simplu format din 4-5 link-uri
Ok acum creati un dreptunghi mai mare sub elementele de mai sus
Adaugati aceste stiluri pentru a arata la fel ca in exemplul nostru
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.
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:
Cu tool-ul de dreptunghiuri mai desentati un dreptunghi in interiorul celui mare
Adauga aceste layere pentru a face dreptunghiul sa arate ca in exemplu.
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.
In curand voi posta un tutorial si cum puteti sa codati un astfel de template. 🙂 Enjoy
{Cum sa faci un portofoliu web cu ajutorul Adobe Photoshop}
Comentariile sunt inchise
Ne pare rau, dar nu poti lasa un comentariu pentru acest post.