20 Photoshop-tips för webbdesign

Uttrycket 'Jag önskar att jag var bättre på Photoshop' uttalas av webbdesigners unga och gamla. Ändå är det något som är fel i det uttalandet. Det innebär att vår skicklighet i ett program skulle göra oss till bättre designers.

Verkligheten är att det bara är att känna till grunderna i Photoshop är tillräckligt för webbdesignhjälte. Vad händer om vi tog ett steg tillbaka från att lägga till brus och infoga text för att utvärdera vår effektivitet med Photoshop?

För enkelt för dig, nivå 42 PSD Sage? Inte din kopp te, Fireworks Fanboy? Jag håller inte med.



01. Skissa först

Du kan verkligen låta dessa klotter flyga med fyra upp mallar, med eller utan rutnät

Du kan verkligen låta dessa klotter flyga med fyra upp mallar, med eller utan rutnät

Ironiskt nog innebär det viktigaste Photoshop-tipset inte ens att slå på din dator. Jag kan garantera att du spenderar mindre tid på att leka med layout genom att göra några skisser. Köp en solid skissbok eller skriv ut dina egna mallar ( raincreativelab.com/paperbrowser ) och åka till stan och göra några grova layouter. Översätt sedan dessa skisser i Photoshop.

02. Använd ett rutnät

978.gs tillhandahåller mallar för flera bredder (mobil, liten skärm, rymlig)

978.gs tillhandahåller mallar för flera bredder (mobil, liten skärm, rymlig)

Justering och storleksförhållande är två attribut som din design ska ta itu med. Sätt upp dig själv med ett rutnät från början. De flesta nätsystem har PSD-mallar med guider för kolumner och takrännor. Här är en massa: 960 pixlar , 978px , 1140px .

03. Slå på snapping

Det finns verkligen inget värre än att vara av med en pixel. Aktivera snapping genom att gå till Visa> Snap och sedan Visa> Snap to> Guides. Om du har implementerat ett rutnät är det geni att knäppa till guider. Med mindre knepande på skärmen behöver du inte de trendiga designerglasögonen.

04. Organisera din PSD

Det kan verka som ett besvär om du

Det kan verka som ett besvär om du inte är van vid det, men att namnge lager och använda mappar är vad alla coola barn gör

Är det ont att namnge dina lager och lägga dem i mappar? Säker. De flesta designers köper in logiken att du kommer att spendera mer tid på att göra det, men det finns skäl som inte stämmer. Om du arbetar själv sparar du tid på att leta efter saker senare. Om du arbetar med andra kommer du att göra dem en tjänst när de söker. Om du namnge lager när du går, är det inte svårt att hålla jämna steg med det i motsats till att göra det efter.

05. Huvudgenvägar

Nyckeln till Photoshop-stjärnan är effektivitet. Det är inte bara att veta hur man gör något, utan hur man gör något snabbt så att du använder värdefull tid för att utföra en funktion. Några specifika genvägar att veta? Börja med Spara för webben: Cmd + Opt + Skift + S , Bildstorlek: Cmd + Opt + I , Canvas storlek: Cmd + Opt + C . Glöm inte nivåer: Cmd + L. och nyans / mättnad: Cmd + U .

06. Var subtil - allt med måtta

Lägg till filter som brus och släpp skuggor med lätthet som om du knappt använder dem

Lägg till filter som brus och släpp skuggor med lätthet som om du knappt använder dem

Som designers tenderar vi att misskreditera publikens förmåga att uppfatta den effekt vi försöker uppnå. Så vårt svar är att lägga till för mycket buller, göra hårda lutningar och använda för mycket kontrast. Den perfekta blandningen är när du använder effekter med viss nåd och, ännu viktigare, självkontroll.

07. Använd lagerkompositioner och smarta objekt

Tyvärr har Photoshop inte ett bra system för kompositioner som navigeringstillstånd. Du kan dock använda Layer Comps (Window> Layer Comps) för att göra versioner av layouter ganska bra. Smarta objekt (lager> smarta objekt> konvertera till smarta objekt) kommer att sammanställa flera element i en fil som kan redigeras utanför din PSD.

08. Håll integrerade former vektorsmarta föremål

Det finns inget värre än att 'göra logotypen större' och inse att du inte kan eftersom det är en rasteriserad grafik i din PSD, eller försöker ändra storlek på en knapp bara för att upptäcka att den inte längre är en form. Lösningen är att hålla dessa former i vektorformat, och du kan göra det genom att importera dem som vektorsmarta objekt eller konvertera dem till smarta objekt innan du rasteriserar dem.

09. Använd masker på ett intelligent sätt

Globaliserande masker ger en söt Photoshop-effektivitet. Om du till exempel har fem skjutbilder i din design, gruppera dem och lägg en mask på mappen istället för varje enskilt lager. Det är en mycket överlägsen lösning än att sikta igenom 20 masker, utan att veta vilka som gör vad.

10. Förfina masker för enkel hårsilhouering

Krusigt hår? Rädsla inte mer. Använd verktyget Förfina mask istället för att spendera oräkneliga timmar på att silhuettera för hand

Krusigt hår? Rädsla inte mer. Använd verktyget Förfina mask istället för att spendera oräkneliga timmar på att silhuettera för hand

