7 Photoshop Tips til design af rene og moderne hjemmesider
Rent, elegant og smukt webdesign er ofte et spørgsmål om personlige perspektiver. Jeg kigger på hundredvis af hjemmesider hver uge, og flere af dem står ud for mig, men ikke alle er nødvendigvis effektive.
Alt for ofte koger designere et koncept ned for langt og producerer et sidste design, der kun er tekst og et net. Mens disse minimale designs har deres æstetiske appel, især når de er parret med fremragende typografi, risikerer de at være uden varsel.
Personlige udtalelser til side er der visse funktioner i et design, der gør det muligt at mærke stolt som rent eller moderne og forbedre dets brugbarhed og lighed på universelt niveau. Enkelhed er ikke en design trend, men snarere en egenskab af godt design.
Photoshop giver os et alsidigt sæt værktøjer til at skabe dybde og interesse og inviterer os til at integrere subtile detaljer, hvor vi ville forlade et tomt rum. Du behøver kun en håndfuld af disse værktøjer til at indføje kvaliteterne af moderne design i et layout. Ved at mestre dem kan du oprette rene design, der udtrykker funktionalitet klart og effektivt.
1. plads
Hvidt rum giver mulighed for visuel adskillelse af designelementer uden brug af kasser, linjer eller yderligere grafik og er muligvis det vigtigste aspekt ved moderne design. Det er vigtigt at præsentere indhold og læsbarhed. Når det bruges korrekt, giver det hvide rum din layout sin rene og elegante følelse.
Guider og gitter er tilgængelige i Photoshop for at hjælpe dig med at placere elementer præcist. Gitteret overlejrer hele dit dokument, mens guiderne kan indstilles manuelt. Brug retningslinjer tidligt til at indstille usynlige grænser, margener og polstring, der bruges til at definere dit hvide rum.
Opret en guide ved at trykke på Ctrl + R (Win) eller Cmd + R (Mac) for at aktivere linealen og derefter klikke på øverste eller venstre linjal for at trække en retningslinje til den ønskede position. Her er nogle yderligere genveje, der hjælper dig med at administrere guider, mens du arbejder:
- For at flytte en retningslinje: Ctrl (Win) eller Cmd (Mac) og klik på vejledningen
- Vis / Skjul guider: Hit Ctrl +; (Win) eller Cmd +; (Mac)
- Vis / skjul rutenettet: Tryk Ctrl + '(Win) eller Cmd +' (Mac)
Aktivér dine Smart Guides under Vis> Vis> Smart Guides . Smart Guides vises automatisk, når du tegner en form, justerer tekst eller skaber et valg eller en dias, og du sparer tid på arbejdet med at oprette retningslinjer for disse elementer.
Justering af genstande ved hjælp af hjælpelinjer og gitter gør dit design lettere at fordøje og giver det samlede resultat et mere poleret look.
2. Dybde
Dybde skabt med lys og skygge gør dine elementer skarpe og virkelige. Skyggeeffekter kan anvendes på ethvert objekt, et valg eller et tekstlag, men det er et valg at vælge en farve, der matcher baggrunden, og afstå standard sorten.
Ikke alle skygger skal være mørke. Kombiner den indvendige skygge-effekt med en hvid eller lyst drop skygge for at skabe en nedsænket eller "letterpress" -fejl med tekst eller formularfelter.
3. Detalje
Både gradientværktøjet og gradientlagseffekterne spiller en stor rolle i rent og moderne design. Gradienter er til stede i alle aspekter af moderne styling, fra skygger og højdepunkter til baggrunde og knapper.
For at få adgang til gradientværktøjet skal du trykke på Skift + G. For at oprette en gradient, klik på lærredet, træk og slip. Dette værktøj bruges bedst til store områder som baggrunde, lys eller radiale skygger. Når du arbejder med individuelle elementer, såsom sektioner, knapper eller ikoner, er Gradient Overlay-lag-effekten et mere effektivt middel til at etablere overfladeformater eller teksturer. Dette værktøj åbnes ved at dobbeltklikke på elementlaget og markere afkrydsningsfeltet "Gradient Overlay".
Brug denne effekt til at give en subtile dimension til dine knapper og navigeringsstænger eller for at efterligne stil og tekstur af papir eller metaller.
4. Definition
Ved overdefinerede kanter og grænser sikrer du, at dine elementer har den rette kontrast.
Stroke-lag-effekten vil skitsere elementer som tekst eller knapper, hvor du har brug for en lige vægtet oversigt på alle sider. Ved at bruge denne effekt frigøres de indvendige og drop-skygger for at udvide dine muligheder.
Det er fristende at gå til penneværktøjet for at tegne lige linjer og vandrette regler, men hvis du ønsker at anvende gradienter eller skygger på linjen, er det lettere at bruge Single Row Marquee Tool, som er gemt diskret bag det Rectangular Marquee Tool . Brug værktøjet Single Row på et nyt lag og en hvid eller lysende dropshadow til at oprette markeringslinjer langs sektionsgrænser eller separatorer, hvor du ikke kan anvende en effekt på selve elementet.
5. Renter
Ren og moderne behøver ikke at være lige kedelig, hvid eller minimal. Smidig brug af tekstur og mønster vil gøre dit design skiller sig ud, mens du kommunikerer stil og mærke. Brug subtile teknikker som f.eks. Tilføjelse af støj (Filter> Add Noise) eller Texture Overlay-lag-effekten på baggrundsområder eller grænsefladeelementer for at hjælpe dem med at skille dem fra hinanden. Jo mere virkeligt og klart et element fremkommer, jo mere tiltrækkende er det for seeren.
6. Perspektiv
Perspektiv er den mest underudnyttede teknik i moderne webdesign, simpelthen fordi igangværende tendenser fokuserer konsekvent på symmetri og net. Ved at anvende perspektiv på billeder og elementer i dit design, kan du introducere dybde, dimension, modernisme og interesse for dit design i et enkelt trin.
Perspektiver kan gives til enhver form eller et billede ved at vælge indstillingen "Fri omformning" i højreklikmenuen og klikke på "Warp" -knappen i værktøjslinjen.
Illusionen af perspektiv kan også produceres ved at skabe asymmetriske former eller rammer og bruge gradienter og skygger på passende måde for at placere objekterne fra hinanden.
7. Læsbarhed
Stærk type er godt elsket i design samfundet, og en endnu stærkere komponent i rent design. Det kan erstatte billeddannelse og grafik, som ellers kan overkomplicere et design og formidle den samlede essens af ovennævnte teknikker på en enkel og ligetil måde.
Hvis du vil tilføje teksturer til tekst, skal du konvertere dit tekstlag til et smart objekt først ved at højreklikke på laget og vælge "Konverter til smart objekt." Du er begrænset til lageffekter som standard, medmindre din tekst rasteriseres, en øvelse du vil undgå, selv når designe for skærmen. Konvertering til Smart Objects giver dig mulighed for at anvende filtre og andre teknikker til teksten, samtidig med at du bevarer dine redigeringsfunktioner, hvis du skal ændre, hvad teksten siger senere.
Husk at du har sporings- og kerning-muligheder til rådighed, når du konfigurerer tekstelementer. Selvom din tekst er bestemt til at blive gengivet i CSS, bør du eksperimentere med linje- og bogstavafstand tidligt for at bedre visualisere, hvordan dit indhold vil blive vist inden for det rum, du har givet det. Husk også at bruge "Crisp" eller "Sharp" tekst for at bevare definition og klarhed.
Hvordan du præsenterer dit indhold i rent design er vigtigere end nogen anden stil, simpelthen fordi der er mindre at foregå visuelt for at distrahere seeren. Ved at bruge tipene ovenfor til at rumtekst og -objekter på passende måde, tilføj definition og interesse, og indstil indholdet adskilt fra grænsefladen, vil dit design opnå optimal effektivitet.
Hvad synes du om disse tips og har du andre, du bruger regelmæssigt? Venligst del nedenfor ...