FilmConvert Pro for Adobe Photoshop

AppId is over the quota
AppId is over the quota

Film Emulation and Correction Plug-In

The ongoing mission to find analog-looking output in a digital imaging world seems to be very popular with professional photographers, videographers, and designers. Whether for nostalgia, correction, or simply for effect, analog is appealing to many people. Rubber Monkey Software brings the world of analog to Photoshop (they also offer versions for Premiere, After Effects, Final Cut Pro, and Motion) with a very easy-to-navigate user interface to produce these effects with FilmConvert Pro.

According to Rubber Monkey, FilmConvert for Photoshop is more specific to digital cameras, and their simulation presets range from still to motion picture film types. The main preview window requires no real explanation and is intuitive for the user. Beginning with Exposure and Temp settings, the sliders are larger than some plug-ins. The image preview is nearly instantaneous and accurate to the rendered output. The film type is selected below by clicking on the text or toggling the arrow keys to find the look you prefer. Controls for balance, level, and saturation can be eyeballed on a well-calibrated display.

On the downside, the presets are abbreviated so figuring out which type of emulation you want may be tricky if you aren’t familiar with each brand; however, the appearance is the key. In other words, how your images look after your adjustments is more critical than whatever name is on a given preset. Also, and this is a personal preference, each time you launch the plug-in, it returns it to its previous state. While this is great for projects, if you don’t use the software for a period of time you may forget that clicking the reset button is a requirement with each use. Finally, the emulation options include 8mm, 16mm, and 35mm sizes for a several film types, whereas some competitive products have many more parameters and presets for greater control.

Company: Rubber Monkey Software
Price: $199
Web: www.filmconvert.com
Rating: 2
Hot:  Ease of use; real-time previewing
Not:  Manual reset with each use; limited presets; no user preset option

View the original article here

Best of the Week: Illustrations, Photography, Icons and more

AppId is over the quota
AppId is over the quota

I'm an architect and designer from Porto Alegre, Brazil. I've been working with design since he got my degree in architecture, a bit odd isnt it? I'm a fan of Fireworks, CSS among other skills. Besides that I'm co-founder of ZEE.

View the original article here

The World Collabs #8 - Human Nature 84

AppId is over the quota
AppId is over the quota

"The World Collabs" will give you the possibility to work with PSD or Ai files of established artists. TWC gives you a secret in-view in the workflow of the stars and catapults you miles forward in your journey to design heaven. This way you learn to practice with different shapes, backgrounds, patterns brushes and new styles.

Every month we will offer you an unfinished piece of an experienced and accredited graphic designer to the world.

The piece will be unfinished, so you can complete the PSD/AI-file with your very own style. This way every month you can collaborate with the best designers of the world. The final pieces will be judged by the Abduzeedo Team and the artist himself. The three best works will be rewarded with prizes.

First Place - Lifelong membership at Vectology.com, $ 100 at Amazon, an approval for an original collaboration with the artist Human Nature 84 and a feature on Abduzeedo.

Second Place - 1 year membership at Vectology.com, 1 copy of Abduzeedo Inspiration Guide for Designers and a exclusive vector pack from Human Nature 84.

Third Place - 3 months membership at Vectology.com, 1 copy of Illustrator CS6: Visual QuickStart Guide.

Vectology.com is a vector community and tutorial website that is making a huge change on the the digital art field by showing to everyone that vectors are more than just tracing and solid shapes. On Vectology you can learn not only about the basic tools of illustrator, but also illustration tips and tricks that will be extremely helpful on the role creative process. This is a website that's turning the way we see vector and digital art nowadays and I recommend to everyone.

Mike Austin aka. Human Nature 84 is the most outstanding vector artist I ever met, he's the man behind the Vectology community and will be our artist featured on this World Collabs. Here's more about the artist on his own words:

"I graduated from Platt College of design in 2004 with a focus on graphic design. Later on in my career I began focus more on my illustration itch and began to work in the illustration field. I have a Wife and a son (and a daughter on the way). And I’m the biggest TOOL fan the world has ever known!"

humannature84.deviantart.com

Some of Human Nature 84 artworks.

Some of Human Nature 84 artworks.

This is an independent design contest with endless possibilities to finish this piece. There are just four simple steps to take part.

