10 enkla tips för att skapa egna coola ikoner med Photoshop

Det finns ett stort antal gratis ikonuppsättningar online, men om du vill ströva bortom ren särskild användning finns det också ett antal problem med dem. Licensiering och brist på branding är bara två av dem.

Även om du inte är en mjukvaruutvecklare, lär du dig att skapa egna ikoner är en oerhört användbar skicklighet. Du kan ge din dator en unik hud eller ge dina tjänster till samhället och företagslivet.

Det här är inte alls en komplett ikondesigntutorial. Vi börjar bara komma igång med de rudimentära grunderna - tekniker, en design checklista och en ikon design verktygssats.

Ikon Teknik

Nedan följer några specifikationer som du borde veta om ikonformatet, viktigast av bildresolutioner och filformat.

Storlek

Betydelsen av storlek diskuteras vidare nedan. För närvarande håller vi oss till de tekniska aspekterna.

Ikoner är alltid kvadratiska. Det betyder att en rektangulär ikon antingen sträcker sig eller formas till respektive fyller hela duken eller passar in den. Hur som helst, utmärker sig mycket rektangulära ikoner på ett dåligt sätt. Följande ikonstorlekar är de vanligaste som används:

• • • 16 x 16 px * **
    • 24 x 24 px
    • 32 x 32 px * **
    • 48 x 48 px * **
    • 64 x 64 px
    • 96 x 96 px
    • 128 x 128 px **
    • 256 x 256 px **
    • 512 x 512 px **

Windows XP rekommenderar användningen av 16 x 16, 32 x 32 eller 48 x 48 upplösningar *. Om ingen finns tillgängliga, kommer den att ändra storlek på ikonen som är närmast i upplösning, upp till 256 x 256. Med skrivbordsupplösningar som stiger någonsin högre rekommenderas det alltid att inkludera större upplösningar. Apple ICNS-formatet stöder storlekar 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 och till och med 512 x 512 **.

Filformat

För Windows är det vanligaste filformatet för ikonfördelning ICO. Mac-motparten är ICNS (Apple Icon Image Format).

Icon Design Checklist

Det finns inte en handledning för att designa den perfekta ikonen, gång på gång. Olika teman och mönster kräver olika tillvägagångssätt, och den nuvarande trenden är i ett tillstånd av konstant flöde. Nedan finns tre stora pelare av ikon skapelse som har bevisat sann tid och tid igen. Om du är ny på att utforma ikoner, se till att du alltid håller ikonens checklista i åtanke.

Omisskännlig

Framför allt måste ikoner vara omisskännliga. Relationen till din ansökan måste vara uppenbar för alla, över tid, kultur och åldersskillnader. Bekämpa frestelsen att skapa prickiga ikoner som inte har någon relevans och hålla fast med en enkel, solid och uppenbar design.

Se inte detta som ett hinder för din kreativitet; ikoner kan vara vackra och tankeväckande, men bör inte vara öppna för tolkning (läs: gissning vid användarens slut).

Enhetlighet

Om du designar en ikonuppsättning, behåll designen enhetlig.

Se till att du har en gemensam tråd som kopplar samman dessa ikoner och visar synergin med användarna. hela måste vara större än summan av delarna.

Storlek

Ikoner skapas alltid i flera storlekar. Detta påverkar designen på flera sätt än en.

Till att börja med måste ikoner se bra och igenkännbara oavsett storlek. Ta ner kontrast runt sidorna för att undvika skrynkliga kanter och få viktiga detaljer att visa sig tillräckligt för att behålla fokus i minsta tillämpning av ikonen.

På en teknisk nivå är ikonerna bäst utformade med hjälp av vektorer, bilder som består av oändliga skalbara former, snarare än en uppsättning kompositioner av pixlar. Ändå, om din upplösning är tillräckligt hög, kommer bitmapar att göra lika bra.

Icon Design Toolset

Photoshop är en bra applikation för att designa ikoner. Du har (nästan) alla verktyg du behöver för att skapa vektorgrafik eller manipulera bitmapar och tillämpa komplexa effekter och skuggning. Viktigast kommer följande verktyg att finnas:

Penverktyg

Med Pen-verktyget kan du skapa skalbar vektorgrafik. Du kan rita en form genom att skapa noder och dra för att justera kurvan på linjen. Det är svårare att använda än det ser ut, men förmodligen det bästa valet. Vi skrev om penningverktyget tidigare, läs Photoshop Pathing: Så här använder du Photoshop Pen Tool Så här använder du Photoshop Pen Tool Så här använder du Photoshop Pen Tool Läs mer .

ICO File Format Plug-In

Denna Photoshop-plugin lägger till ICO-filformatet i dina exportinställningar. Installationsmetoden är beroende av din OS- och Photoshop-version, så var säker på att kontrollera webbplatsen.

Apple Icon Composer

Tyvärr finns det inget sådant verktyg för Apples ICNS-filformat. Detta kostnadsfria verktyg tar hand om problemet istället. Den levereras med Apple Xcode-paketet, som du kan ladda ner efter en (tråkig) registreringsprocess. Eller du kan Google för nedladdningen.

Hongkiat: 40+ Handplockade Icon Design Photoshop Tutorials

Designblogg Hongkiat.com har sammanställt en lista över över 40 olika Photoshop-ikondesigntutorials. Denna lista omfattar alla typer av ikoner och flera svårighetsgrader. Bläddra i listan för inspiration, och extrapolera de tekniker som används för att förverkliga dina egna mönster.

Lagstilar

Photoshops inbyggda lagerstorlekar är ett utmärkt sätt att få den sista kontakten med dina ikoner. Öppna skivformatrutan genom att dubbelklicka på ett lager eller högerklicka på det i skiktöversikten. Använd en 1px grå stroke med 40-50% opacitet för din ikons gränser och sätt dina skuggor på 110 ° för bästa resultat. Försök att inte använda skuggor runt ikonen, eftersom de flesta operativsystem redan gör det här.

Har du några andra rudimentära tips om ikondesign? Låt oss veta vad du tycker i kommentarfältet nedan!

Utforska mer om: Adobe Photoshop.