Va voi arata cum sa va creati un index personalizat si simplu de facut.
Creati un New Document de la File -> New si faceti setarile

Faceti Background-u Negru cu brush cu grandient cu ce vreti voi.

Alegeti un render sau un brush si il puneti ca in poza(eu am ales brush):

Dati pe Rounded Rectangle Tool:

Si faceti un patrat cam asa:

Dati Click Dreapta si selectati Make Selection:

Dupa care dati pe Grandient Tool:

Alegeti un Grandient (Eu am ales acesta):

Trasati o linie dreapta in interiorul patratului:

Si va iese cam asa:

Apasati Ctrl + T si sus dati pe primu semn din stanga imagini:

Modificati acel patrat ca si in imagine(Nu e obligatoriu asa):

Dupa ce ati terminat va duceti la layeru cu patratu si setati Opactitatea 40%
Si faceti o dublura la layer:

Mutati dublura in partea dreapta:

Dupa care incepeti sa scrieti ca si in poza:

Dupa ce ati terminat dati pe Slice Tool:

Si trasati un patrat ca si in poza dupa care dati drumu:

Faceti la fel si la patratu celalant si la imaginea mare:

Dupa care dati la File -> Save for web selectati formatu .png si faceti ca in poza:

Pentru a putea folosi acel index pe care l-ati creat in PhotoShop, trebuie sa configurati indexu in asa fel incat sa se poata folosi ca o pagina web.
Mai intai deschideti index.html cu WordPad si schimbati la Title (adica cand se incarca indexu sa apara sus la bara numele acestuia) numele:

Dupa asta adaugati acest cod ca in imaginea de mai de jos( Acesta schimba fontu si culoarea background-ului ):
<style type="text/css">
<!--
body {
background-color: 000000;
}
.style2 {
font-size: 12px;
color: 0090ff;
font-weight: bold;
}
.style4 {
color: 42444d;
font-size: 12px;
}
-->
</style>

Dupa </head> dati un enter si scrieti <center>.
Si jos tot asa faceti dar numa ca acuma scrieti asa </center> (acesta comanda pune toate pozele si textu in mijloc):

Apoi cautati numele la imagini care au scris pe ele Site si Forum si faceti ca si in imagini folosindu-va de codurile de mai jos:
<a href="http://www.site.ro/forum">
<a href="http://www.site.ro/site">

Atentie!! trebuie sa fie http:// in fata Obligatoriu altfel nu va merge!
Si in caz ca vreti sa adaugati un text mai jos de toate adaugati asa( nu neaparat ):
<font color="FFFFFF"><center> Index Create de Soimul! Vizitati TutorialsX.wordpress.com!! ;)</center></color>

Rezultatul:

Eu am facut dimensiunile mai mari, dar puteti sa vi le faceti mai mici.
Info: Tutorialul a fost actualizat!!
45.348560
23.201781
Comentarii recente