DM Design » efect

Cum sa creati un text cu efect impresionant in photoshop

ionut.mantescu — Sun, 29 Nov 2009 20:43:27 +0000

In acest tutorial va voi arata cu sa creati un text mare care atrage privirea. Vom folosi gradient overlay, pattern overlay si vom combina diferite tehnici pentru a crea un background cu efect de carbon.

Imaginea finala:

Creati un nou document (Ctrl+N) in Adobe Photoshop cu dimensiunea 1920x1200px (mod RGB) la rezolutia de 72dpi. Selectati Paint Bucket Tool (G) pentru a umple background-ul cu urmatoarea culoare: #353430

Pentru a crea efectul de carbon trebuie sa descarcati si sa instalati acest pattern. Copiati pattern-ul in directorul de instalare al Photoshop-ului (ex. C:/Program Files/Adobe/Photoshop/Presets/Patterns).
Creati un nou layer si umpletil cu nuanta de culoare #959595 folosind Paint Bucket Tool (G)

Setati Opacity la 41% pentru acest layer si faceti click pe Add layer style. Selectati Pattern Overlay. Duceti-va la Pattern Picker. Pattern-ul aditional Spiderman Pattern poate fi selectat incarcandu-l din submeniul Picker.

Vom obtine urmatorul background:

Faceti click pe acelasi layer si apoi Add a Mask. Selectati brush-ul Soft Round din Brush Tool (B) si Opacity la 15% in Options bar)

Utilizati brush-ul Soft Round pentru a sterge putin din colturile imaginii.

Faceti o copie a ulimului layer. Setati Fill la 0%. Click pe Add a layer style si selectati Gradient Overlay.

Faceti click in pe Color Bar pentru a deschide Gradient Editor si setati culorile ca in imaginea de mai jos.. Click pe OK pentru a inchide Gradient Editor.

Vom obtine urmatorul efect pentru background:

Click pe Horizontal Type Tool (T). Selectati un font, marimea si culoarea in Character Panel.

Click pe imagine si scrieti “HAPPY NEW YEAR 2010”. Apasati Enter pentru a aplica textul.

Click pe Add a layer style si selectati Drop Shadow

De asemenea setati si Gradient Overlay

In Gradient Editor selectati urmatoarele culori:

Veti obtine urmatoarea imagine:

Utilizand Free Transform (Ctrl+T) putem inclina textul putin pentru a-i da un efect mai placut.

Rezultatul final il puteti vedea facand click aici.

Creati efect de gradient la text folosind CSS

ionut.mantescu — Wed, 11 Feb 2009 11:10:25 +0000

Vreti sa creati titluri cu efect de gradient fara sa stati sa desenati de fiecare data in Photoshop? In urmatoarele randuri va voi arata cum sa creati aceasta foarte simplu utilizand doar CSS si o imagine PNG.

Ceea ce aveti nevoie este un element in heading si sa aplicati pozitia imaginii de fundal folosind proprietatea CSS position:absolute. Acest efect a fost testat pe mai multe browser-e: Firefox, Safari, Chrome, Opera, IE7, chiar si pe IE6.

Plus-uri

- Acest efect se face utilizand numai CSS, fara Javascript sau Flash. Functioneaza pe majoritatea browser-elor incluzand IE6 (necesar hack-ul PNG)
- Este perfect pentru Titluri. Nu mai trebuie sa renderizati fiecare titlu in parte cu Photoshop-ul sau alt program de grafica. Folosind metoda economisiti timp, spatiu pe server si chiar latimea de banda a internetului .
- Poate fi folosit cu orica font, iar dimensiunea fontului ramane modificabila.

Cum functioneaza?

Este foarte simplu. Practic vom aplica o imagine PNG de doar 1px latime cu (transparent) peste text.

Codul HMTL

CSS Gradient Text

Codul CSS

Elementul caruia ii vom aplica efectul este h1 si h1 span

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Folosirea in IE6

Din moment ce IE6 nu afiseaza PNG-24 corect, urmatorul cod este necesar pentru afisarea corecta a PNG transparente (adaugati oriunde intre si )

Versiunea JQuery (pentru adeptii javascript)

Daca nu vreti sa aveti elementele in heading, puteti folosi versiune Javascript.

Mai multe exemple:

Practic puteti aplica pe orice culoare de fundal atata timp cat culoarea de gradient este ca si fundaul.

Limitari

- Se poate folosi doar peste culori de fundal uniforme. Culoarea gradientului trebuie sa fie aceeasi cu cea de fundal.
- Hack-ul PNG este necesar pentru a functiona pe IE6.
- Daca imaginea PNG este mai inalta decat textul, nu veti mai putea selecta textul.

Crearea textului de tip Grunge in Photoshop

ionut.mantescu — Fri, 23 Jan 2009 10:21:16 +0000

Ok, azi va voi arata cum puteti crea efectul de grunge la un text. Acest proces este simplu si poate fi modificat asa cum doreste fiecare.

Pasul 1 – Crearea Canvas-ului

Pentru inceput… deschidem Photoshopul . Vom crea un nou spatiu de lucru (File > New). Pentru acest spatiu voi folosi dimensiunile 640px latime si 300px inaltime.

Vom adauga o culoare de fundal utilizand Paint Bucket Tool (in imaginea de mai jos). Voi folosi un rosu inchis pentru imaginea mea.

Pasul 2 – Crearea textului

Vom selecta acum Hrizontal Type Tool si adaugam textul “grunge” utilizand fontul dorit de fiecare. Eu voi folosi fontul “Coolvetica” la dimensiunea 172px si culoarea alba.

Pasul 3 – Rasterizarea textului

Acum avem textul.. urmatorul pas este sa folosim textul ca raster in loc de vectori. Vom face asta ducandu-ne la Layers Panel, click dreapta pe layer-ul textului si click pe “Rasterize Type” in meniu.

Pasul 4 – Stergerea marginilor

Acum ca avem si rasterul facut, putem incepe sa editam. Trebuie sa selectam “Eraser Tool” din meniu sau apasati tasta “E” pe tastatura. Vom folosi “Oil Pastel Large” la tipul Brush-ului.

Acum putem sa incepem sa stergem marginile textului nostru.

Putem chiar schimba tipul brush-ului folosit sau puteti sa va creati singuri unul nou.

Pasul 5 – Adaugarea efectelor

Putem incepe sa adaugam efectul de grunge. Vom selecta “Brush Tool” din meniu (sau apasati “B”) si selectati un tip de brush din lista. Puteti folosi oricare brush-uri predefinite din Photoshop.

Putem roti textul sau sa adaugam si mai multe efecte. Rotirea textului se face din “Edit > Transform > Rotate”. Apasati Enter pentru a aplica efectul de rotire.

Pasul 6 – Finalizarea textului

In acest moment avem deja textul cu efectul grunge. Pentru a arata si mai bine puteti folosi din nou diferite brush-uri si filtre. Nu va fie frica sa experimentati.