Vem avskyr inte att silhuett hår? Här är ett knep som fungerar bra på olika storlekar på bilder, oavsett hur galen frisyren är. Gör en grov mask av personen och gå sedan till Välj> Förfina mask (Förfina kanten i versioner tidigare än CS5). Spela med Radius och se magin utvecklas.

bästa bärbara datorn för Adobe Creative Cloud

11. Uppfatta droppskuggor exakt

Piggybacking på det sista tipset är tecknet på en amatördesigner när du ser droppskuggor alldeles för mörka. Det betyder att objektet är i rampljuset. Förmodligen inte fallet. Var noga med att minska opaciteten, och ännu bättre, använd en färg som är en mörk nyans av bakgrunden bakom den istället för svart.

12. Lär dig själv pennverktyget

PSDTuts har en mycket omfattande handledning om hur man behärskar pennverktyget

PSDTuts har en mycket omfattande handledning om hur man behärskar pennverktyget

Det är värt tiden att bli bra på att använda pennverktyget. Det är en av de saker vi tenderar att undvika, men om du vill ta bort några skarpa masker eller lägga till illustrationer i dina mönster är pennverktyget ditt vapen. Borsta upp dina färdigheter med den här handledningen.

13. Skärpa foton med högpass

Du kan behöva massera det, men High Pass med en överläggning kan återuppliva de skrämmande ärvda bitmapparna

Du kan behöva massera det, men High Pass med en överläggning kan återuppliva de skrämmande ärvda bitmapparna

Redo för lite Photoshop Magic? Så du har fått ett lågupplöst foto från din klient och det är bara för suddigt att använda. Duplicera lagret och gå sedan till Filter> Annat> Högpass. Välj något lågt (cirka 2,0) och ställ sedan in lagrets blandningsläge till överlagring. Om det är för skarpt, minska opaciteten. Resultaten kan variera.

14. Var konsekvent

0to255.com är ett lysande verktyg av Shaun Chapman. Ange ett hex-värde för att se nyanser mörkare och ljusare, allt enkelt att kopiera

0to255.com är ett lysande verktyg av Shaun Chapman. Ange ett hex-värde för att se nyanser mörkare och ljusare, allt enkelt att kopiera

Fem olika blues, och ingen av dem är från märkesguiden? Var noga med att kontrollera färgerna som används, särskilt när du exporterar bilder. Ett annat praktiskt verktyg för färgnoggrannhet är 0to255.com , som ger hex-värden som är harmoniskt ljusare och mörkare av en viss färg.

15. Standardinställningarna är inte standard

Du

Du vet när du ser en skugga vars inställningar inte har berörts. Arbeta med dessa inställningar varje gång

En av de svåraste sakerna att avvärja är Photoshop-autonomi. Om du behandlar Effekt-panelen som en checklista med önskade stilar, skapar du troligtvis inte deras inställningar till ett rimligt tillstånd. Standardinställningarna är vanligtvis hårda för att visa sitt utseende. Mjuka upp mängderna och ändra vinklarna.

16. Det är i detaljerna

En integrerad del av att göra ditt hantverk perfekt i Photoshop är att göra din design 'pixel perfekt'. Gå tillbaka genom din PSD och leta efter suddiga kanter på rundade rektanglar eller inkonsekventa vikter. Det lönar sig att ta sig tid i Photoshop och göra din layout perfekt (snarare än i HTML / CSS).

17. Skriv om historia

Är det inte så lummigt när du öppnar historikpanelen och du behöver 21 steg tillbaka, bara för att se att den stannar vid de senaste 20? Förhindra att det händer igen genom att gå till Inställningar> Prestanda och öka värdet för historia. Ni superhjältar med webbdesign behöver dock inte använda historikpanelen, eller hur?

18. Anpassa din arbetsyta

Du kan spara dina menyer och kortkommandon samt panellayouten genom att skapa din egen arbetsyta

Du kan spara dina menyer och kortkommandon samt panellayouten genom att skapa din egen arbetsyta

Photoshop är inte chefen för dig, pixelcrafter. Om du föredrar att ha dina verktyg till höger och endast din Lagerpanel är öppen, gör det. Du kan även ändra färgen runt duken genom att högerklicka på den. Spara din arbetsyta via menyn längst upp till höger i applikationen.

19. Organisera dina filer

Precis som att namnge dina lager och mappar, att namnge dina filer på rätt sätt förhindrar mycket stridigheter. Är det inte svårt att skilja vilken PSD som är den 'senaste' när de har beskrivningar som 'NEWEST_round4.psd' eller 'FINAL_USE_THIS_ONE.psd'? Behåll en PSD och vara klar med den. Arkivera resten om du verkligen behöver det.

Den goda nyheten är att vi webbdesigners har använt Photoshop för att skapa några vackra tekniker. Det är också de dåliga nyheterna, för vi är benägna att kopiera varandras nya hethet. Photoshop är ett underbart verktyg, men använd med försiktighet. Bara för att du kan lägga en lutning på något betyder inte att du borde. Experimentera med inställningarna och starta dina egna trender.

Ord : Dan Rose |

Dan Rose är Photoshop Etikett kille och en gränssnittsdesigner på WSOL . Denna artikel uppträdde ursprungligen i nätmagasin .