1. Download the PSD-File/ AI-File;

2. Push your creativity beyond boundaries and finish the design;

3. Submit the final image to Rawz with author's name and the link to the source.

4. Send the Rawz's link to marcostorres90[at]gmail.com

*By taking part at this contest you give us permission to use your image for Abduzeedo's showcases.

- Last day of submitting is Sunday, April 28th

- Don't the change size of the canvas, but feel free to rotate the image;

- Leave the logo, so we recognize it as an entry;

- Every artist can submit 1 design only;

- Let us see that it's a collaboration. We will award you for your ability to work with someone else's design.

This month Mike gave us this nice amount of elements to play with, you can download it by clicking on the image.

Click to download the editable file.

You think you are skilled enough to be the featured artist for the next months TWC. We follow some simple rules, when choosing a new piece.

- You are an energized designer with lot of motivation; - Your designs have your very unique style; - You only use files which are completely copyright free; If you are interested, please write an email to marcostorres90[at]gmail.com

View the original article here

Something new and exciting: Tuts + hub

We are ready to announce - the Tuts + hub beta something new and exciting!

As you know, is tut + learn all about people helping. We have worked with hub to deliver an experience, which makes it easy for you to find what you learn with a nice interface to the want to read.

What you see is a whole new level sits on our current Web pages. The articles and tutorials are still here (along with your comments), but we have developed a new way of presenting and built new tools with which to navigate the library. Now, look and read further and learn more.

Here are the basics of the innovations at the hub:

A new content structure (rather large) SearchA stressed disciplines of software-centric CategoriesImproved intuitive approach to the BrowsingResponsive DesignCarefully formatted articles

We are the hub as a beta release, because it is further developed. There are still some important features we want to implement, and a few wrinkles that need ironing. We have a lot of care to make lifting something, that looks good and works well on which we can easily improve and iterate.

We this site for you to customize - our readers – so that your feedback for us is incredibly valuable. If you notice that something that looks wrong out, or something, the way would this behavior, not you, we would be grateful to you if you took the time to fill out this feedback form.

If you to the current tut + blogs are used, are interested in knowing how we have reorganized our topics may be.

Currently is the Tuts + network of thirteen locations. When you occupying all different niches, some of them similar types of content have. By the isolation of the sites, it is possible that we they are, by looking for the kind of things that want to learn, and we are on very specific niches needlessly limit ourselves.

We plan to expand the width of the content that we offer, and our new themes are designed to this extension offer.

This is how the new themes on Tuts + associated with lifting the current websites:

& Illustration design

PSDTUTS + Vectortuts + Webdesigntuts +.

Development

NETTUTS + Mobiletuts + Webdesigntuts + Wptuts +.

Audio production

Photography

3D & animation

Game design

Video production

& Crafts

Computing

If you take a chance, views, to search and read a tutorial or two have had, welcome everybody on your feedback. Help us to create a product that like to employ our readers!

View the original article here

Threadless coupon code (75% discount)

By Tony SOH Updated on 2 April 2013

Threadless now has an online sale. Get discounts up to 75% discount with this Threadless coupon code!

Threadless offers you great T-shirts with unique ideas and fantastic drawings. It is one of the most popular online selling T shirts website with many fans worldwide. All designs are by online community and well executed.

Click here to up to 75% discount deal.

Every week about 10 drafts submitted by designers are selected on the basis of the popular vote and sold worldwide. Many sizes are available, and make your choice on the design that fits your style. Many topics are offered by funny political, cute, to abstract and dark and stylish. Collections are also available, including Spider-man, Sesame Street, College tees, Muppets, Minecraft and many more! And with the latest sale, can the tea only $10 instead of $20, this is a very good deal.

The tees are comfortable to wear and comes with very soft fabric made from 100% cotton. The design is screen printed to make it that the print printed last longer.

Threadless is a good place to shop for cool T-shirts for yourself or as a gift for friends. With the huge online catalog, you can watch funny T-shirts the personality of your friends are looking for. If you don't like what you get when you have received your order, you can simply write your reasons and return to Threadless 60 days and receive a refund. This is easy.

See list of all Illustrator tutorials.
Get free 101 Illustrator tips and techniques.

