Filed under: IT world news

Create a stylish button sticker RSS

by admin on Mar 11th, 2010

Everything from Illustrator CS4 (Ai )

All button will be created with vectors so it will not have problems for sizes and quality of your images. Using vectors is an ideal solution for web, and that despite relatively small size you use, export your png’s will with a fidelity very good outline. If to this we add that in Ai CS4 finally can make measurements in pixels for web .

just have everything in our paper started doing a figure of a circle (180px by 180px) with the following characteristics and color we put filler # FDF8E3 , without stroke. /> id=”more-2620″> /> class=”alignnone size-full wp-image-2621″ title=”circulo” src=”http://blogandweb.com/wp-content/uploads/2010/03/circulo.png” alt=”" width=”600″ height=”447″ />

Now what we will do that part of the sticker that is taking off to put a figure of this rectangle select circle above both figures, copy (Cmd C or Ctrl C) and paste (Cmd V or Ctrl V ).

class=”alignnone size-full wp-image-2622″ title=”duplicar_circulos” src=”http://blogandweb.com/wp-content/uploads/2010/03/duplicar_circulos.png” alt=”" width=”600″ height=”550″ />

We opened our window Pathfinder ( Menu Window → Pathfinder) select a pair of figures (circle and rectangle) we make the choice Intersect (ie laintersección left alone between the two figures) and to second aplicacmos the otion Minus (which removes the figure above the figure below ).

class=”alignnone size-full wp-image-2623″ title=”intersect” src=”http://blogandweb.com/wp-content/uploads/2010/03/intersect.png” alt=”" width=”600″ height=”430″ />

class=”alignnone size-full wp-image-2624″ title=”RESULTINTERSECT” src=”http://blogandweb.com/wp-content/uploads/2010/03/RESULTINTERSECT.png” alt=”" width=”600″ height=”406″ />

class=”alignnone size-full wp-image-2625″ title=”MINUS” src=”http://blogandweb.com/wp-content/uploads/2010/03/MINUS.png” alt=”" width=”600″ height=”473″ />

class=”alignnone size-full wp-image-2626″ title=”RESULTMINUS” src=”http://blogandweb.com/wp-content/uploads/2010/03/RESULTMINUS.png” alt=”" width=”600″ height=”440″ />

We adjusted a little curve of the smaller figure, making it a little bigger, we add the following values for padding and Double

class=”alignnone size-full wp-image-2627″ title=”CURVAMAS” src=”http://blogandweb.com/wp-content/uploads/2010/03/CURVAMAS.png” alt=”" width=”600″ height=”495″ />

class=”alignnone size-full wp-image-2628″ title=”GRADIENTE” src=”http://blogandweb.com/wp-content/uploads/2010/03/GRADIENTE.png” alt=”" width=”600″ height=”507″ />

class=”alignnone size-full wp-image-2630″ title=”gradientensulugar” src=”http://blogandweb.com/wp-content/uploads/2010/03/gradientensulugar.png” alt=”" width=”600″ height=”556″ />

we turn this same figure. We adjust the curve to the left as a shadow form fill it in black and give a transparency of 12 doubled the semicircle %.

class=”alignnone size-full wp-image-2631″ title=”SOMBRAPLECA” src=”http://blogandweb.com/wp-content/uploads/2010/03/SOMBRAPLECA.png” alt=”" width=”600″ height=”454″ />

Now we have, we sent him to the bottom, offset from one little, fill it with black and give transparency of 12 %.

class=”alignnone size-full wp-image-2633″ title=”ETIQUETA” src=”http://blogandweb.com/wp-content/uploads/2010/03/ETIQUETA.png” alt=”" width=”600″ height=”602″ />

It is now to put our label design

We create a new circle of 136 x 136 pixels, with a stroke of 2 pts . and color as a circular gradient fill of the following colors # FBB03B and # F16123 , which does not leave such an image .

< We > class=”alignnone size-full wp-image-2634″ title=”cirnaranja” src=”http://blogandweb.com/wp-content/uploads/2010/03/cirnaranja.png” alt=”" width=”600″ height=”444″ />

forward the piece of

sticker off and took one vector sombra.Ahora downloaded from the Internet (both are totally free this and href=”http://www.iheartvector.com/2008/10/09/paint-splats-vector/”> this one of DeviantArt.’s add the color

# FFD54E href=”http://whirlwindzor.deviantart.com/art/Super-Crazy-Splatter-Vectors-2-81896174″> and a transparency of 50 %

class=”alignnone size-full wp-image-2635″ title=”GRUGENARAN” src=”http://blogandweb.com/wp-content/uploads/2010/03/GRUGENARAN.png” alt=”" width=”600″ height=”413″ /> Now we just need to add the symbol

RSS

, which takes in the following vector free, but if you’re one of those who they like to do everything from scratch in this tutorial is explained as is . href=”http://www.brandsoftheworld.com/search/124538776/246706.html”> href=”http://www.youtube.com/watch?v=zLWG_m_Vqkc” >

class=”alignnone size-full wp-image-2636″ title=”RSSOK” src=”http://blogandweb.com/wp-content/uploads/2010/03/RSSOK.png” alt=”" width=”600″ height=”404″ /> We set the logo and go. You can export it as

png

. to End

We are now ready our button you can change the colors and put the symbol of any other application or social network (

facebook, twitter or friendfeed

left with the blue) so you can make different adaptations . A

tip

I can give is that you can modify this sticker Export as . png and playing with textures and transparencies Photoshop , to give a different feeling. I hope you leave me your comments questions and if you like you can send me a reply via twitter ( @ Uliza), I would like how you did with the tutorial and see your own versions. href=”http://twitter.com/ulizes” >