Puternic programului Photoshop și-a găsit aplicarea în sarcina dificilă de web design. În acest articol, dragă cititor, voi explica baza pentru utilizarea pachetului de grafica Photoshop ca un instrument pentru crearea unui site web.
Și astfel, ceea ce este bine în Photoshop, și de ce este nevoie pentru a crea site-ul.
Aici puteți găsi imediat cele două aplicații, în funcție de site-urile ce faci:
- În cazul site-ului pe motor Photoshop folosit ca un instrument pentru a crea un conținut grafic special. În linii generale de proiectare site-ul de diapozitive este luat de la motor șablon gata făcut.
- Dacă site-ul samopisnogo în Photoshop trase aspectul paginilor complet. Urmatoarea HTML-maker-tăieturi din structura elementelor grafice și codul HTML corespunzător își dă seama că proiectantul pictat.
La crearea unui aspect site-ul în Photoshop este necesar să se ia în considerare dacă site-ul de „cauciuc“ sau o dimensiune fixă. De altfel, cauciucul a site-ului - acest lucru nu este un scop în sine, și, în marea majoritate a cazurilor un aspect de cauciuc mai rău decât o dimensiune fixă. În cazul în care structura de cauciuc, este necesar să se înțeleagă exact unde se va trage.
Un factor important în pregătirea layout-ul este ca site-ul ar trebui să se potrivească fără a derula pe orizontală într-o rezoluție a ecranului de 1024 * 768 - aceasta este minimă, pentru moment, rezoluția monitorului de 17-inch. Și în cazul în care are loc în 17 inch derulare pe orizontală, de mulți critici ai site-ului dvs. a avut o fericire epileptic.
Cu introducerea liric este de peste, să se ocupe cu programul.
Primele lucruri mai întâi pentru a crea un nou fișier, în care ne-am trage aspectul site-ului nostru. Bazat pe vlazimosti 1024 * 768 lățime la fișierul creat nu trebuie să depășească 1000 de puncte, înălțimea poate fi orice (defilare verticală nu ne sperie).
site-ul Neuer buduyuschego
Setarea rezoluției în web design nu joacă nici o importanță, acesta trebuie să fie egală cu 70. Dar dacă creați o machetă pentru imprimare, atunci aici este necesar ca rezoluția este egală cu 300 pixeli. / Inch.
După cum se poate utiliza template-uri gratuite descărcate (utilizați motorul de căutare și îi conferă o cerere de „template-uri gratuite“, va avea o multime de a alege de la) ca sursă de inspirație pentru a desena Șablonul site-ului.
Acum rămâne bine cut-layout design al site-ului și stocate în formate mod știință de carte știință de carte.
Imagine pe un gradient, sau un fundal complex
În cazul în care este necesară o imagine pe un gradient, sau un fundal complex, necesitatea de a menține această imagine cu un fundal transparent și să impui nostru bekgraund greu gradietny.
Toate acestea trebuie să se facă în acest caz, în cazul în care imaginea este suprapus pe partea de sus a fundal, putem muta (poziționarea imaginii variază în funcție de rezoluția ecranului). În acest caz, este imposibil să acosteze cu exactitate de fond în imagine pentru a vă deplasa în jos un fundal complex și fundalul va fi cusături vizibile.
Pentru a salva cu un fundal transparent, vom aborda formatele GIF și PNG. În cazul unei simple imagini cu margini ascuțite este format GIF optimă. Dacă imaginea conține culori degrade și limitele neclare, apoi - png. Ambele formate au capacitatea de a menține o imagine de fundal transparent.
fundal simplu
Dacă fundalul este simplu (alb sau alb-negru), putem pune imaginea direct pe partea de sus a fundalului dat, cu condiția ca imaginea este exact același model ca și cea a substratului.
În acest caz, vom păstra în format jpg optim.
Păstrați de la Photoshop nevoie de o cheie de combinația Shift + Ctrl + Alt + S - este păstrarea pentru web sau dispozitive.
Comoditatea de dialog Salvare este disponibil în formatul său prietenos și de a salva alegerea Selecta, cu excepția cazului unui format jpg. avem posibilitatea de a schimba calitatea imaginii.
Imagine Setări suplimentare salvate
Reducerea ratei de calitate și de urmărire schimbarea imaginii în fereastra din stânga este necesară pentru a atinge dimensiunea imaginii minimă (mai mică dimensiunea, cu atât mai repede imaginea este încărcată) și satisfăcătoare a aspectului său. combinație optimă poate fi realizată, de obicei, la o valoare egală cu 55 de calități.
Am act de faptul că, menținând în același timp o imagine simplă (delimitare clară, fără gradient de culoare, complex), chiar și în cazul unui fundal simplu, optim raport greutate / calitate ar gif format.
Cum să taie
Foarte des vedem următoarele erori:
Când este necesar pentru a deschide blocul de culoare gradientului (bloc are o lungime variabilă și o înălțime constantă) sunt tăiate prea lungi bucată cu gradient de fundal. Este complet inutil. Este suficient să se taie o lungime de gradient felie de 1 pixel și o înălțime egală cu înălțimea gradientului inserție de umplere. În plus, proprietatea background-repeat: repeta-x repeta imaginea noastră gradient de-a lungul axei X și deschide fundal tot alocat pentru ea, bloc. În același timp, imaginea noastră 1-pixel (format JPG) muștele pe computerul unui utilizator într-un fulger.
De asemenea, este comun pentru a vedea utilizarea formatului png- cu un fundal transparent în acele locuri unde puteți obține jpg de obicei. antipatia mea pentru png rezultă din faptul că transparența nu funcționează corect cu IE6 și este necesar să se conecteze remedieri suplimentare.
Despre png nu este de acord, se deschide oportunități bune pentru utilizarea și acuratețea transferului de imagine. Mai ales pe observația mea IE6 folosesc aproximativ 20% dintre utilizatori, iar acest număr scade cu fiecare zi ce trece
Da, am folosit nu ca png. Dar acum a marcat cu succes pe fanii IE6. Deși proiectele realizate la comandă sunt încă fiksat. Cu siguranță jpg potrivi mai bine.
Bună ziua, Andrey! Vă mulțumim pentru lecțiile dumneavoastră! A existat o dorință pe care nu ai putea face o lecție despre crearea de pălării de pe site?