Hello. I am the founder of vector diary. Illustrator is my passion and I have written on Illustrator Illustrator many tutorials teach people to help. My most popular tutorial on learning Illustrator to became a hit. It makes learning Illustrator so easy and has benefited more than 20,000 people. In addition, I have revealed some of my secret techniques in the premium tutorials. So don't forget to check it out!

Read more from Tony Soh

View the original article here

Lego Vines Project by Mark Weaver

AppId is over the quota
AppId is over the quota

My name's François Hoang and my alias's Aoiro Studio. I am a self-taught freelance graphic designer from Montreal, Canada. If you wanna requests some posts; I can be found on Twitter or visit my website at aoirostudio.com.

View the original article here

Quick Tip: How to Longcat really infinitely long in Adobe Illustrator

Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 9213.
Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 9209.

The Internet has been taken over by cats and one of the Internet’s famous characters and memes is Longcat. He’s known for his incredibly long length and is subject to many Photoshop graphics. However don’t you think, out of all the cat memes, this one should be in vector? In today’s tutorial, I’m going to show you how to create a Longcat Pattern Brush in Adobe Illustrator.

Whenever you consider creating a Pattern Brush, the basic theory is to consider the subject in multiple parts. Firstly, the center of the Pattern Brush will be the repeating element. Then if you’re going more in depth, consider the ends of the brush and perhaps the inner and outer corners.

For Longcat, I’m going to be breaking him down into two ends (head and feet/tail) and his abdomen center. Use the Line Segment Tool (\) to create clear boundaries which break up you subject and then Select All (Ctrl + A)and create a Compound Path (Ctrl + 8).

Draw a Rectangle (M) around the overall subject and then use your lines with the Pathfinder panel to Divide the rectangle. As all the elements which make the brush won’t be central (for instance the tummy isn’t central), then you’ll need these three rectangles set to Opacity 0% to create invisible boundaries for your brush later on in the process. For now, they’ll be acting as a guide. Take this opportunity to enable Smart Guides (Ctrl + U)to help snap your objects and lines to your brush boundaries.

So let’s start breaking down Longcat into basic shapes. I’ve drawn three Rectangles (M) for the main sections… the head, tummy and bottom. However compared to the reference image, it’s not really like this. What we’re going to have to do for the time being is use our keyboard keys to nudge the shapes to the right. Allow to keep your shapes snapped to the boundary guides.

Use the Pen Tool (P) to go over the basic shape of the head and feet areas. Make sure that the corners of your Pen Tool shapes meet the corners of your rectangle guides. This is to ensure a perfect alignment of your Pattern Brush later on.

Draw one line with the Line Segment Tool (\) for the abdomen and then apply a thick Stroke Weight of around 90pt. Then go to Effects > Distort & Transform > Zig Zag and add 1 Ridge to the line. Consider that this section will be repeated depending on the length of the Longcat, so the wave must meet the same places either end of the line.

With the line selected, go to Object > Expand twice to convert the line into a shape. You may need to use the Free Transform Tool (E) to modify the width of the shape to make sure the top and bottom corners snap to the original rectangle you created as a guide.

Time to begin drawing your shading shapes with the Pen Tool (P). Try to keep it simple and not go over the top with the amount of anchor points, otherwise it may become memory hungry… om nom nom!

For the abdomen, I’ve duplicated the shape and used the Free Transform Tool (E) to reduce the width of the shape. Although your shapes are currently off center, try to estimate where the corners for the top and bottom of the shapes meet. Don’t worry if you’re off, as this can be rectified later on.

And here is my final shapes of shading.

I’ve drawn eyes and added whiskers using the Pen Tool (P). The whiskers have a Width Profile applied to them.

When you’re done, Object > Expand your lines to shapes then Group each section (Ctrl + G). If it makes things easier, put them in their own Layers.

Time to line up the groups. The base shape corners should allow you to snap them together, however you may notice that some of the shading isn’t as aligned as you hope… who’s purrfect huh? (Last pun I promise!). Use the Direct Selection Tool (A) to select the offending point and snap it into place. You may also need to align the boundary rectangles again. As long as you don’t move then up or down, it is perfectly fine to move them all together left or right to make sure that all of Longcat is within his boundaries.

