Prima pagină > Tutoriale PhotoShop > Creare index + codarea acestuia!

Creare index + codarea acestuia!


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:

  • Editare Index.Html:

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 Creat 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!!

  1. G3ner1c
    August 3, 2010 la 15:26

    ma, da eu apas ctrl+t da nu imi apare nimik, am versiunea cs3, te rog contacteazama la g3ner1c_cs

  2. August 3, 2010 la 23:08

    Nu conteaza versiunea, comenzile is aceleasi.

  3. Mai 16, 2011 la 16:03

    eu folosesc cs5 si daca salvez cum ai aratat tu acolo numi apar toate codurile alea😐

  4. Mai 16, 2011 la 16:08

    Inseamna ca nu ai facut ceva bine.

  5. Mai 16, 2011 la 19:49

    am rezolvat mersi

  6. sda
    August 29, 2011 la 09:17

    Super tare tutorialul GJ

  7. August 31, 2011 la 20:57

    nu stiu de ce la pasul cu patratul la Grandient Tool aleg acolo bine si cand sa trag linia in patrat este cercul ala taiat si nu pot face … am facut de 5 ori de la inceput foarte bine si tot nu merge:( ! Va rog ajutati-ma😀🙂

  8. Septembrie 1, 2011 la 14:43

    Pai nu neaparat trebuie sa faci ca in tutorial, poti face cum vrei de exemplu poti pune tu o imagine ceva.

  9. Anonim
    Noiembrie 19, 2011 la 20:09

    Multumesc am facut cateva si bune.. a fost de folos tutorialul..nu l-am urmat in tocmai..am codificat ca la carte(dupa tutorial)

  10. iReal
    Februarie 4, 2012 la 23:13

    de cacat tutorialu ..😐

    • Mai 20, 2012 la 09:08

      mars in fmm de ratat , daca stii sa faci tu mai bine fati ! pe mn chiar ma ajutat🙂

  11. Ionut
    Iunie 23, 2013 la 15:21

    Numi apar acele setari!

  1. No trackbacks yet.

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s

%d blogeri au apreciat asta: