Share
Buna tuturor! Acesta este primul meu tutorial pe acest nou site minunat al familiei tuts +. De data aceasta am primit pentru dvs. un tutorial foarte detaliat despre crearea unei singure pagini web ilustrative ilustrative de la zero cu Photoshop. Veți învăța cum să construiți un aspect pentru o webdesign cu o singură pagină, să creați fundaluri ilustrative cu un anumit stil, să creați o bară de navigare plutitoare, să lucrați cu text având în minte CSS3 și multe altele ... gata de a începe?
În ultimul timp, au existat câteva mari site-uri "scrolling vertical" care apar în jurul valorii de plasă. Înainte de scufundări, hai să verificăm câteva dintre ele pentru a vedea cum va arăta efectul final. Acestea vă vor ajuta să puneți restul tutorialului în context:
Acest tutorial necesită câteva cunoștințe de bază despre Photoshop Tools, voi trece peste câteva explicații de bază cum ar fi cum să creați o mască de straturi, cum să adăugați un ghid sau cum să adăugați un strat de text.
Design-ul meu se bazează pe mai multe exemple din jurul web-ului, cu un stil foarte trendy, un peisaj verticale vectorial panoramic ca fundal și zone cu text curat care prezintă informații importante. Imaginați-vă acest site ca pe un singur site ca un site de portofoliu al unui designer creativ sau al unui ilustrator.
Nu vom intra in portiunea de codare a acestui proiect pentru ca ne vom concentra pe diferitele tehnici de ilustrare si layout, dar se bazeaza pe pluginul popular jQuery.ScrollTo, pe care il puteti verifica pentru sfaturile de codare a acestui tip de proiecta.
Să începem, activele pentru acest tutorial sunt:
În primul rând, trebuie să stabilim documentul de lucru, bazez acest aspect pe cele 12 coloane 960 Grid System pe care le poți descărca gratuit, în caz contrar, trebuie doar să creezi un document cu 960 pixeli și să faci să desenezi niște ghiduri la stânga și la dreapta.
Ca o practică obișnuită în cazul lucrărilor de webdesign, trebuie să creștem această zonă pentru a vedea cum arată la rezoluții mai mari, dar trebuie să stabilim și o dimensiune standard pentru înălțime, această înălțime ar trebui să fie zona minimă vizibilă (deasupra ori) din moment ce proiectăm un singur aspect al paginii. Accesați Imagine> Dimensiune canvas și setați lățimea la 1420px și Înălțimea la 750px.
Apoi, utilizați un grafic temporal pentru a împărți documentul în secțiuni, utilizând Instrumentul Rectangle desenează un dreptunghi de sus în jos (înălțime 750px). Apoi, măriți foarte mult Canvas Size (puteți folosi instrumentul de tăiere aici).
Desenați un ghid în partea de jos a dreptunghiului și duplicați-l, apoi potriviți partea superioară a copiei cu partea inferioară a primului dreptunghi și adăugați un ghid în partea de jos a celui de-al doilea dreptunghi, repetați acest proces de câte ori aveți secțiuni pe aspect , în acest caz avem nevoie de 4: Acasă, Despre noi, Portofoliu și Contactați-ne. Apoi, utilizând instrumentul Crop (Șlefuire), ștergeți panza suplimentară. Ar trebui să aveți o pânză de înălțime de aproximativ 3000px cu 4 secțiuni, fiecare de 750px. Ștergeți dreptunghiurile de ghidare și mergeți înainte.
Cu ajutorul instrumentului Rectangle trageți un dreptunghi din partea de sus în partea de jos a secțiunii a treia. apoi adăugați un stil de strat de strat de acoperire cu gradient folosind următoarele culori: #FFFFFF # 6E98C8 # 2A3256 și # 0C0E1A, setați unghiul la 90 ° (este foarte important deoarece acest fundal gradient va fi tăiat pentru a fi repetat pe axa x).
Desenați un dreptunghi în a patra secțiune a documentului, apoi adăugați un strat Layer> Gradient Overlay utilizând aceste culori: # 486302 # 64A500 și # BEDC40. Ca și pasul anterior, setați unghiul la 90 °.
Acum vom începe proiectarea elementelor grafice suplimentare ale fundalului. Primul element pe care trebuie să-l desenăm este o rachetă spațială, care se află pe secțiunea 1 a proiectului. Pentru aceasta, creați un document nou (lățime 400px și înălțime 600px) și salvați-l cu un nume descriptiv precum "rachetă", adăugați un fundal albastru închis # 181C35.
Apoi, îndemânând Pen Tool, trageți o formă albă plină, asemănătoare imaginii de mai jos, duplicați-o și mergeți la Edit> Transform> Flip orizontal și plasați copia exact lângă original, selectați ambele straturi și îmbinați-le apăsând Command / Control + E. Acesta va fi corpul rachetei.
Acum adăugați un strat Layer> Gradient Overlay pe stratul "Body Rocket" utilizând următoarele culori: # 0B85DB, # 014C83, # 2396EF, # 004B82 și # 1477B8, setați unghiul la 0 ° și apăsați OK. În cele din urmă, rasterizați gradientul îmbinând stratul "corpul rachetei" cu un nou strat gol.
Creați trei elipse galbene utilizând instrumentul Ellipse și plasați-le ca imaginea de mai jos. Rasterizeaza-le (Faceti clic dreapta pe layerul miniatural si selectati Rasterize). Apoi, țineți apăsată tasta Command / Ctrl și faceți clic pe o miniatură Ellipse din panoul Straturi pentru a selecta automat forma stratului și cu ajutorul Cursorilor mutați selecția câțiva pixeli de mai sus, apoi apăsați tasta Ștergere, acest proces va crea o bandă curbă drăguță. repetați acțiunile cu celelalte elipse.
Duplicați fiecare banda și plasați-o cu câțiva pixeli deasupra originalului. Apoi selectați toate dungile și îmbinați-le pe un strat numit "Stripes". Apoi comanda / Ctrl pe "Body Rocket" pentru a selecta forma Rocket, apoi du-te la Select> Modificare> Extindere si setati 2 pixeli, apoi Inversati selectia apasand comanda / Ctrl + Shift + stratul "Stripes" și ștergeți selecția.
Selectați stratul Stripes și adăugați un strat Layer> Overlay Gradient utilizând următoarele culori: # EFAC00, # BD8401, # C39700, # FFCF2C, # C39700, # BD8401 și # EFAC00 Unghi 0 °. Și o subtilă umbra neagră (Dimensiune: 2px).
Selectați stratul "Rocket Body", apoi utilizați instrumentul Elliptical Marquee Selectați vârful rachetei așa cum arată imaginea de mai jos, copiați selecția și lipiți-o deasupra stratului de rachetă și sub dungi, denumiți noul strat "Sfat". Copiați stilul straturilor Stripes și lipiți stilul la "Sfat".
Folosind instrumentul Ellipse, trageți o elipse în partea stângă a numelui rachetei "Window", apoi adăugați un strat Layer> Gradient Overlay utilizând următoarele culori: # 777777, # E8E8E8, #ADADAD, #FEFEFE, # C8C8C8 și Angle: 0 °.
Duplicați apoi stratul "Fereastră" și faceți-l puțin mai mic, plasați copia peste original. Deoarece elipsa este o mască vectorică, schimbați culoarea fundalului său la: # 00CCFF și dați dublu clic pe stilul stratului de acoperire cu gradient, în fereastra de dialog schimbați modul de amestecare pe ecran. În cele din urmă, adăugați un Shadow Inner subtil în stratul "Fereastra de copiere" și dacă vreți să faceți o Drop Shadow în stratul "Window".
Să adăugăm baza rachetei, să punem mai întâi toate straturile legate de Rocket (corp, vârf, dungi și fereastră) și să le îmbinăm. Utilizând instrumentul Pen, desenați trei forme, urmând exemplul imaginii de mai jos, unul dintre ele deasupra noului strat "Corp" și unul de mai jos. Utilizați această culoare de umplere pentru forme: # FBCC28.
Adăugați trei noi forme care prezintă volumul la baza rachetei. Urmați imaginea de mai jos și utilizați această culoare de umplere: # AB8204.
Aplicați stilul stratului de acoperire cu gradient pe piedestal, utilizați următoarele culori: # FACB2, # FFF393, # FFD952 și # D4A500, setați unghiul la 90 °, încercați să obțineți așa ceva ca imaginea de mai jos.
Mergeți toate straturile (am lăsat întotdeauna o copie a straturilor vectoriale într-o copie doar în caz). Creați o elipsă peste racheta plină cu această culoare: # DFF8FF, apoi mergeți la Filter> Blur> Gaussian Blur și setați Radius la 23 sau 24 de pixeli, denumiți stratul "Light". Comandă / Ctrl - Faceți clic pe stratul corpului rachetei pentru a selecta forma sa, Command / Ctrl + Shift + I pentru a inversa selecția și a șterge selecția din stratul "Light". În cele din urmă, schimbați Modul de amestecare la Lumină moale.
Mergeți toate straturile Rocket și copiați-le. Lipiți racheta în partea dreaptă a secțiunii 1 a documentului nostru principal.
puteți face acest pas fie pe documentul de rachetă, fie pe cel principal. Creați două elipse utilizând instrumentul Ellipse unul mai mic decât celălalt, după cum arată imaginea de mai jos, utilizați următoarele culori: # FF8A02, # FFC801. Mergeți ambele straturi într-un nou strat numit "Foc". Apoi plasați-o chiar în spatele stratului "Rocket". Apoi aplicați un blitz Gaussian de 9 pixeli și folosind Free Transform Controls distorsionați puțin focul făcându-l mai îngust.
Deschideți periile de stele din presetări, apoi deschideți panoul de setări pentru pensule (F5).
Sub vârful de perie selectați steaua de 50 px și modificați dimensiunea acesteia la 25 de pixeli. Bifați caseta de selectare Spacing și setați valoarea la 300%.
Under Scattering setați Scatter la 1000% Control: Presiune Pen (în cazul în care aveți o tabletă grafică) Count: 1 și Count Jitter: 100%.
Cu privire la culorile dinamice, setați Foreground / Background Jitter la 100%.
În cele din urmă, setați culoarea din prim plan la: # E1F5FF și culoarea de fundal la #FFFFFF și vopsiți pe un nou strat chiar deasupra stratului "Sky". Puteți reduce opacitatea stratului "Stars" pentru a le face puțin mai puțin intense.
A doua ilustrare suplimentară a designului nostru îmi va face un balon cu aer cald. Creați un nou document denumit "Balon" 400px x 600px și completați-l cu un strat de fundal albastru # 476492. Apoi, folosind Pen Tool, creați mai multe forme ca petalele margaretei pentru a construi forma balonului.
Utilizând instrumentul Peen, trageți o formă asemănătoare cu prima captură de ecran a imaginii de mai jos, apoi folosiți instrumentul Rectangle Draw două bare diagonale de lângă ea și o bară transversală. Cu instrumentul Pen trage un coș foarte simplu și cu instrumentul Ellipse dă-i puțină adâncime.
Acum, schimbați culoarea de fundal a straturilor de balon în # FFE305 # D00000 și # 0162A7. Apoi selectați secțiunea intermediară și aplicați un strat Layer> Gradient Overlay folosind un gradient Reflexie Negru - Alb. Schimbați Modul de amestecare cu Gradient pentru a suprapune și a vă juca cu unghiul pentru al face să pară puțin ciocănit. Apoi, aplicați un stil Inner Shadow, folosind valorile afișate în imaginea de mai jos, important este opacitatea, ar trebui să fie de aproximativ 50%. Copiați stilul stratului și aplicați-l la toate celelalte forme, în cazul în care umbra nu arată bine după aplicarea acestuia, faceți dublu clic pe efectul Overlay Gradient și faceți clic și trageți peste umbră pentru al muta.
Schimbați culoarea straturilor legate de coș la maro: # 874E21 și lipiți stilul stratului anterior al etapei. Pentru elipse interne utilizați o culoare mai închisă: # 291700. Si asta e! îmbinați toate straturile și utilizați instrumente Dodge / Burn pentru a adăuga unele umbre și lumini.
Copiați balonul și lipiți două copii pe a doua secțiune a documentului nostru, unul mai mare decât celălalt. Selectați balonul mai mic și utilizând instrumentul Lasso faceți o selecție a balonului real. Apoi apăsați Command + U pentru a ajusta valorile Saturație Hue și modificați-le după cum doriți. În plus, puteți adăuga o anumită adâncime a câmpului, micșorând puțin balonul secund.
Mergând înainte cu design-ul fundalului, este timpul să adăugăm niște nori pe cer. Creați un nou document numit "Clouds" de orice dimensiune doriți și completați-l cu aceeași culoare de fundal ca fișierul "balon": # 486493. Apoi, folosind Instrumentul Pen, trageți niște nori albi, așa cum arată imaginea de mai jos.
Aplicați pe straturile de nori un strat Layer> Gradient Overlay utilizând aceste culori: # D1D7E7 - #FFFFFF Unghi: 0 grade și o culoare Inner Glow: # BBD5D6 Mod amestec: Normal, dimensiunea depinde de dimensiunea nori, m folosind 6 pixeli.
Adăugați niște nori în secțiunea 2 a documentului nostru principal, în spatele baloanelor, dacă vreți să adăugați ceva adânc la peisaj, încetiniți niște nori îndepărtați.
Adăugați mai mulți nori lângă orizont în secțiunea 3 a documentului principal, schimbați puțin culorile, pentru folosirea #FFFFFF pentru Inner Glow și pentru Overlayul Gradient: # DBE1F1 - #FFFFFF. Ar trebui să obțineți ceva asemănător imaginii de mai jos.
Tocmai am terminat cerul, amintiți-vă că nu puneți elemente importante lângă graniță și păstrați toate straturile organizate. Suntem la jumătatea drumului, este un moment bun pentru a obține o cafea!
Să adăugăm munții, de această dată lucrez chiar pe documentul principal, folosind Pen Tool pentru a desena o formă asemănătoare munților, așa cum se arată în imaginea de mai jos. Aplică apoi o acoperire cu straturi> Gradient Overlay utilizând următoarele culori: # 557200 - # 88B707 și setați unghiul pentru a vă potrivi mai bine, în acest caz 99 de grade. Duplicați apoi muntele, plasați-l în spatele primului munte și faceți-l puțin mai mare și schimbați culorile lui Overlay pentru Gradient la: # 415800 - # 8AB00B pentru a face un pic mai întunecat.
Creați un nou strat deasupra muntelui mare și numiți-l "Umbre" folosind o pensulă moale și această culoare: # 527300 vopsiți niște umbre. Apoi Command / Ctrl- Faceți clic pe stratul de munte pentru a crea o selecție în jurul acestuia, apoi apăsați Command / Ctrl + Shift + I pentru a inversa selecția și a șterge selecția din stratul "Shadows". Repetați procesul de creare a unui strat denumit "Luminile" utilizând o pensulă de culoare verde deschis pentru a adăuga lumini către munți.
Utilizând instrumentul Pen, trageți trunchiul copacului și câteva ramuri. Apoi, pe un nou strat trageți o formă stilizată cu frunzele. Pe stratul trunchiului adăugați un stil de strat de acoperire cu gradient folosind aceste culori: # 574E00, # 957800 unghiul depinde mult de forma. Pentru frunze, utilizați următoarele culori pentru suprapunerea Gradient: # 577E01, # 8DDA00. Apoi adăugați mai multe frunze pe tufișuri mici în fața ramurilor.
Creați mai multe forme diferite și dacă doriți să adăugați o mică elipsă închisă neclară pe baza fiecărui copac. Rasterizeaza fiecare copac si merge mai departe.
Plasați copacii peste munți și peste câmpul verde pe secțiunile 3 și 4 ale documentului nostru principal, faceți copacii din partea de jos a imaginii mai mari decât cei de lângă munți pentru a crea o iluzie de profunzime a câmpului, în afară de a bloca imaginea mai mici copaci un pic.
În cele din urmă, utilizați instrumentele Dodge / Burn Tools pe cei mai mari copaci pentru a crește intensitatea umbrelor.
În acest moment aveți un design de fundal ilustrativ frumos. Puneți toate straturile legate de fundal într-un folder numit "Fundal".
Să adăugăm titlul paginii, folosindu-se instrumentul de tip Adăugați două straturi de text, pe primul tip de "Web design" și pe al doilea: "Tutsplus" (Bineînțeles că puteți înlocui aceste cuvinte cu dvs. foarte). Apoi, pe panoul de caractere setați textul de tip "Futura" (puteți folosi orice altceva). Pentru prima linie setați dimensiunea la 42pt, Kerning: 0pt, marcați opțiunea Toate capacele și setați culoarea primului la alb #FFFFFF. Pentru cea de-a doua linie folosesc și Book Futura, dimensiune 18pt și 1250pt Kerning, setați culoarea primului rând la # FFD001 și marcați și opțiunea Toate capacele.
Folosind Instrumentul de Linie, trageți o linie albastră (# 9AA4D9), adăugați un efect alb strălucitor și rasterizați linia (Mergeți cu un strat negru deasupra sau dedesubt), Aplicați apoi o Mască de Layer> Ascundeți toate și umpleți masca cu un gradient reflectat negru / alb.
Asigurați-vă că titlul se află în apropierea celui de-al doilea ghid din stânga, ceea ce înseamnă 10 pixeli în partea dreaptă a marginii din stânga 960.
Cu ajutorul instrumentului dreptunghi trageți un dreptunghi alb îngust în colțul din dreapta-sus al secțiunii 1, setați valoarea de umplere la 25%, apoi adăugați un stroke alb 1px pixel, opacitate: 50%. Rasterizați stratul prin îmbinarea acestuia cu un strat negru deasupra sau dedesubt, adăugați o mască Layer> Hide All ... și completați-o cu un Gradient negru / alb reflectat, încercați să obțineți ceva asemănător cu partea de jos a imaginii de mai jos.
CSS3 ne permite să încorporăm fonturile pe site-ul nostru, există niște directoare gratuite de fonturi care oferă grafice grafice gratuite gata de utilizare în designul nostru, vom lua mâna de frumosul font numit: "Bonveno". Introduceți linkurile de navigare utilizând Bonveno, Dimensiune: 12pt, Toate capacele și prim plan: Alb. Selectați linkul HOME și evidențiați-l cu galben # FFCF00. Adăugați un text instructiv: "Salt la" folosind bonveno, dimensiune 8px și fundal gri.
Pentru a avea un fundal mai frumos, duplicați stratul "Nav" și mutați copia câțiva pixeli în partea stângă jos. În cele din urmă, modificați Opacitatea fiecărui strat la 50%. Puneți toate straturile legate de navigație într-un folder denumit "Navigare".
Pentru a acorda mai multă atenție numelui site-ului, selectați cuvântul mare și aplicați o suprapunere subtilă de gradient (# C5C5C5 - #FFFFFF) și o mică umbra de decolorare (Distanță și dimensiune 2 px) Aplicați umbra mică la al doilea rând de asemenea.
Să adăugăm textul bun venit, vom începe să adăugăm titlul. Din moment ce titlurile ar trebui să fie text simplu, utilizați fonturi de tip Bonveno și fundal galben (# FFCF00). Aplicați Umbra de Drop afișată în pasul anterior. Nu ezitați să utilizați mai multe ghiduri pentru a marca conținutul dvs., în acest caz creez ghiduri cu 10 px deasupra și dedesubtul titlului de bun venit pentru a mă ajuta să adaug textul paragrafului și fundalul acestuia.
Cu ajutorul instrumentului Rectangle pentru a desena o cutie ca fundal pentru textul de bun venit, utilizați această culoare # 0E1122 pentru casetă și în josul acesteia Umpleți la 25%. În plus, adăugați un Accident 1px folosind această culoare # 4E6575.
Rasterizați caseta (îmbinați-o cu un strat gol), apoi aplicați o mască de strat și umpleți-o cu un gradient alb-negru. Puteți utiliza o periuță moale mare și vopsiți peste Masca stratului pentru a ascunde anumite zone pentru a face decolorarea să arate mai moale. În cele din urmă, la fel ca în cazul navigației rău, duplicați fundalul casetei și mutați-l cu câțiva pixeli de jos în stânga pentru a crea un stil similar cu cel prezentat în partea de jos a imaginii de mai jos.
Utilizând instrumentul Tip, trageți o casetă cu textul din paragraf și completați-o cu textul Lipsum, utilizați "Lucida Sans - Regular" ca font, Dimensiune 11px, Vedere: 19pt și Culoare fundal alb. în sfârșit, din moment ce CSS3 ne permite să adăugăm acest tip de detalii, adăugăm o notă de 2px Black Drop Shadow la paragraful textului.
Utilizați aceleași instrucțiuni afișate în pașii 40 și 41 pentru a crea un fundal, dar acest lucru este mai mic. Deschideți iconițele rețelei sociale din active și inserați următoarele pictograme: RSS, Twitter și Facebook, nu ezitați să adăugați pictogramele preferințelor dvs. În cele din urmă, folosind textul "Bonveno", scrieți cuvântul "Rețea" ca titlu și utilizați "Helvetica" (Arial funcționează bine) pentru a adăuga un număr alb de abonați, urmați și care îi plac.
În acest moment avem secțiunea 1 care este pagina de întâmpinare (sau pagina de pornire) finalizată. Este un moment bun pentru a revizui totul într-o poziție corectă, încercați să păstrați echilibrul cu ritmul alb, de ex. spațiul dintre limita din stânga și textul de bun venit și marginea din dreapta cu pictogramele de rețea sunt aceleași. Lucrul cu spațiul alb (care, desigur, nu este literalmente "alb") este cu adevărat complicat, resping impulsul de a umple fiecare spațiu mic cu o imagine sau o icoană, adesea un fundal larg și clar este mai atrăgătoare decât o mie de elemente strălucitoare.
În afară de a vă asigura că toate straturile sunt organizate, în partea de jos a imaginii de mai jos este o structură Foldere pe care am făcut-o. Unul dintre cele mai importante foldere de aici este "Nav", am de gând să creez o navigație plutitoare folosind JavaScript, dar pentru scopuri machete, va trebui să o repetăm de câteva ori pentru a vedea cum arată celelalte "pagini" sau secțiuni.
Pentru această secțiune, repetați în mod substanțial procesul din pașii 39-42, dar plasați straturile din partea dreaptă a celei de-a doua secțiuni schimbând titlul în "Despre noi". În acest moment am planificat să adaug o caracteristică a tabelului cu tab-uri, dar schimbați pozițiile tab-urilor în partea de jos, folosind textul "Bonveno" scrieți filele de sub paragraful despre noi. utilizați această culoare prim-plan pentru filele: # C3DFFF și White pentru fila selectată. În cele din urmă, utilizând instrumentul Polygon, trageți un triunghi Sky Blue # D5E5F2 pentru a marca selecția.
Doar pentru a vedea cum arată duplicat dosarul "Nav" al secțiunii anterioare, dar evidențiați cuvântul "Despre noi" din legăturile de navigare. Asigurați-vă că tot conținutul este între marginile secțiunii și că organizați straturile în foldere.
Repetați instrucțiunile din pașii anteriori pentru a crea o casetă de conținut, dar în loc să utilizați culoarea galbenă pentru titlu utilizați albastru: # 336A91 și utilizați următoarea culoare pentru fundalul cutiei: # 7FA5D2 și un stil al stratului Stroke Layer.
Pentru această secțiune vom proiecta o galerie de portofolă foarte simplă, folosind Instrumentul Rectangle trage niște pătrate albastru deschis în partea stângă a casetei de conținut recent create. și un dreptunghi mare în partea stângă. Adăugați în fiecare casetă un stil de strat> Stroke, 1px și alb. Folosind instrumentul Rectangle Draw mici pătraturi în partea dreaptă jos a pătratului mare, care va fi ca niște miniaturi pentru a controla un fel de efect de tranziție, adăugați apoi un text fictiv peste fiecare pătrat pentru a arăta conținutul care ar trebui plasat acolo. De fapt, puteți folosi exemple de imagini dacă doriți.
Urmând același proces decât pasul 43, adăugați câteva linkuri pentru portofoliul Social Media, cum ar fi Flickr sau LinkedIn. Utilizați fontul "Bonveno" pentru titlu și această culoare: # 034D8A.
Duplicați din nou folderul "Nav" și evidențiați cuvântul "Portofoliu". Asigurați-vă că totul se află în limitele secțiunii trei și că organizați-vă straturile.
Suntem aproape terminați, acum să adăugăm un container pentru formularul de contact. În acest caz, dreptunghiul ar trebui să fie verde # 67A802, iar bara de viteză mai verde # B8D942. Titlul secțiunii trebuie să fie "Contactați-ne" și folosesc un fundal alb pentru a crește contrastul cu fundalul. Fade puțin cutie și duplicat pentru a crea un efect de dublă linie din cutiile de conținut anterioare.
În cele din urmă, utilizând un plan alb și o dimensiune mai mică a tipului "Bonveno" scrieți etichetele formularului de contact. Aplicați și umbrele de pe care le folosim pentru titluri și pe aceste etichete.
Folosind Instrumentul Rounded Rectangle (Radius 5px), trageți următoarele forme care vor deveni zonele de intrare reale ale formularului nostru de contact. Apoi, aplicați stilurile de strat Shadow Inner, Color Overlay (# 4B6800) și Stroke (# A8D02F) prezentate mai jos.
Cu ajutorul tipului de tip "Bonveno", în interiorul cutiilor de intrare se utilizează câteva cuvinte inactivă, folosind această culoare ca prim plan: # AFD437. Sub casetele de introducere puteți adăuga și o linie telefonică de contact (nu ezitați să modificați informațiile dorite).
În cele din urmă, să adăugăm butonul de contact, folosind dreptunghiul rotunjit (Radius 5px) desenați un buton. aplicați o Shadow Drop, o suprapunere de gradient (# B17F02 - # FFD101) și un stil Stroke (# FFDB04).
Pentru textul Buttonului folosesc textul "Futura Black", dar nu ezitați să folosiți alt font. Apoi aplicați la stratul de text o Shadow Inner, o Color Overlay (# 564100) și un Stroke (# F0C401). Ar trebui să aveți ceva foarte asemănător în partea de jos a imaginii de mai jos.
Accentsconagua