I’ve now colored my Longcat and given it a subtle green stripe in the eyes. The green background is purely so you can see him as he’s got an off white base. I’ve also Grouped each of the sections with it’s corresponding boundary shape (Ctrl + G).

Time to turn Longcat around to make him easier to fit into the Pattern Brush format. Select all of his groups and go to Object > Transform > Rotate and enter in the Angle: 90 degrees. Click on OK once done.

Now drag and drop the head and the feet groups into the Swatches panel. These will automatically make a pattern swatch. They won’t really be usable for anything other than making this Pattern Brush.

I would suggest, if you’re using CS6 to avoid the urge of double clicking on each element and renaming the pattern. This will bring up the Pattern Options dialog box and although it will cure your OCD of wanting a wonderfully organized file, it may create difficulties in aligning your Pattern Brush. Take this from personal experience!

Select your abdomen group and then in the Brushes panel click on New Brush > Pattern Brush. The abdomen group should automatically fill the first window, this is the main repeating element of the brush. Select the fourth window and select your head from the options below and then select the fifth and select your feet. Once you’re happy, click on OK and you’ve gotten you Longcat Pattern Brush!

So he may not have an every day use, but he’s amusing to play with. He’s a cat of infinite length and can be drawn along any open ended line. Try giving him different Stroke Weights to enhance his length.

I hope you’ve enjoyed today’s Quick Tip. What other memes do you think would be perfect for vector? Suggest them and you never know!

View the original article here

An iron cross self-mailers template that you create with InDesign

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request

Looking for something more exciting than a standard trifold or postcard? One attention-grabbing solution is the iron cross fold. This speciality, or exotic, fold gets its name from the cross shape/plus sign shape it forms when flat and unfolded. It is fairly easy to set up and will add significant flair to your piece. It can be either square or rectangular after folding. The flaps can vary in size and include curves or angled cuts, if desired.

In this tutorial, you will learn how to create an iron cross self-mailer template using InDesign.

Because the iron cross is an irregular shape, float the template on the page rather than create a document the trim size of the piece. Go to New > Document and set up a one-page document that is 1 inch larger than the trim size of the entire piece.

Since the outer edges of the template are 26.875 inches wide x 17.875 inches tall, the document pages need to be 27.875 inches wide x 18.875 inches tall. Uncheck Facing Pages. Set the Margins, Bleeds, and Slugs to 0 on all sides, as you won’t need them.

If you don’t have your Rulers turned on, go to View > Show Rulers. You will need them to create the die lines and guides.

Click on the horizontal ruler and drag a guideline onto the page. In the Y coordinate box, enter 0.5 inches. Then, drag a guideline from the vertical ruler and enter 0.5 inches in the X coordinate box.

Use step and repeat to create the other two sides of the outer guide.

Select the horizontal guideline. Then, go to Edit > Step and Repeat. Set the repeat count to 1 and the vertical offset to 17.875 inches, which is the height of our template. Click OK and the guide will pop into place.

To make the final outer guideline, select the vertical guideline and follow the above step and repeat process. Enter a repeat count of 1 and a Horizontal Offset of 26.875 inches, which is the width of our template. The outer guides are now complete.

Once again, use the step and repeat process to create guides for the inner edges of the template.

To compensate for the fold and ensure that the piece lies flat after folding, the left and right panels need to be .0625 inches (1/16 in.) narrower than the center panel. The left and right panels/wings will be 8.9375 inches wide and the center panel will be 9 inches wide.

Highlight the left outer guide. Go to Edit > Step and Repeat. Set the repeat to 1 and the Horizontal Offset to 8.9375 inches. The guide will automatically move to the 8.9375 inch mark on the horizontal ruler.

Highlight the newest guide and step and repeat it 9 inches horizontally.

You now have three panels measuring 8.9375 inches, 9 inches and 8.9375 inches.

Now, set the horizontal guidelines. To compensate for the fold and ensure that the piece lies flat after folding, the top and bottom panels need to be 0.0625 inches (1/16 in.) shorter than the center panel, making them 5.9375 inches tall.

Drag a guideline from the ruler at the top of the page. To place the first horizontal guideline, type 5.9375 inches into the Y coordinate box and hit return. The guide will automatically move to the 5.9375 inch mark on the vertical ruler.

