cum se creează un aspect curat al site-ului web în Photoshop

creați un aspect curat al site – ului web în Photoshop-proiectarea unui aspect al site-ului web este mai mult decât aranjarea imaginilor colorate și completarea unui text în cadrele de text. Este o abordare care vorbește volume despre afacerea clientului dvs. Culorile și grafica site-ului definesc natura afacerii, în timp ce calitatea designului și fluxul ușor de navigare al site-ului ar trebui să lege utilizatorul de organizație și să-l transforme într-un potențial client.

proiectarea unui aspect bun și ușor accesibil al site-ului web este obligatorie pentru fiecare designer web wannabe. Acest tutorial este destinat să vă ducă prin procesul de creare a unui aspect al site-ului web simplu și curat chiar de la zero. În timpul procesului, veți învăța puncte importante care vă vor ajuta să obțineți mai multe cunoștințe cu privire la proiectarea web.

notați cerințele dumneavoastră înainte de a proiecta un aspect site-ul web.

înainte de a începe să proiectați un aspect al site-ului web, ar trebui să știți cum va arăta site-ul dvs. web și care sunt subiectele pe care ar trebui să le includeți în site. Este esențial să faceți o listă a elementelor de aspect ale site-ului web de care clientul dvs. are nevoie pe site-ul său web. Odată cu aceasta, calitatea unui bun designer este de a pregăti o machetă a întregului site web înainte de a începe să lucreze la șablonul final.

diverse companii de proiectare adaptează diferite niveluri de strategii de pre-proiectare, care pot conține încadrarea firelor, prototipuri, machete, versiuni beta și multe altele. În acest tutorial, vom crea o versiune machetă înainte de a începe proiectarea șablonului original. Folosesc nuanțele de gri, care permit identificarea blocului mockup.

Canvas

cu ani înainte, în timp ce existau foarte puține sisteme de operare și dispozitive limitate pentru a accesa site-urile web, dimensiunile paginii au fost fixate la una sau două dimensiuni. Astăzi scenariul este complet diferit. Utilizatorii finali accesează site-uri de pe desktop-uri de diferite dimensiuni, telefoane mobile, iPad-uri și tablete. Nu există nici o șansă puteți repara pagina web la o anumită dimensiune în această situație diversă. Dar există unele dimensiuni standard ale industriei aplicate pentru fiecare dispozitiv. Veți găsi încet dimensiunea preferată sau clientul dvs. vă poate referi la un site web pentru a imita dimensiunile.

în acest caz, lucrăm la următoarele dimensiuni. Nu vă faceți griji cu privire la înălțime, deoarece se va schimba în timp. Cu cât adăugați mai mult conținut pe site-ul dvs. web, cu atât va fi mai mare înălțimea.

amintiți-vă, este obișnuit să derulați în jos pagina pe verticală, deci este posibil să nu fixați la o anumită înălțime pentru pagina dvs. web decât dacă nu doriți ca utilizatorul să deruleze pe pagina dvs. de pornire ca Google. Dar, este necesar să nu derulați orizontal. Așadar, limitați-vă lățimea conform standardelor din industrie și nu vă creați cu derularea orizontală.

pentru web, rezoluția este limitată la 72. Există imagini și pagini cu rezoluție mai mare găsite pe iPad-uri și câteva tablete recent. Dar este într-o ocazie rară și este mai bine să rămânem cu 72 având în vedere viteza internetului de pe tot globul.

selectați fișierele utilizând comanda Ctrl + A și desenați ghidajele în mod egal în întregul șablon. Un site web ar trebui să fie bine organizat cu fiecare element aranjat coerent unul cu celălalt. Și liniile directoare aspect site-ul vă ajuta să-l obțină cu ușurință.

pregătește-ți macheta.

plasarea fișierului mockup pe șablonul original vă ajută să economisiți suficient timp. Proiectarea site-ului dvs. web devine atât de ușoară încât veți ajunge să completați cadrul în câteva minute. Cu toate acestea, macheta vă va ajuta doar să proiectați cadrele. Completarea elementelor de design cu detalii, aranjament de tip și aliniere va dura mai mult timp decât desenarea aspectului site-ului web.

schema de culori și alte opțiuni

