7 Photoshop tips för att designa rena och moderna webbplatser
Ren, elegant och vacker webbdesign handlar ofta om personligt perspektiv. Jag tittar på hundratals webbplatser varje vecka, och flera av dem står ut för mig, men inte alla är nödvändigtvis effektiva.
Alltför ofta koka konstruktörer ett koncept ner för långt, vilket ger en slutlig design som inte är mer än text och ett rutnät. Medan dessa minimala mönster har sin estetiska överklagande, speciellt när de kombineras med utmärkt typografi riskerar de att bli oförmögna.
Personliga åsikter åt sidan, det finns vissa egenskaper i en design som gör att den stolt kan märkas som ren eller modern och förbättra användbarheten och likheten på universell nivå. Enkelhet är inte en design trend, utan snarare ett attribut för bra design.
Photoshop ger oss en mångsidig uppsättning verktyg för att skapa djup och intresse och uppmanar oss att integrera subtila detaljer där vi skulle lämna ett tomt utrymme. Du behöver bara en handfull av dessa verktyg för att införa kvaliteterna av modern design i en layout. Genom att behärska dem kan du skapa rena mönster som uttrycker funktionaliteten tydligt och effektivt.
1. Mellanslag
Vitt utrymme möjliggör visuell separation av designelement utan användning av lådor, linjer eller ytterligare grafik och är möjligen den viktigaste aspekten av modern design. Det är viktigt att presentera innehåll och läsbarhet. När det används korrekt, ger det vita utrymmet sin rena och eleganta känsla.
Guider och galler finns i Photoshop för att hjälpa dig att positionera element exakt. Rutnätet överlappar hela dokumentet medan guiderna kan ställas in manuellt. Använd riktlinjer för att snabbt ange osynliga gränser, marginaler och vadderingar som används för att definiera ditt vita utrymme.
Skapa en guide genom att trycka på Ctrl + R (Win) eller Cmd + R (Mac) för att aktivera linjalen och klicka sedan på den övre eller vänstra linjalen för att dra en riktlinje till önskad position. Här är några ytterligare genvägar som hjälper dig att hantera guider medan du arbetar:
- För att flytta en riktlinje: Ctrl (Win) eller Cmd (Mac) och klicka på guiden
- Visa / Dölj guider: Hit Ctrl +; (Win) eller Cmd +; (Mac)
- Visa / Dölj rutnätet: Hit Ctrl + '(Win) eller Cmd +' (Mac)
Aktivera dina smarta guider under Visa> Visa> Smarta guider . Smart Guides visas automatiskt när du ritar en form, justerar text eller skapar ett urval eller en bild och sparar arbetet med att ställa in riktlinjer för dessa element i förväg.
Justering av objekt med hjälp av guider och galler gör din design lättare att smälta och ger det övergripande resultatet ett mer polerat utseende.
2. Djup
Djup skapad med ljus och skugga gör att dina element verkar skarpa och verkliga. Skuggeffekter kan appliceras på valfritt objekt, urval eller textlager, men tricket är att välja en färg som matchar bakgrunden och avstå från standard svart.
Inte alla skuggor måste vara mörka. Kombinera den inre skugg-effekten med en vit eller ljusfärgad dropskugga för att skapa en nedsänkt eller "letterpress" -fel med text- eller formulärfält.
3. Detalj
Både gradientverktyget och gradientlagrets effekter spelar en stor roll i ren och modern design. Gradienter är närvarande i alla aspekter av modern stil, från skuggor och höjdpunkter till bakgrund och knappar.
För att komma åt gradientverktyget, tryck Shift + G. För att skapa en lutning, klicka på duken, dra och släpp. Detta verktyg används bäst för stora områden som bakgrund, ljus eller radiella skuggor. När du arbetar med enskilda element som sektioner, knappar eller ikoner är överföringslagrets effekt ett effektivare sätt att skapa ytformat eller texturer. Detta verktyg öppnas genom att dubbelklicka på elementskiktet och markera kryssrutan "Gradient Overlay".
Använd denna effekt för att ge en subtil dimension till dina knappar och navigeringsfält, eller för att efterlikna stilen och strukturen i papper eller metaller.
4. Definition
Genom överdefinierande kanter och gränser ser du till att dina element har riktig kontrast.
Stroke-lagseffekten kommer att skissera element som text eller knappar där du behöver en lika viktad kontur på alla sidor. Med hjälp av denna effekt kommer du att frigöra skuggorna Inner och Drop för att förlänga dina alternativ.
Det är frestande att gå till pennverktyget för att rita raka linjer och horisontella regler, men om du vill tillämpa gradienter eller skuggor på linjen är det lättare att använda Single Row Marquee Tool, som är lagrat diskret bakom Rectangular Marquee Tool . Använd Single Row-verktyget på ett nytt lager och en vit eller ljusfärgad droppskugga för att skapa markeringslinjer längs sektionsgränser eller separatorer där du inte kan tillämpa en effekt på själva elementet.
5. Ränta
Ren och modern behöver inte vara lika tråkig, vit eller minimal. Snygg användning av textur och mönster gör att din design sticker ut, samtidigt som du kommunicerar stil och varumärke. Använd subtila tekniker som att lägga till ljud (Filter> Add Noise) eller Texture Overlay-lagseffekten på bakgrundsområden eller gränssnittselement för att hjälpa till att skilja dem från varandra. Ju mer verkligt och tydligt ett element visas, ju mer lockande det är för tittaren.
6. Perspektiv
Perspektiv är den mest underutnyttjade tekniken i modern webbdesign, helt enkelt för att löpande trender konsekvent fokuserar på symmetri och nät. Genom att tillämpa perspektiv på bilder och element i din design kan du presentera djup, dimension, modernism och intresse för din design i ett enkelt steg.
Perspektiv kan ges till någon form eller bild genom att välja alternativet "Gratis omvandlingsväg" i högerklick-menyn och klicka på "Warp" -knappen som finns i verktygsfältet.
Illusionen av perspektiv kan också produceras genom att skapa asymmetriska former eller ramar och använda gradienter och skuggor på lämpligt sätt för att placera objekten ifrån varandra.
7. Läsbarhet
Stark typ är väl älskad i designgemenskapen, och en ännu starkare komponent i ren design. Det kan ersätta bilder och grafik som annars kan komplicera en design och förmedla den övergripande essensen av ovanstående tekniker på ett enkelt och rakt sätt.
Om du vill lägga till texturer i text konverterar du textlagret till ett smart objekt först genom att högerklicka på lagret och välja "Konvertera till smart objekt". Du är begränsad till lagereffekter som standard om inte din text rasteriseras, en övning du vill undvika, även när du utformar för skärmen. Omvandling till smarta objekt gör att du kan tillämpa filter och andra tekniker på texten samtidigt som du bevarar dina redigeringsmöjligheter om du behöver ändra vad texten säger senare.
Kom ihåg att du har spårnings- och kerningalternativ tillgängliga för dig när du konfigurerar textelement. Även om din text är avsedd att reproduceras i CSS, bör du experimentera med linje och brevavstånd tidigt för att bättre visualisera hur ditt innehåll kommer att visas inom det utrymme du har gett det. Kom också ihåg att använda "Crisp" eller "Sharp" text för att behålla definition och tydlighet.
Hur du presenterar ditt innehåll i ren design är viktigare än någon annan stil, helt enkelt för att det är mindre visuellt att distrahera tittaren. Genom att använda tipsen ovan för att rymma text och objekt på lämpligt sätt, lägg till definition och intresse och sätt innehållet ifrån gränssnittet, kommer din design att uppnå optimal effektivitet.
Vad tycker du om dessa tips och har du andra som du använder regelbundet? Vänligen dela nedanför ...