Using the step and repeat method, highlight the last guide you created and set the repeat count to 1 and the Vertical Offset to 0.0625 inches (1/16 in.). This guide shortens the right and left panels to compensate for folding.

Highlight your latest guideline. Go to Edit > Step and Repeat. Enter 1 in the repeat count and 5.875 inches in the Vertical Offset box. Remember that we are taking 1/16 of an inch off both the top and the bottom of the right and left wings.

To create the final guideline, repeat the process above but enter 0.0625 inches in the Vertical Offset box.

It’s a good idea to lock your guides at this point to avoid accidentally moving them. Go to View > Grids and Guides > Lock Guides.

Your guidelines are now in place and should look like the screen shot below.

Create a die line indicating where the printer or bindery should trim the mailer.

Before you begin, Go to View > Grids & Guides > Snap to Guides and make sure Snap to Guides has a check mark beside it.

Create a new layer labeled either "Die Line" or "Die Line Do Not Print." On this layer, create a box using the Rectangle Tool (M) and enter the values W=9 inches and H=17.875 inches in the width and height boxes in the top menu bar. Fill the box with a color, no outline. Then, place the box between the guidelines. Make sure the edges of the box snuggly rest against the guides on all four sides.

The horizontal portion of the die area is created the same way as above but with the values W=26.875 inches and H=5.875 inches. Position the horizontal box between the guidelines.

You should now have a large cross/plus sign centered on your artboard.

Select both of the boxes you just created. Go to Object > Pathfinder > Add. The two rectangles will merge into one shape.

To differentiate the die line from the graphics, outline it with a spot color.

Go to the Swatches panel and click on the fly-out menu in the upper right corner. Select New Color Swatch. In the dialogue box that comes up, set Color Type to Spot. After Color Mode, choose any swatch library you like. I chose Pantone Solid Coated. Since pink is easily recognized by printers as a die line, I picked Pantone Rubine Red. Click OK and you now have a new spot color in your Swatch panel.

Select your die line, delete the fill, and add a 0.5 Stroke using the spot color you just created. The die line also needs to be set to overprint. Select the die line. Go to Window > Output > Attributes and check Overprint Stroke. The printer will now be able to print a separate plate for the die line that will not interfere with the artwork.

On a standard rectangular piece, fold lines are created in the slug area. Since the iron cross is an irregular shape, the folds have to be marked another way.

Add a new layer and label it either "Fold Lines" or "Fold Lines Do Not Print." Then, create a new spot color using the process above. On the Fold Line layer, create a box that is 9 inches wide by 6 inches high. This is the size of the center of the piece. Place this box between the outer guidelines of the center rectangle. Select the fold line, delete the fill, and add a 0.5 stroke using the spot color you just created.

Make this stroke a dashed line to indicate that it is a fold. Several dashed line styles are available in the stroke options palette. If you do not see them, click on the Stroke panel fly-out menu. Choose Show Options and select your dash from the Type options.

To ensure that ink goes to the edge of the piece, it is necessary to add a bleed to the outer edges of the mailer. Since placement of the bleed guidelines isn’t critical, it’s okay to trust your eyes and set them up using the rulers.

Drag guidelines from the horizontal and vertical rulers and place them 1/8 of an inch from every edge of the die line.

The second page of the document needs guides, bleeds and a template as well. This is a very easy process. Click on the Pages menu fly-out and choose Duplicate Spreads.

You are now ready to create a fabulous mailer!

Tip: Since the iron cross design involves a die cut, scoring, and possibly hand folding, it will also add expense. Be sure to check with both your printer and your client before you get started. Another thing you should know is that this layout is a paper hog and creates a considerable amount of waste. Do not despair my tree hugger friends! The extra paper can be used for accompanying pieces such as inserts or cards. As is true for most extraordinary things, they require added thought, funds and planning… but the end result is worth it.

View the original article here

So create a unique USB sign in button in Adobe Illustrator

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request

In the following steps you will learn how to turn simple USB stick illustration into a nice sign in button. It’s another one of those tutorials that focuses a lot on the Appearance panel. We’ll start with a simple rectangle, the Rounded Corners effect and some simple Pathfinder and Transform options. Once we get the stating shapes we’ll move inside the Appearance panel where we’ll use a bunch fills and strokes along with a lot of effects and some blending techniques. For the final touches we’ll use a simple piece of text and some basic vector shape building techniques along with some new effects.

