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

Annons

Det finns ett stort antal gratis ikonuppsättningar online, men om du vill ströva bortom rent speciellt bruk finns det också en mängd problem kopplade till dem. Licensiering och bristen på varumärke är bara två av dem.

Även om du inte är en programutvecklare är det en oerhört användbar färdighet att lära sig skapa egna ikoner. Du kan ge din dator en unik hud eller tillhandahålla dina tjänster till samhället och företagsvärlden.

Detta är inte alls en komplett tutorial för ikondesign. Vi kommer precis igång med de grundläggande grunderna - teknik, en designchecklista och en verktygssats för ikondesign.

Ikon Tekniska

Nedan finns några specifikationer som du bör veta om ikonformatet, viktigast av allt bildupplösningar och filformat.

Storlek

Viktigheten av storlek diskuteras ytterligare nedan. För tillfället kommer vi att hålla oss till de tekniska aspekterna.

Ikoner är alltid fyrkantiga. Detta innebär att en rektangulär ikon antingen sträckes ut eller dimensioneras ner för att respektive fylla hela duken eller passa in i den. Hursomhelst sticker mycket rektangulära ikoner ut på ett dåligt sätt. Följande ikonstorlekar är de vanligaste i användning:

• • • 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ändning av 16 x 16, 32 x 32 eller 48 x 48 upplösningar *. Om ingen är tillgänglig kommer den att ändra storlek på den ikon som är närmast i upplösning, upp till 256 x 256. Med skrivbordsupplösningar som stiger allt högre rekommenderas att alltid inkludera större upplösningar. Apple ICNS-formatet stöder storlekarna 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 mest använda filformatet för ikonfördelning ICO. Mac-motsvarigheten är ICNS (Apple Icon Image Format).

Ikondesignlistan

Det finns inte en tutorial 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 konstant flöde. Nedan finns tre stora pelare för att skapa ikoner som har bevisat sanna gång på gång. Om du är ny när du utformar ikoner, se till att du alltid har ikonlistan i åtanke.

Omisskännlig

Framför allt behöver ikoner vara omisskännliga. Förhållandet till din ansökan måste vara uppenbart för alla, mellan tids-, kultur- och åldersskillnader. Bekämpa frestelsen att skapa pråliga ikoner som inte har någon relevans, och klistra 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 i slutet av användaren).

Enhetlighet

Om du utformar en ikonuppsättning ska du hålla designen enhetlig.

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

Storlek

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

För det första måste ikonerna se bra ut och igenkännliga oavsett storlek. Ta ner kontrasten runt sidorna för att undvika trånga kanter och låt viktiga detaljer stå ut tillräckligt för att behålla fokus i den minsta implementeringen av ikonen.

På teknisk nivå är ikoner bäst utformade med hjälp av vektorer, bilder som består av ändlösa skalbara former snarare än en uppsättning bildsammansättning. Om din upplösning är tillräckligt hög kommer bitmappar att göra det lika bra.

Ikonutformningsverktyget

Photoshop är en fantastisk applikation för design av ikoner. Du har (nästan) alla verktyg du behöver för att skapa vektorgrafik eller manipulera bitmappar och tillämpa komplexa effekter och skuggning. Det viktigaste är att följande verktyg är:

Pen Tool

Med pennverktyget kan du skapa skalbar vektorgrafik. Du kan rita en form genom att skapa noder och dra för att justera linjens kurva. Det är svårare att använda än det ser ut, men förmodligen det bästa verktyget du väljer. Vi skrev om pennverktyget tidigare, läste Photoshop Pathing: Hur man använder Photoshop Pen Tool Hur man använder Photoshop Pen Tool Läs mer .

ICO-filformat plug-in

Detta Photoshop-plugin-läge lägger till ICO-filformatet till dina exportinställningar. Installationsmetoden är beroende av din OS- och Photoshop-version, så se till att kontrollera webbplatsen.

Apple Icon Composer

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

Hongkiat: 40+ Handplockade ikondesign Photoshop Tutorials

Designblogg Hongkiat.com har sammanställt en lista med över 40 olika tutorials för design av ikoner för Photoshop. Denna lista täcker 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.

Lagerstilar

Photoshops inbyggda lagerstilar är ett bra sätt att sätta den sista handen på dina ikoner. Öppna fönstret för lagerstil genom att dubbelklicka på ett lager eller högerklicka på det i lageröversikten. Använd en 1px grå takt med 40-50% opacitet för ikonens gränser och lägg dina skuggor på 110 ° för bästa resultat. Försök att inte använda skuggor runt men ikonen, eftersom de flesta operativsystem redan gör detta.

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