http://www.invatam.net/ Invatam Net - Forum webmasteri - http://www.invatam.net Tue, 13 May 2008 02:45:27 -0500 MyBB http://www.invatam.net/showthread.php?tid=2477 Mon, 12 May 2008 11:43:23 -0500 http://www.invatam.net/showthread.php?tid=2477 http://www.invatam.net/showthread.php?tid=2476 Mon, 12 May 2008 09:11:22 -0500 http://www.invatam.net/showthread.php?tid=2476 New > Layer Set...) . In acest set creati un layer nou. Umpleti acest layer cu negru folosind Paint Bucket Tool (Tasta G).      Creati un nou layer (Shift + Ctrl + N). Folosind apoi Rectangular Marquee Tool (tasta M)      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.     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        Umpleti de sus in jos selectia noastra cu acest gradient. Selectia ar trebui sa arate acum asa.   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. Umpleti aceasta regiune folosind un Gradient Fill. Culoare foreground #E84400, si background #C42900 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. Dupa ce regiunea este umpluta, ar trebui sa obtineti asa ceva.   Acum selectati zona de sub gradientul rosu, cam 3 pixeli inaltime din zona rosie,   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). Setati opacitatea acestui strat la 34% 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,     si umpleti zona selectata      tragand de jos in sus. Ar trebui sa obtineti aceasta imagine. 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. 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   Adaugati ceva text pe buton si sunteti gata.   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 [url=http://www.invatam.net/javascript:void(0)]CSS[/url] intr-un articol viitor. Asta e ceea ce am obtinut eu dupa ce m-am mai jucat putin cu layoutul respectiv. ]]> New > Layer Set...) . In acest set creati un layer nou. Umpleti acest layer cu negru folosind Paint Bucket Tool (Tasta G).      Creati un nou layer (Shift + Ctrl + N). Folosind apoi Rectangular Marquee Tool (tasta M)      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.     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        Umpleti de sus in jos selectia noastra cu acest gradient. Selectia ar trebui sa arate acum asa.   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. Umpleti aceasta regiune folosind un Gradient Fill. Culoare foreground #E84400, si background #C42900 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. Dupa ce regiunea este umpluta, ar trebui sa obtineti asa ceva.   Acum selectati zona de sub gradientul rosu, cam 3 pixeli inaltime din zona rosie,   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). Setati opacitatea acestui strat la 34% 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,     si umpleti zona selectata      tragand de jos in sus. Ar trebui sa obtineti aceasta imagine. 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. 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   Adaugati ceva text pe buton si sunteti gata.   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 [url=http://www.invatam.net/javascript:void(0)]CSS[/url] intr-un articol viitor. Asta e ceea ce am obtinut eu dupa ce m-am mai jucat putin cu layoutul respectiv. ]]> http://www.invatam.net/showthread.php?tid=2475 Mon, 12 May 2008 09:07:09 -0500 http://www.invatam.net/showthread.php?tid=2475 Define pattern defineste pattern-ul si denumeste-l pentru a il tine minte in viitor. Inchide acest fisier Pasul 4 Revenim acum la fisierul initial: Layer > Layer style > Pattern overlay cu urmatoarele setari: Iata ce am obtinut: Pasul 5 Acesta este pasul in care vom adauga logo-ul creat in tutorialul precedent, vom adauga text si slogan: Pasul 6 Vom adauga o imagine in dreapta headerului. Aceasta este imaginea mea dintr-o colectie de stock photos care o am in calculator. Iata imaginea mea: Va voi invata acum cum sa decupati o imagine intr-un mod care nu este destructiv. Adaugati o masca layerului cu poza apasand pe butonul de mai jos Selectati unealta brush in masca creata si cu negru click pe spatiile care nu va intereseaza. Veti observa ca va deveni transparent locul in care utilizati unealta brush. Puteti modifica marimea uneltei cu tastele "[" si "]" mai mica respectiv mai mare. Faceti unealta mai mica in locurile stramte si mai mare unde este mai mult loc de sters. Daca ati gresit intr-un loc inversati culorile si daca colorati cu alb pe masca in modul brush veti observa ca ce ati sters revine la locul sau. Modul in care se foloseste Layer mask  face diferenta dintre un utilizator experimentat si  unul incepator in Adobe Photoshop. Dupa ce ati decupat imaginea redimensionati-o si pozitionati-o in partea dreapta a headerului. Iata ce am obtinut eu: ]]> Define pattern defineste pattern-ul si denumeste-l pentru a il tine minte in viitor. Inchide acest fisier Pasul 4 Revenim acum la fisierul initial: Layer > Layer style > Pattern overlay cu urmatoarele setari: Iata ce am obtinut: Pasul 5 Acesta este pasul in care vom adauga logo-ul creat in tutorialul precedent, vom adauga text si slogan: Pasul 6 Vom adauga o imagine in dreapta headerului. Aceasta este imaginea mea dintr-o colectie de stock photos care o am in calculator. Iata imaginea mea: Va voi invata acum cum sa decupati o imagine intr-un mod care nu este destructiv. Adaugati o masca layerului cu poza apasand pe butonul de mai jos Selectati unealta brush in masca creata si cu negru click pe spatiile care nu va intereseaza. Veti observa ca va deveni transparent locul in care utilizati unealta brush. Puteti modifica marimea uneltei cu tastele "[" si "]" mai mica respectiv mai mare. Faceti unealta mai mica in locurile stramte si mai mare unde este mai mult loc de sters. Daca ati gresit intr-un loc inversati culorile si daca colorati cu alb pe masca in modul brush veti observa ca ce ati sters revine la locul sau. Modul in care se foloseste Layer mask  face diferenta dintre un utilizator experimentat si  unul incepator in Adobe Photoshop. Dupa ce ati decupat imaginea redimensionati-o si pozitionati-o in partea dreapta a headerului. Iata ce am obtinut eu: ]]> http://www.invatam.net/showthread.php?tid=2474 Mon, 12 May 2008 07:56:53 -0500 http://www.invatam.net/showthread.php?tid=2474 http://www.invatam.net/showthread.php?tid=2473 Mon, 12 May 2008 01:29:25 -0500 http://www.invatam.net/showthread.php?tid=2473 http://www.invatam.net/showthread.php?tid=2472 Mon, 12 May 2008 01:07:01 -0500 http://www.invatam.net/showthread.php?tid=2472 http://www.invatam.net/showthread.php?tid=2471 Sun, 11 May 2008 15:52:50 -0500 http://www.invatam.net/showthread.php?tid=2471 http://www.invatam.net/showthread.php?tid=2470 Sun, 11 May 2008 12:52:24 -0500 http://www.invatam.net/showthread.php?tid=2470 http://www.invatam.net/showthread.php?tid=2469 Sun, 11 May 2008 09:48:55 -0500 http://www.invatam.net/showthread.php?tid=2469 http://www.invatam.net/showthread.php?tid=2468 Sun, 11 May 2008 06:24:50 -0500 http://www.invatam.net/showthread.php?tid=2468 http://www.invatam.net/showthread.php?tid=2467 Sun, 11 May 2008 05:30:51 -0500 http://www.invatam.net/showthread.php?tid=2467 http://www.invatam.net/showthread.php?tid=2466 Sun, 11 May 2008 02:48:09 -0500 http://www.invatam.net/showthread.php?tid=2466 http://www.invatam.net/showthread.php?tid=2465 Sun, 11 May 2008 02:15:56 -0500 http://www.invatam.net/showthread.php?tid=2465 http://www.invatam.net/showthread.php?tid=2464 Sun, 11 May 2008 01:52:41 -0500 http://www.invatam.net/showthread.php?tid=2464 http://www.invatam.net/showthread.php?tid=2463 Sun, 11 May 2008 00:56:48 -0500 http://www.invatam.net/showthread.php?tid=2463 http://www.invatam.net/showthread.php?tid=2462 Sun, 11 May 2008 00:51:55 -0500 http://www.invatam.net/showthread.php?tid=2462 http://www.invatam.net/showthread.php?tid=2461 Sat, 10 May 2008 17:47:57 -0500 http://www.invatam.net/showthread.php?tid=2461 http://www.invatam.net/showthread.php?tid=2460 Sat, 10 May 2008 15:09:16 -0500 http://www.invatam.net/showthread.php?tid=2460 http://www.invatam.net/showthread.php?tid=2459 Sat, 10 May 2008 13:07:34 -0500 http://www.invatam.net/showthread.php?tid=2459 http://www.invatam.net/showthread.php?tid=2458 Sat, 10 May 2008 12:25:18 -0500 http://www.invatam.net/showthread.php?tid=2458