Share
Ce veți creaÎn timpul acestui tutorial vă voi purta prin procesul de creare a stilului sofisticat de elemente web în Photoshop, dar fără a folosi un singur fișier imagine pe site-ul dvs. terminat. Când vom termina, veți avea o singură dispunere a paginii cu toate elementele UI pe care le vedeți în imaginea de previzualizare de mai sus, folosind doar codul CSS3, codul Base64 și pictogramele de fonturi.
Prin crearea unui design "fără imagine" puteți să vă mențineți timpul de încărcare și numărul de solicitări HTTP la un minim absolut, atingând în același timp cel mai înalt nivel de flexibilitate al elementelor dvs. UI. Elementele UI ale codului Pure pot fi modificate rapid și ușor prin CSS în moduri în care imaginile statice nu pot fi editate și reexportate manual.
Pentru ca acest lucru să se întâmple, vom folosi patru resurse cheie:
* Puteți utiliza un alt preprocesor dacă preferați.
Prin aducerea acestor elemente împreună este posibil să se genereze un design de cod pur, care este practic identic cu PSD original:
PSD
Rezultatul codului pur (văzut în Firefox)Acest tutorial va fi împărțit în două părți:
În această primă parte vom demonstra tipurile de tehnici pe care le puteți folosi în Photoshop atunci când creați un design prietenos CSS3 și Base64. În timp ce putem obține multe lucruri cu codul pur în aceste zile, nu putem încă să traducem absolut tot ceea ce ați putea găsi în Photoshop. Deci, este important să aveți mințile "dos" și "nu" în minte atunci când stabiliți.
Să începem cu o scurtă trecere în revistă a CSSHat și PNGHat, pluginurile Photoshop pe care le vom folosi pentru a genera codul nostru CSS3 și Base64.
Cu pluginul CSSHat instalat puteți face clic pe orice strat din documentul Photoshop și fereastra CSSHat va scoate instantaneu codul de pregătire pentru dvs..
CSSHat interpretează în primul rând din setările stilului dvs. de strat, așadar ar trebui să încercați să adăugați gradienții și granițele prin stiluri de strat, mai degrabă decât oricare dintre metodele alternative ale Photoshop.
Accentsconagua
px (Opțional)familie de fonturi, marimea fontului, font-greutate (bold / normal), stilul fontului PNGHat poate face multe lucruri. Aflați cum să exportați materialele Photoshop pentru web Cu PNGHat pentru o plinã recenzie a plugin-ului.
În cazul acestui tutorial îl vom folosi pentru a genera codul Base64 care va forma imaginea de fundal a proiectului. Veți vedea cum funcționează acest lucru în practică în scurt timp.
Când o imagine este convertită în Base64, veți obține un șir de text care poate fi apoi încorporat direct în CSS. Cu cât sunt mai multe date în imagine, cu atât este mai lungă șirul, astfel încât, din acest motiv, Base64 este cel mai potrivit pentru a simula imagini simple cu câteva culori.
Pentru a obține rostogolirea mingii, veți avea nevoie de câteva lucruri.
Pentru început, ar trebui să aveți instalate pluginurile CSSHat și PNGHat.
Dacă nu puteți achiziționa o copie a CSSHat, puteți continua și utilizați funcția Photoshop în funcția "Copy CSS" construită, care poate fi selectată din meniul contextual după ce faceți clic dreapta pe orice strat.
Cu toate acestea, în acest caz, va trebui să eliminați manual codul implicit nedorit pentru lucruri precum poziționarea absolută, indexul z, dimensiunile și numele claselor. De asemenea, nu se ocupă de generarea de umbre multiple și de gradienți, precum și de CSSHat și nu poate produce mai puține coduri SASS / SCSS sau Stylus ready.
Dacă nu puteți achiziționa PNGHat, puteți să exportați manual imaginea de fundal apoi să o puneți într-un convertor online, cum ar fi: http://webcodertools.com/imagetobase64converter
De asemenea, recomand foarte mult un al treilea plugin din Sursa denumit "Modele subtile". Acest plug-in adăugat adaugă o bibliotecă de sute de modele pentru Photoshop, fiecare dintre acestea putând fi aplicată instantaneu ca o suprapunere de tipar pentru orice strat.
Ca alternativă la utilizarea pluginului Subtle Patterns, puteți doar să răsfoiți modelele și să le descărcați gratuit.
Notă: Știu ce s-ar putea să te întrebi - asta este o mulțime de lucruri de către Source, este un post sponsorizat? Nu. Adevărul este că am cumpărat întreaga gamă de produse de la Sursă cu mult înainte de a începe să scriu pentru Tuts + și îmi place fiecare dintre ele din cauza numărului foarte mare de ore pe care i-au adus înapoi în ziua mea. Vă recomandăm aceste pluginuri, pentru că am fost foarte impresionat de experiența proprie a întregului suite.
Vom plasa câteva pictograme în designul dvs. prin Font Awesome, deci va trebui să mergeți și să descărcați fontul și să-l instalați pe sistemul dvs..
Fontul de alegere pentru textul nostru regulat va fi Roboto, astfel încât va trebui să instalați și acest lucru. Puteți să-l luați din Google Webfonts.
Creați un nou document Photoshop la o dimensiune de 1600 px X 2180px. Faceți dublu clic pe stratul implicit "Fundal" pentru ao debloca, apoi salvați PSD-ul.
În Modele subtile fereastră, (sau site-ul web), căutați satinat. Când o găsiți, cu dvs. fundal selectați layerul, faceți clic pe țigla modelului pentru al aplica automat ca o suprapunere de tipar.
Acum ar trebui să vedeți niște linii verticale subțiri în tonuri de gri pe pânză. Am ales acest model ca potrivire bună pentru conversia în Base64, deoarece folosește foarte puține culori și are o dimensiune de numai 24px și 12px, ceea ce înseamnă că va produce un șir de cod relativ mic.
Pentru a ajuta la încadrarea paginii, creați un dreptunghi în partea de sus a pânzei, executând lățimea totală și 8px in inaltime. Dați-i următoarele proprietăți:
Culoare umplere: #dddddd
Opacitate: 50%
Strat de stil> Umbra interioară:
Normal # c8c8c8 100% -90 2 4 Strat de stil> Drop Shadow:
Normal #FFFFFF 100% 90 2 1 "Top-ul tău" ar trebui să arate astfel:
Prin crearea acestui meniu vom vedea câteva dintre efectele care pot fi create cu gradiente, umbre și lovituri. Mergem pentru un meniu cu aspect curat, care este așezat într-un înveliș de inserție.
În primul rând, vom crea pachetul de inserție care va menține meniul. Creați un centru aliniat, dreptunghi rotunjit pe colț pe panza dvs. 1200px larg prin 61px înalt. Setați următoarele proprietăți:
Culoare umplere: # f9f9f9 - rețineți că, deși va exista un gradient pe acest dreptunghi, dorim încă să setăm o culoare de umplere ca rezervă.
Proprietăți> Proprietățile formei live> Raza razei: 12px
Strat de stil> Umbra interioară:
Normal # 000000 15% 90 1 10 Strat de stil> Suprapunere cu gradient:
#FFFFFF # f3f3f3 Liniar Strat de stil> Drop Shadow:
Normal #FFFFFF 100% 90 1 2 Încărcătorul de meniu ar trebui să arate acum:
Creați un al doilea dreptunghi rotunjit de colț de deasupra meniului de înfășurare, la 1190px larg prin 50px mare, cu colțul din stânga sus 5px în colțul din stânga sus al colii de meniu. Adăugați următoarele proprietăți:
Culoare umplere: #FFFFFF
Proprietăți> Proprietățile formei live> Raza razei: 10px
Stratul de stil> Accident vascular cerebral:
1 in afara # e4e4e4 Strat de stil> Suprapunere cu gradient:
# e5e5e5 #FFFFFF Liniar Strat de stil> Drop Shadow:
Normal # c1c1c1 100% 90 3 4 Ar trebui să aveți acum:
Creați un alt dreptunghi, de data aceasta 130 x larg prin 51px mare, direct peste partea de sus a barei "fundal de meniu". Dați-i această suprapunere gradient:
Strat de stil> Suprapunere cu gradient:
#efefef # e4e4e4 #fcfcfc Liniar Acum, adăugați un text tip text: introduceți cuvântul "Pagina" și poziționați-l peste mijlocul elementelor de meniu cu următoarele setări:
Caracter> Font: Roboto, regulat
Caracter> Dimensiune font: 18px
Caracter> Culoare: # 5c5c5c
Strat de stil> Drop Shadow:
Normal #FFFFFF 100% 90 1 0 Elementul de meniu ar trebui să arate astfel:
Efectuați un duplicat al dreptunghiului și textului elementului de meniu, apoi mutați-l spre dreapta, astfel încât acesta să se afle chiar lângă original. Editați textul pentru a citi "Curent".
Setați proprietățile stilului stratului dreptunghiului la:
Stratul de stil> Accident vascular cerebral:
1 in afara # e62d4ee4e4e4 Strat de stil> Umbra interioară:
Normal # faabb9 60% 90 3 5 Strat de stil> Suprapunere cu gradient:
# ef3d5d # dc2345 # fc6c86 Liniar Strat de stil> Drop Shadow:
Normal # cc2241 100% 90 1 0 Apoi schimbați culoarea textului și setați setările de umbră la:
Caracter> Culoare: #FFFFFF
Strat de stil> Drop Shadow:
Normal # b50020 100% 90 1 0 Când ați terminat cu cele de mai sus, faceți mai multe duplicate ale "elementului de meniu" original și plasați-le în partea dreaptă a "elementului de meniu curent". Facem acest lucru pentru a vedea cum arată stilurile elementelor de meniu atunci când se așează în același loc una față de cealaltă, pentru a se asigura că există o separare vizuală adecvată de la un element la altul.
Din nefericire, Photoshop nu are nici o modalitate de a seta ceva de genul "frontieră-stânga", astfel încât să nu putem seta frontierele stânga sau dreapta direct pe elemente de meniu dreptunghiuri. Totuși, trebuie să simulăm efectul, astfel încât să putem crea separarea între fiecare element. Utilizați instrumentul liniei Photoshop pentru a desena 1px linii verticale laterale între elementele de meniu și setați culoarea lor de umplere la #dddddd
Cu toate aceste elemente, ar trebui să aveți:
Dacă utilizați acest aspect pentru un client, acesta este zona în care ați adăuga cârligul de interes principal sau apelul la acțiune. Pentru scopurile acestui tutorial, adăugați următoarele patru linii, toate centrate pe pagină:
Dați primele și celei de-a treia linii următoarele setări:
Caracter> Font: Roboto, subțire
Caracter> Dimensiune font: 48px
Caracter> Culoare: # 6b6b6b
Apoi dați a doua și a patra linii aceste setări:
Caracter> Font: Roboto, Bold
Caracter> Dimensiune font: 80px
Caracter> Culoare: # ef3d5d
Textul dvs. ar trebui să arate astfel:
Sub textul principal, creați un dreptunghi rotunjit în colț 1200px larg prin 665px înalt. Dați-i aceste setări:
Culoare umplere: #FFFFFF
Proprietăți> Proprietățile formei live> Raza razei: 15px
Stratul de stil> Accident vascular cerebral:
1 interior # d8d8d8 Strat de stil> Drop Shadow:
Normal # c1c1c1 27% 90 3 4 Atunci, 60 px sub partea superioară a fundalului panoului, creați un alt dreptunghi rotunjit. Ar trebui să fie 1230px și 70px înalt. Așezați-o pe panza, astfel încât să se scurgă 15px pe fiecare parte a fundalului panoului. Dați-i următoarele proprietăți:
Culoare umplere: # ef3d5d
Proprietăți> Proprietățile formei live> Raza razei: 10px
Strat de stil> Umbra interioară:
Normal # de2a4a 60% 90 0 5 Strat de stil> Suprapunere cu gradient:
# ef2c4f # dc2345 # fc6c86 Liniar Strat de stil> Drop Shadow:
Normal # cc2241 100% 90 3 0 Avem deja o umbră fixată pe dreptunghiul pe care tocmai l-am creat, ceea ce îi va da un efect 3D subtil. Dar, de asemenea, dorim să avem o a doua umbră care va arăta ca o umbră reală, aruncată de o lumină de fundal. Deoarece deja am "epuizat" proprietatea de umplere a umbrei dreptunghiului existent, va trebui să creăm un al doilea dreptunghi pentru a aplica o a doua umbră.
Duplicați dreptunghiul de fundal al panoului și trageți-l sub versiunea originală din panoul dvs. de straturi, apoi ștergeți stilul stratului existent. Denumiți-o "panou" pentru a vă putea spune cu ușurință cele două straturi. Dați-i aceste setări de umbră:
Strat de stil> Drop Shadow:
Normal # 000000 27% 90 5 3 Direct peste mijlocul antetului panoului de fundal tip "ÎN ACEST TUTORIAL:" și dați textului aceste setări:
Caracter> Font: Roboto, regulat
Caracter> Dimensiune font: 24px
Caracter> Culoare: #FFFFFF
Strat de stil> Drop Shadow:
Normal # b50020 100% 90 1 0 În cele din urmă, adăugați următoarele linii de text:
Setați primul lot de text la:
Caracter> Font: Roboto, subțire
Caracter> Dimensiune font: 36px
Caracter> Culoare: # 6b6b6b
Și al doilea lot de text pentru:
Caracter> Font: Roboto, Negre
Caracter> Dimensiune font: 48px
Caracter> Culoare: # 6b6b6b
Apoi evidențiați fiecare din simbolurile "+" și setați culoarea lor la: # ef3d5d
Ar trebui să aveți acum un panou de informații care arată astfel:
Aici vom începe să folosim Font Awesome. Vom plasa pictograma "fa-down-arrow" și vom folosi aceasta în locul unei imagini.
Cea mai ușoară modalitate de a face acest lucru este să obțineți "scrisoarea" potrivită în cache-ul dvs., accesând fișierul de tipărire Font Awesome. Localizați pictograma "fa-down-arrow", apoi evidențiați previzualizarea puțină imagine și apăsați CTRL / CMD + C
Evidențiați și copiați puțin săgeata în josReveniți la pânza dvs., plasați un cursor cu instrumentul de text și inserați în caracterul pe care tocmai l-ați copiat. La început veți vedea doar un dreptunghi mic amuzant cu o cruce în el, deci schimbați setările dvs. la acest lucru:
Caracter> Font: FontAwesome
Caracter> Dimensiune font: 200px
Caracter> Culoare: # 6b6b6b
Asigurați-vă că săgeata este centrat pe pânză și setați opacitatea stratului la 30%. Ar trebui să aveți acum această săgeată interesantă în căutarea:
Creați un nou dreptunghi rotunjit în colț, 420px larg prin 105px înalt. Butonul va folosi aceleași proprietăți ale stilului stratului ca și "fundalul antetului panoului", astfel încât să puteți copia pur și simplu peste acele stiluri de straturi. Faceți clic dreapta pe stratul fundalului antetului panoului și selectați "Copy Layer Style", apoi faceți clic dreapta pe noul strat al butonului și selectați "Paste Layer Style".
Așa cum am făcut și cu fundalul antetului panoului, dorim să creăm un al doilea dreptunghi pentru acest buton, care poate fi aplicat pe o a doua umbră a căderii. Duplicați stratul de buton și trageți-l sub versiunea originală din paleta dvs. de straturi, apoi redenumiți-l "umbra butonului". Copiați stilul stratului de la stratul de "panou" care a fost creat mai devreme și îl lipiți pe noul "umbra de buton"" strat.
Vom adăuga un mic cerc pe butonul care va arăta ca o mică depresiune și apoi vom stabili o dreapta indicând o săgeată albă deasupra ei.
Creați un cerc (elipsă) deasupra butonului la 47px de 47px. Poziționați-l astfel încât să fie o distanță egală față de marginile de sus, de stânga și de jos ale fundalului butonului, apoi dați-i această suprapunere de gradient:
Strat de stil> Suprapunere cu gradient:
# f04f6c # e32d4f Liniar Pentru a crea o săgeată potrivită, vom folosi din nou FontAwesome. Întoarceți-vă la cheatsheet și copiați de această dată fa-caret-dreapta icon. Pe panza dvs., utilizați instrumentul de text pentru a plasa un cursor peste cercul pe care tocmai l-ați creat și pentru a lipi în pictograma / caracterul Font Awesome. Dați-i următoarele proprietăți:
Caracter> Font: FontAwesome
Caracter> Dimensiune font: 36px
Caracter> Culoare: #FFFFFF
Poziționați săgeata albă nou creată în centrul cercului de mai sus.
În partea de sus a butonului, în partea dreaptă a cercului și a săgeții, tastați "Porniți tutorialul" și dați textului aceste setări:
Caracter> Font: Roboto, regulat
Caracter> Dimensiune font: 36px
Caracter> Culoare: #FFFFFF
Acest text folosește aceeași umbră ca și "Textul antetului panoului", astfel încât să puteți copia stilul din acel text și să îl inserați pe acest strat.
Ar trebui să aveți acum un buton care arată astfel:
Vom adăuga acum elementul final al designului, unele trim în partea de jos pentru a finaliza încadrarea spațiului. Când acest element este codificat, vom folosi setări separate de la marginea superioară și inferioară, dar, deoarece Photoshop nu poate facilita acest lucru, vom folosi din nou instrumentele de formă pentru a putea obține culorile potrivite.
Sub butonul Start, creați un dreptunghi cu o culoare de umplere de #dddddd acesta este 5px mare și se întinde pe toată lățimea paginii. Duplicați noul dreptunghi și mutați-l jos 10px așa că există a 5px spațiul dintre cele două dreptunghiuri.
În centrul pânzei dvs. și deasupra celor două linii gri / dreptunghiuri, trageți un cerc care este 40px de 40px și dați-i aceste proprietăți:
Culoare umplere: # f2f2f2
Stratul de stil> Accident vascular cerebral:
5 interior #dddddd Strat de stil> Suprapunere cu gradient:
#dddddd # f2f2f2 Radial Acordați o atenție deosebită setărilor pentru suprapunere gradient, deoarece acestea sunt diferite de cele pe care le-am folosit înainte. Opririle de culoare sunt plasate la 40% și 45% mai degrabă decât 0% și 100% și folosim un gradient radial în loc de liniar. Împreună cu frontiera / cursa, acest lucru dă efectul unui mic cerc gri, înconjurat de unul mai mare.
Fundalul dvs. de fund ar trebui să arate astfel:
Acum ar trebui să aveți un design PSD completat, 100% gata de traducere în codul CSS3 și Base64 pur:
În următoarea parte a acestui tutorial:
Ne vedem atunci!