Hit Command + N to create a New document. Enter 600 in the width box and height boxes then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before your click OK.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For this tutorial you’ll need a grid every 1px. Simply go to Edit > Preferences > Guides > Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Using the Rectangle Tool (M), create a 146 by 49px shape, fill it with the linear gradient shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 24.5px radius, click OK and go to Object > Expand Appearance. The white number from the gradient image stands for Opacity percentage.

Using the Pen Tool (P), draw a 65px, vertical line and place it as shown in the first image. Select this new path along with the rounded rectangle made in the previous step, open the Pathfinder panel (Window > Pathfinder) and click on the Divide button. Make sure that the resulting group of shapes is selected and hit SHIFT+CTRL+G to Ungroup it. Move to the Layers panel and you will find two simple shapes. Double click on the bottom one and name it "leftPiece" then double click on the other shape and name it "rightPiece".

Focus on the Layers panel, select "rightPiece" and go to Object > Transform > Move. Enter 43 in the Position-Horizontal box and 0 in the Position-Vertical box then click OK.

Select "leftPiece", focus on the Appearance panel and add a second fill using the Add New Fill button (pointed by the little, blue arrow). Select this new fill, drag it in the bottom of the Appearance panel and use the linear gradient shown in the following image. Keep focusing on the Appearance panel, select the top fill and go to Effect > Distort & Transform > Transform. Enter the properties shown in the top window (make sure that you check the bottom reference point) , click OK and go again to Effect > Distort & Transform > Transform. Enter the properties shown in the bottom window (make sure that you check the top reference point) and click OK.

Select "leftPiece", focus on the Appearance panel, add a third fill and drag it between the existing fills. Make sure that this new fill is selected, set its fill color at R=175, G=175, B=175 and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image (make sure that you check the bottom reference point) and click OK.

Select "leftPiece", add a fourth fill and drag it in the bottom of the Appearance panel. Make sure that this new fill is selected, add the linear gradient shown in the following image and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK.

Select "leftPiece", add a fifth fill and drag it in the bottom of the Appearance panel. Make sure that this new fill is selected, add the linear gradient shown in the following image and go to Effect > Path > Offset Path. Enter a 1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.

Make sure that "leftPiece" is still selected, focus on the Appearance panel, select the fill added in the previous step and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the first window, click OK then add the other three Drop Shadow effects shown in the following image.

Select "leftPiece", add a sixth fill and drag it in the bottom of the Appearance panel. Make sure that this new fill is selected, lower its Opacity to 50%, add the linear gradient shown in the following image and go to Effect > Path > Offset Path. Enter a -5px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Effect > Blur > Gaussian Blur. Enter a 7px radius and click OK. The yellow zero from the gradient image stands for Opacity percentage.

Next, you need to copy the properties used for "leftPiece" and paste them onto "rightPiece". You can easily do it using the target icon. Move to the Layers panel, focus on the right side and you’ll notice that every shape comes with a little grey circle, that’s a target icon. Hold Alt, click on the target icon that stands for "leftPiece" and simply drag onto the target icon that stands for "rightSide". In the end your "rightPiece" should look like in the first image. Select it and move to the Appearance panel. Focus on the two fills highlighted in the second image and edit those linear gradients as shown below.

Focus on the right side of "leftPiece". Using the Rectangle Tool (M), create a 1 by 49px shape, fill it with the linear gradient shown in the first image and place it as shown below. Make a Copy of this thin rectangle (Control + C > Control + F), select it, move it 1px to the left and replace the linear gradient used for the fill with the one shown in the second image.

Keep focusing on the right side of "leftPiece". Using the Rectangle Tool (M), create a 1 by 4px shape, fill it with R=155, G=155, B=155 and place it as shown below. Make a Copy of this small rectangle (Control + C > Control + F), select it, move it 1px to the left and replace the flat color used for the fill with the linear gradient shown in the second image.

Focus on the left side of "rightPiece". Using the Rectangle Tool (M), create a 1 by 49px shape, fill it with the linear gradient shown in the first image and place it as shown below. Continue with the Rectangle Tool (M), create a 1 by 4px shape, fill it with R=155, G=155, B=155 and place it as shown in the second image.

