Pagina web simpla in Photoshop

    Admin
    Admin
    Administrator
    Administrator

    Number of posts : 91
    Location : Europa
    Warnings: :
    Pagina web simpla in Photoshop Left_bar_bleue0 / 1000 / 100Pagina web simpla in Photoshop Right_bar_bleue

    Points : 13
    Registration date : 2008-01-01

    Pagina web simpla in Photoshop Empty Pagina web simpla in Photoshop

    Post by Admin on Wed Mar 05, 2008 11:13 pm

    Pentru inceput vom crea un nou fisier, de marime 760*600 pixeli. De
    ce 760? Ca sa fim siguri ca pe ce lucram se va vedea la fel de bine si
    pe o rezolutie 800*600. Inaltimea puteti sa o dati cat vreti, eu de
    obicei ii dau 600 ca sa pot vedea toata suprafata de lucru pe un
    monitor la rezolutia de 1024*768. O sa incepem prima data cu backgroundul. Creati un Layer set nou (Layer > New > Layer Set...) . In acest set creati un layer nou. Umpleti acest layer cu negru folosind Paint Bucket Tool (Tasta G).
    Pagina web simpla in Photoshop Art2_1
    Creati un nou layer (Shift + Ctrl + N). Folosind apoi Rectangular Marquee Tool (tasta M)
    Pagina web simpla in Photoshop Art2_2
    selectati
    o regiune centrala de latime 80-90% din zona de lucru, lasand cam 200
    pixeli spatiu liber deasupra, si umpleti-o cu alb. Ar trebui sa

    obtineti deocamdata aceasta imagine.
    Pagina web simpla in Photoshop Art2_3
    Creati un nou layer tot in acest set. Folosind aceeasi Rectangular Marquee Tool,Gradient Tool selectati o regiune de aceeasi latime ca si portiunea alba insa de aceeasi latime. Faceti noua selectie deasupra zonei albe. Apoi selectati Gradient Tool si introduceti ca si culoare pentru Foreground #797979 si pt Background #5B595A Pagina web simpla in Photoshop Art2_4
    Umpleti de sus in jos selectia noastra cu acest gradient. Pagina web simpla in Photoshop Art2_5

    Selectia ar trebui sa arate acum asa.
    Pagina web simpla in Photoshop Art2_6
    Apasati Ctrl+D ca sa anulati selectia si creati un layer nou, in acelasi set. Selectati deasupra zonei gri (tot cu Rectangular Marquee Tool) o zona de vreo 30, 40 pixeli inaltime. Apelati din meniu Select > Modify > Smooth si introduceti 2 la valoare. Asta va rotunji cu 2 colturile dreptunghiului nostru.
    Pagina web simpla in Photoshop Art2_7
    Umpleti aceasta regiune folosind un Gradient Fill. Culoare foreground #E84400, si background #C42900 Pagina web simpla in Photoshop Art2_8
    Umpleti regiunea de sus in jos. Adica faceti click prima data in partea
    de sus a selectiei apoi trageti in jos, pana cand se termina selectia,
    sau mai mult, ca sa prelungiti efectul.
    Pagina web simpla in Photoshop Art2_9
    Dupa ce regiunea este umpluta, ar trebui sa obtineti asa ceva. Pagina web simpla in Photoshop Art2_111

    Acum selectati zona de sub gradientul rosu, cam 3 pixeli inaltime din zona rosie, Pagina web simpla in Photoshop Art2_112
    si apasati taste Delete. Astfel vom sterge zona de jos, deoarece dorim colturi rotunjite doar in partea de sus. Faceti acum Ctrl+Click
    pe Layer4, layerul ce contine gradientul gri. Creati un layer nou
    deasupra acestuia si umpleti zona cu patternul pe care l-am folosit
    cand am creat iconul rola de film (meniu Edit > Fill si apoi Use Pattern). Pagina web simpla in Photoshop Art2_12

    Setati opacitatea acestui strat la 34%
    Pagina web simpla in Photoshop Art2_13
    Pe acelasi layer, apelati din meniu Layer > Add Layer Mask > Reveal all . Apasati apoi tasta D, si apoi X pentru a reseta culorile de Foreground si Background la cele default. Selectati apoi Gradient Tool, Pagina web simpla in Photoshop Art2_14
    si umpleti zona selectata
    Pagina web simpla in Photoshop Art2_15
    tragand de jos in sus. Ar trebui sa obtineti aceasta imagine.
    Pagina web simpla in Photoshop Art2_16
    Selectati
    apoi fontul Georgia, de marime 24, culoare alba, si scrieti textul
    pentru headerul paginii. Deschideti acum iconul creat in articolul
    precedent si adaugati-l la text. Pagina web simpla in Photoshop Art2_17
    Partea de continut o sa va las pe voi sa o faceti. tot ce trebuie e sa
    folositi acelasti font Georgia si in partea de continut (ca sa fie
    totul pe aceeasi tema). Acum o sa cream un buton pentru RSS feeds. Pentru aceasta o sa cream un nou set de layere. Layer > New > Layer set... Apoi in acest set cream un nou layer, de marimea unui buton, cam 80*20 pixeli. Pentru aceasta folosim Rectangular Marquee Tool. Apoi apelam Select > Modify > Smooth
    cu valoarea 2 pentru a rotunji colturile, cum am facut mai sus, si
    umplem zona cu acelasi gradient de rosu: foreground #E84400, background
    #C42900 Pagina web simpla in Photoshop Art2_18
    Adaugati ceva text pe buton si sunteti gata.
    Pagina web simpla in Photoshop Art2_19
    Tot
    ce va mai ramane e sa adaugati sectiunea de footer (un fill pe gri de
    exemplu) si sectiunea de continut, care se obtine foarte usor. Doar
    adaugati cateva layere de text, si va mai jucati putin cu Rectangular
    Marquee Tool ca sa obtineti casute de continut ce se pot obtine foarte
    usor apoi prin definirea de stiluri. Transpunerea de la layout in template HTML si stiluri CSS
    intr-un articol viitor. Asta e ceea ce am obtinut eu dupa ce m-am mai
    jucat putin cu layoutul respectiv.

    Pagina web simpla in Photoshop Art2_20


    Last edited by Gy@ny on Wed Mar 05, 2008 11:16 pm; edited 2 times in total


    _________________
    Pagina web simpla in Photoshop TgC_barra03
    Pagina web simpla in Photoshop Rrrsy7bi5
    Nu trimiteti PM pentru a primi ajutor. Exista forum.

      Current date/time is Mon Apr 22, 2019 1:04 am