NOTA: Acest tutorial reprezinta continut EXCLUSIV pentru Invatam Net si Wtricks.com. Nu se permite republicarea acestui tutorial. Puteti cita primele 2 paragrafe (cele cu albastru) si sa trimiteti link catre tutorialul de aici.


In acest tutorial vom invata sa cream o imagine pentru o pagina in constructie. O imagine pe care o puteti taia si plasa in cod sau folosi asa cum este

Incepem prin a crea o imagine in Photoshop: 500x400 pixeli, aceasta este dimensiunea.

Am ales #2e2e2e ca si culoare de fond. Luam acum imaginea pe care o vom folosi (este in pachetul pe care il puteti descarca, impreuna cu fisierul .psd, sursa desgin-ului).

Plasam imaginea pe layout-ul principal (pentru ca este .gif trebuie sa o compatibilizam: mergeti la IMAGE > MODE > si setati la RGB.

Prima parte este gata .. imaginea arata asa:



Acum trebuie sa reducem marimea imaginii si sa facem ceva cu linia aceea alba din marginea ei.

Cu layer-ul imaginii selectat, alegeti: EDIT > FREE TRANSFORM si schimbati 100% cu 70%

Daca nu stiti unde este aceasta optiune, iata o imagine care va poate ajuta:



Este sub bara principala, si schimbati W: 100.0% la 70.0% dupa ce ati apasat MAINTAIN ASPECT RATIO (acesta modifica si pe vericala valoarea).

Mergeti la meniul: FILTER > SHARPEN (sa pierdem ceva din ceata.). Acum LAYER > STYLE si selectati urmatoarele optiuni:

Inner shadow: distance 0, choke 100%, size 2 (celelalte optiuni sunt lasate implicit)
Outer glow: color #868686, size 24 px
Stroke: color #FFFFFF, size 1

Dupa toata aceasta munca de detaliu opera noastra arata asa:


Creati un layer nou (LAYER > NEW > LAYER)

Click pe MAGIG WAND TOOL si selectati partea galbena din imagine. Apasand SHIFT puteti selecta si capul si corpul omului din imagine.

Right click pe PAINT BUCKET TOOL (si alegeti GRADIENT TOOL). Gradient-ul este alb si alb (#FFFFFF), dar partea dreapta are opacitatea 0.

Incepeti din partea de sus a imaginii si duceti linia verticala pana in mijloc. Apoi deselectati. Acum ar trebui sa arate asa:



Selectati layer-ul de background. Cu tasta SHIFT apasata, folositi ELLIPTICAL MARGUEE TOOL pentru a crea un cerc ce inconjoara imaginea:



INFORMATII ADITIONALE: trebuie sa cream un pattern, creati un nou document cu marimea 3x3 pixeli si background TRANSPARENT (nu inchideti fisierul de design, nu il afecteaza).

Click CTRL si + impreuna pana nu mai puteti da zoom. Acum click dreapta pe BRUSH TOOL si selectati PENCIL TOOL. Click pe imagine pentru a avea 3 pixeli colorati. Ar trebui sa arate asa:



Observati va rog ca imaginea pe care o vedeti este de 3x3 pixeli, dar marita la zoom 1600%.

Mergeti pe EDIT > DEFINE PATTERN si dati-i un nume. Eu i-am spus construction. Felicitari ... tocmai ati creat primul pattern. Il puteti folosi de acum in design. Momentan avem nevoie pentru imaginea noastra.


Puteti inchide acum fisierul pattern (este salvat). Cu selectia de cerc inca activa (nu ati avut motive de a o deselecta ), intrati pe LAYER > NEW FILL LAYER > PATTERN, lasati setarile implicite (click OK) si selectati acest pattern.

Intrati pe LAYER > RASTERIZE > FILL CONTENT

Cu layer-ul de pattern selectat, hai sa ii dam cateva setari de stil. Intrati pe LAYER > LAYER STYLE si alegeti:

Color overlay: #414141
Stroke: size 1, color #1a1a1a



Pasul urmator: textul.

Selectati HORIZONTAL TYPE TOOL (T-ul mare din meniul de "unelte") si scrieti textul: under construction in cazul meu cu urmatoarele setari de text: ARIAL BLACK, regular, size:30 px, anti aliasing SHARP.

Plasati urmatoarele setari pe layer:

Drop shadow: opacity 100%, distance 0, spread 20, size 10
Inner shadow: blend mode normal, color #00fcff, distance 0, choke 100%, size 1
Gradient overlay: the colours are #00fcff and in the right #00a5dc
Stroke: size 2, fill type gradient si culorile in gradient:#626262 in partea stanga si #000000 in dreapta (partea dreapta este trasa spre mijloc si color midpoint aproape de ea, ca in imaginea urmatoare)



Daca totul a mers OK, acesta este rezultatul:


Aceasta este sursa design-ului .. descarcati de pe Wtricks.com

---
Acest articol a fost publicat pe Wtricks.com: How to create an under construction image

This post was last modified: 01-11-2007 08:17 PM by dojo.

era mai frumos daca scrisu avea niste bare pe el si era un galben-portocaliu... in rest good job