următorul lucru la după obtinerea cadru gata este de a alege o schemă de culori. Dar, este mai bine să vă pregătiți culorile înainte de a începe să lucrați la design.

totul se reduce la mesajul că, pregătiți-vă armele înainte de a începe proiectarea. Totul, inclusiv pictogramele, imaginile și opțiunile de culoare, ar trebui să fie gata înainte de a începe să lucrați. Organizarea și planificarea muncii dvs. va economisi mai mult timp și se va concentra pe Proiectare fără obstrucție între ele.

alegerea culorilor poate fi alegerea unui designer dacă compania este nouă și nu are o identitate corporativă înainte. Clienții dau o idee despre ce nuanțe Doresc logo-ul sau fundalul ar trebui să fie în unele cazuri. În ceea ce privește companiile existente în care este posibil să fie nevoie să reproiectați un întreg site web, este posibil să trebuiască să alegeți aceleași culori ca și nevoile clientului.

există numeroase site-uri care vă pot ajuta să alegeți milioane de scheme de culori din arhive. Încercați următoarele site-uri web pentru a vă bucura de o gamă largă de combinații de culori.

culoare.adobe.com

Colourlovers.com

aici am ales câteva nuanțe de albastru pe care să le folosesc pentru site. Întregul site web va fi planificat în următoarea schemă de culori. Nu uitați să alegeți trei sau patru combinații de culori diferite, deoarece nu știm ce culoare va prefera clientul. Odată ce clientul finalizează o schemă de culori, salvați valorile nuanței și asigurați-vă că culorile joacă un rol vital în fiecare verticală a organizației, în special în identitatea corporativă.

procesul de proiectare

există multe modalități de a-ți continua designerii. Nu există reguli de aspect greu și rapid pentru a defini sau a urma procesul de proiectare; este în mare parte un proces pe care designerul îl va alege pentru confortul său.

unii designeri doresc să construiască blocuri întregi și cadre și începe să lucreze la detalii în a doua etapă, urmată de tipul și în cele din urmă alinieri și ajustări. Unora le place să termine o parte a paginii la un moment dat și să o ducă la următoarea parte. Urmăm al doilea stil.

vom termina site-ul în următorii pași

• antet & subsol
• ce facem
• servicii
• formular
• știri
• subsol

antet & subsol

regula generală pentru a defini dimensiunile antetului sau bannerului este lăsată creativității tale. Conform ultimelor tendințe, site-urile web apar cu o imagine uriașă care acoperă întregul ecran al computerului. Stilul este denumit imagine erou, care a devenit destul de popular recent.

în acest caz, am început cu 120 pixeli înălțime antet și o înălțime de 550 de pixeli pentru banner. Lățimea trebuie să se potrivească cu dimensiunea documentului.

desenele cu culoare solidă au un aspect plat care nu merge bine cu cadre sau imagini mai mari. Pentru a evita aspectul plat, am aplicat un strat de suprapunere gradient deasupra Bannerului. Oferă Bannerului o adâncime care se transformă încet de la o umbră la alta.

apoi, am început să importăm sigla și să o plasăm în colțul din stânga sus al antetului și un alt logo mai mare în centrul Bannerului. De asemenea, puteți observa formele vectoriale ale aspectului site-ului web din colțul din dreapta sus, care sunt utilizate pentru a partaja legăturile de socializare.

în această etapă, am terminat adăugarea tipului în partea de Banner antet &. Numele companiei, mesajul mărcii, cu link-uri și servicii, sunt adăugate în text. De asemenea, puteți observa un buton transparent pe Banner.

text simplu sau prea mult de tip fără caracteristici speciale va strica aspectul paginii dvs. web; pagina va plictisi în curând utilizatorul, ceea ce îl poate lăsa să părăsească site-ul dvs. rapid. Consultați forma vectorială pe care am adăugat-o la linkurile de servicii din partea dreaptă sus a bannerului. Stilul este simplu, dar umple golul evitând aspectul banal.

alegeți o imagine adecvată afacerii. Există milioane de imagini stoc disponibile pe web și nu va dura prea mult timp pentru a găsi o imagine care să se potrivească cerințelor dvs.

în cazul meu, am găsit o imagine de înaltă calitate, care cred că va merge bine cu site-ul meu. Nu am o temă de afaceri pentru site-ul web, așa că sunt liber să aleg orice imagine care arată bine pe postarea Bannerului.

