Följ de tankar och åsikter som Grafix Studio har kring arbete, livsstil och kunskapskrav som en frilansande webbdesigner!

Gör din egen mapp-ikon

tutorial göra mapp ikon

Många använder mappar som ikoner för att symbolisera vägen till en ny sida som innehåller exempelvis bilder eller musik. Ikoner har gått över från att bara finnas på skrivbordet till att florera på nätet.

Efter att du gjort färdigt denna tutorial har du en bra grundbild som du kan vidareutveckla till din egen kreation. Här lär du dig grundstegen förr att få en ikon som liknar en mapp.

  1. Öppna upp i Photoshop och Duplicera ditt lager ”Bakgrund”
  2. Högerklicka på ditt nya lager och välj Blandningsalternativ (Blending Options) och ställ in följande värden i Övertoningsfärg:


    webbdesign-mapp1
  3. Gå till Verktygsfältet och välj Avrundad Rektangel (Rounden Rectangle). Kör en radie på 5px och rita ut din rektangel:
    webbdesign-mapp2
    webbdesign-mapp3
  4. Vi lägger en snygg gradient på vår mapp. Högerklicka på rektangelns lager och välj återigen Blandingsalternativ >> Övertoningsfärg och ställ in följande värden:
    webbdesign-mapp4
  5. Med lagret markerat, tryck på CTRL + T och välj Perspektiv. Dra på nedre vänstra hörnet tills du får en något liknande:
    webbdesign-mapp5
    webbdesign-mapp6
  6. Duplicera lagret och ta bort Övertoningsfärgen. Ändra dess färg till: #e1d243. Flytta därefter lagret så det ligger under det ”gamla”:
    webbdesign-mapp7
  7. Flytta upp den nya mappen några marginaler:
    webbdesign-mapp8
  8. Rita ut några vita rektanglar och placera de mellan båda lagren. Lägg en diskret ram runtom de vita rektanglarna:
    webbdesign-mapp9
  9. Vi skriver nåt på mappen för att ge den en personlig känsla. Skriv med valfritt typsnitt, men skriv med vit färg:
    webbdesign-mapp10
  10. Fortfarande något som fattas. Duplicera ditt textlager och gör det undre textlagret till mörkgrått. Flytta därefter upp den svarta texten 1px. Du får en diskret skuggeffekt:
    webbdesign-mapp11

Sådär. En enkel mapp med innehåll. Du kan t.ex. använda denna typ av ikon för att symbolisera olika underkategorier på din hemsida.

Andra Photoshop Tutorials

Mobilanpassa din hemsida! Lansera din restaurang i mobilen!

Vill du veta hur jag jobbar?

 

Följ Grafix Studio på Facebook

Värt att besöka!

Kundjobb

Besök portföljen »

Om webbdesigner Antonio Riveras

Tjena allihop, mitt namn är Antonio Riveras och jag bor i den vackra staden Malmö.

Som ni kanske redan har förstått så är jag en webbdesigner / grafiker. Jag är till mestadels självlärd, men har genomgått en treårig utbildning i Multimediateknik på Lunds Tekniska Högskola.