Using the Type Tool (T), add the "Sing in" piece of text, set its color at R=210, G=210, B=210 and place it as shown in the first image. Use the "Utsaah" font, set the style at Bold and the size at 22pt. Make sure that your piece of text is still selected and hit Shift + Control + O (or go to Type > Create Outlines). Select the resulting group of shapes and turn it into a Compound Path (Control + 8 or Object > Compound Path > Make).

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Select the compound path made in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the down arrow from your keyboard to move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a Compound Path (Control + 8) and fill it with R=165, G=165, B=165.

Select the compound path made in the fifteenth step, focus on the Appearance panel and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Return to the Appearance panel and add a 0.5 Stroke Weight. Select it, set the color at R=196, G=196, B=196 and align it to inside.

Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create an 18 by 13px shape, fill it with R=210, G=210, B=210 and go to Effect > Stylize > Rounded Corners. Enter a 2px radius, click OK and go to Object > Expand Appearance. Continue with the Rectangle Tool (M), create a 10 by 12px shape and place it as shown in the second image. Fill it with none, but add a 2.5pt stroke, set its color at R=210, G=210, B=210 then go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Path > Outline Stroke. Select the resulting path along with the other shape made in this step and click on the Unite button from the Pathfinder panel.

Keep focusing on the shape made in the previous step. Using the Rectangle Tool (M), create a 2 by 5px shape, fill it with a random color and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Object > Expand Appearance. Select the resulting shape along with the shape made in the previous step and click on the Minus Front button from the Pathfinder panel. Grab the resulting shape and place it as shown in the third image.

Disable the Snap to Grid (View > Snap to Grid). Select the shape made in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down using the down arrow from your keyboard. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a Compound Path (Control + 8) and fill it with R=165, G=165, B=165. Reselect the shape made in the previous step, focus on the Appearance panel and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Return to the Appearance panel and add a 1.5 Stroke Weight. Select it, set the color at R=196, G=196, B=196 and align it to inside.

Focus on the right side of "leftPiece". Using the Rectangle Tool (M), create a 30 by 29px shape, fill it with the linear gradient shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 4px radius and click OK. Send this new shape to back (Shift + Control + [ ), make sure that it stays selected and focus on the Appearance panel. Add a second fill for this shape and select it. Use the linear gradient shown in the second image then lower its Opacity to 20% and change the Blending Mode to Multiply. Move to the Layers panel and name this new shape "stickPiece".

Make sure that "stickPiece" is still selected, focus on the Appearance panel, select the bottom fill and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Add a third fill for "stickPiece" and drag it in the bottom of the Appearance panel. Select this new fill, add the linear gradient shown below and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.

Select "stickPiece", focus on the Appearance panel, make sure that no fill or stroke is selected and add the five Drop Shadow effects shown in the following image.

Using the Rectangle Tool (M), create a 5 by 6px shape and fill it with R=90, G=90, B=90. Place this new shape as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 1.5px radius, click OK and focus on the Appearance panel. Add a 1pt stroke, set its color at R=60, G=60, B=60 and align it to inside. Keep focusing on the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the first image, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the second image and click OK.

Select "leftSide", make a copy in front (Control + C > Control + F) and bring it to front (Shift + Control + ] ). Select this copy, focus on the Appearance panel and simply remove the bottom fill and the three Drop Shadow effects highlighted in the second image. Once you’ve done it go to Object > Expand Appearance.

Select the group resulted from the previous step and click on the Unite button from the Pathfinder panel. Fill the resulting shape with black.

Move to "rightSide" and repeat the techniques mentioned in the last two steps.

Select the two black shapes made in the last three steps and turn them into a Compound Path (Control + 8). Select it and simply change its Blending Mode to Overlay. This would be helpful if you’re looking to add a bit of darkness to your button. Finally, you can use this compound path to easily recolor your entire button. Simply replace the black used for the fill with the color that you prefer. Try different Blending Modes. For instance a R=39, G=170, B=225 fill color with the Blending Mode set at Color Burn look pretty good (image #3). You should also try to combine the Blending Modes as shown in the final image. Feel free to try different combinations.

Now your work is done. Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects.

View the original article here