Tutorial: Egen RSS-knapp

2009-08-26 22:55:55
Här tänkte jag visa er hur man gör en egen RSS-knapp till sin blogg, för att byta ut mot standardknappen! Det kan ju vara kul att ha en annan knapp än den vanliga, och en som passar till bloggdesignen.
Följ min tutorial steg för steg, den är enkel och tar ca 20 minuter.

Jag använder:
Adobe Photoshop

1. Skapa ett nytt projekt, jag tar 200 x 200 pixlar. (Snabbkommando Ctrl+N)
2. Skapa ett nytt Lager. (Snabbkommando Ctrl+Shift+N)
3. Välj verktyget Rectangle Tool (Tangentknapp U), välj formen med rundade hörn. Ställ in en fixerad storlek - i mitt exempel 40 x 40 pixlar - och sätt Radius till 7 pixlar. Se även till att Anti-aliasrutan är ikryssad. Välj en färg och placera ut rektangeln.

Kolla inställningarna (Steg 1 - 3):


4. Än är ju knappen bara platt, så den ska nu få fyra olika effekter. Första är  en Gradient. Välj i Photoshop-menyn LayerLayer StyleGradient Overlay...
5. Jag ger min knapp en Reflected gradient, inställd på Linear Burn med Opacity på 20%. Nu har vi en svag mörk toning mot mitten.
6. Nästa effekt är Inner Glow. Den ska vara vit, Size 6, inställd på Overlay med 60% Opacity. Ändra Contour till den bredvågiga med Range 40%. Knappen har fått en mjuk, ljus ram en liten bit innanför kanten.
7. Tredje effekten är Inner Shadow. Också vit, men inställd på Screen, 70% Opacity. Sätt skuggvinkeln till -90°. Distance: 5, Choke: 0, Size: 10.
8. Och till sist, effekten Stroke. Knappen får här en svag svart kantlinje. Inställd på Linear Burn, Position: Outside och Size 1 px.

Bilder på effektinställningarna (Steg 4 - 8):


9. Nu kommer vi till själva symbolen, och vi kör med den typiska "signalen". Vi gör ett nytt Lager, och väljer Rectangle Tool (steg 3) igen - men denna gång Custom Shape Tool, som har många olika former att välja mellan. Välj den nära slutet som heter Bull's Eye. Fixera storleken till 50 x 50 px, välj svart som färg och rita ut den.
10. Sudda mittpunkten, (vi gör en ny, mindre) och markera med verktyget Rectangular Marquee Tool (Tangentknapp M) tre fjärdedelar av symbolen och tryck på Delete. Avmarkera. Nu har vi en fin kvart kvar.
11. Vi skapar en mindre svart prick på ett nytt Lager direkt efter. Använd Brush Tool (B) eller Ellipse Tool (U). Jag tycker att en storlek på 6 px passar bra. Flytta pricken så att den utgör hörnet av symbolen och lägg sedan ihop de två lagren (symbolen + pricken) via Photoshop-menyn LayerMerge Down. (Ctrl+E)

Bildförklaring (Steg 9 - 11):


12. Flytta symbolen till mitten av knappen och invertera den med snabbkommandot (Ctrl+I).
13. Inte mycket kvar nu! Vi lägger till lite glans, och ger knappen en glas-look. Skapa ett nytt Lager, välj Brush Tool (B) storlek 65 och vit färg. Dra ett streck horisontellt över toppen av knappen. Ställ in lagret på Screen med 70% Opacity.
14. Nytt Lager, rita en vit oval över vänster topp med Ellipse Tool (U). Ställ in lagret på Soft Light med 50% Opacity.
15. Sista steget! Lagret med symbolen ska ställas in till Overlay med Opacity 90%. Det ser allra bäst ut om lagret ligger överst, så gå till LayerArrangeBring to Front.

Klart! Nu kan du t.ex. ändra färg, bakgrund eller ändra någon inställning om du vill. Till slut klipper du bara ut knappen så att det blir en ny liten bild som du sparar.

Kontrollera (Steg 12 - 15):


Verkar något oklart? Fråga gärna!

Jag har fått ett par önskemål, bland
annat på hur man gör en animation.

En sån tutorial är på gång! (^.^ )/


Så börjar du använda din nya RSS-knapp
För användare på blogg.se:
Om din blogg har en standardknapp måste du byta ut den mot den nya. Då går du in på kontrollpanelen under fliken Design och sedan Redigera kodmall.

Leta upp koden:

<a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>

Där har vi standardknappen rss.gif, och det är den som ska bytas ut. Ladda upp din bild på webben och kopiera bildadressen.

När du har ersatt bildadressen kan det se ut så här:

<a href="index.rss" title="RSS"><img src="http://www.dinsida.se/din_rss.gif" border="0" alt="RSS 2.0" /></a>

Bookmark and Share Pusha Följ med bloglovin' Follow me on Twitter

Kommentarer


Kontakt: Skicka mig ett e-mail!

Jag tar emot designbeställningar. Kika på designsidan!


Thomas

Ja, hur lägger man in ikonen i bloggen?

Maila mig! Jättebra blogg!

Emelie

Hur lägger man sedan upp ikonen?=)

tack för tips

★Svantes mamma★

Vilken härlig blogg du har!! :)



En fråga som du kanske har lust att svara på:



Hur gör man när man änvänder lasso-verktyget för att "klippa runt" en bild.



Orkar du inte svara, förstår jag!



Ha en trevlig kväll! kram

Thomas

Tack så mycket! :)

agnes

hur lägger mansedan up den på bloggen? ;)

agnes

ojj såg inte att du skrev det i inlägget, tack så mycket! :D

Kommentera inlägget här:



« Namn
« E-post (visas ej)
« Hemsida/Blogg
« Kommentar
Kom ihåg mig?
Related Posts with Thumbnails