încercați să descărcați câteva imagini HD de pe site-urile gratuite de imagini de stoc prezentate mai jos

www..com.

amestecarea este o artă pe care ar trebui să o stăpânești pentru a produce bannere frumoase. Aici am amestecat trei straturi pentru a obține efectul prezentat în imaginea de mai sus. Iată ce am făcut

• așezați stratul de imagine deasupra bannerului de culoare albastră
• plasați suprapunerea gradientului deasupra imaginii
• schimbați opacitatea imaginii cu 40% și schimbați modul de amestecare la diferență.
• consultați paleta de straturi din imaginea de mai sus pentru a înțelege modul în care straturile sunt stivuite unul pe celălalt.

acesta este modul în care antetul & Banner-ul va arata ca tocmai am terminat de lucru pe ea. Lucrăm la o parte dintr-o dată și este timpul să trecem la nivelul următor.

alinierea este crucială atunci când vine vorba de tip; aveți o idee despre cum ar trebui să arate site-ul dvs. și textul ar trebui aliniat înainte de a-l începe. La acest nivel, am folosit două cadre de text diferite, ambele aliniate la stânga.

următorul pas este proiectarea părții servicii a paginii web. Am proiectat o stea metalică în nuanțe de gri pentru a prezenta diverse servicii ale companiei. Intenția din spatele utilizării simbolului stea este serviciile de 5 stele.

când vine vorba de alinierea textului, Ghidurile sunt cei mai buni prieteni ai tăi. Coerența în cadrul tipului și obiectelor poate fi obținută prin utilizarea bună a spațiului alb și a decalajelor egale între elementele de proiectare. Am folosit multe linii directoare privind aspectul site-ului web pentru a vedea că toate obiectele din cadru ar trebui să mențină lacune și distanțe adecvate, ceea ce scoate la iveală o cantitate echitabilă de spațiu alb.

următorul pas al designului nostru este crearea câmpului formularului. În acest caz, lucrez opus metodei pe care am folosit-o în proiectarea Bannerului. Vom plasa stratul de imagine sub stratul colorat solid și vom aplica un strat de gradient deasupra celor două straturi pentru a obține un aspect mai bun. Redarea cu modurile de amestecare este întotdeauna esențială în timp ce plasați imagini mai mari.

alegerea imaginilor pentru acest site nu are o temă specifică legată de acesta. Cred că această imagine va ajuta site-ul să arate mai bine.

plasați imaginea sub stratul de fundal colorat. Pentru a fixa imaginea exact la dimensiunea stratului colorat, Utilizați opțiunile de mascare a stratului.

aruncați o privire la paleta de straturi din imaginea de mai sus. Stratul solid de culoare albastră se află în partea de sus a imaginii, modul de amestecare este convertit în suprapunere și opacitatea este redusă la 65%.

am folosit harta gradient pe partea de sus a celor două straturi. Modul de amestecare este schimbat în nuanță, iar opacitatea rămâne aceeași.

caseta formularului este gata, ceea ce ne aduce la sfârșitul celui de-al patrulea nivel în designul site-ului nostru web.

nivelul nostru următor este format din două cadre de text simple. Acesta seamănă cu nivelul doi al paginii web, și am folosit aliniate cele două casete similare cu partea de sus. Menținerea coerenței în aliniere este o modalitate bună de utilizare a spațiului alb.

pe măsură ce am ajuns la partea finală a paginii, este timpul să ne uităm din nou la dimensiunile subsolului. Designerul trebuie să planifice despre înălțimea subsolului pe baza legăturilor pe care ar trebui să le folosească acolo. În acest caz, am dat o înălțime de 170 de pixeli subsolului meu. Lățimea rămâne aceeași ca și site-ul web.

plasați link-uri și imagini ca pe dvs. cerință.

cu aceasta, am încheiat partea de proiectare a site-ului nostru. Combinațiile de culori pe care le-am folosit sunt minime; folosim mult spațiu alb în designul nostru și adăugăm text simplu cu fonturi minime. Intenția este de a proiecta o pagină web curată, care sperăm că este îndeplinită.

vă rugăm să aruncați o privire la designul întregii pagini de mai jos încă o dată.