Tutorial #5: Create a Super Happy Octopus Character in Illustrator

20 Aug

In Illustrator it’s really easy to create fun characters with some simple shapes and the Pathfinder Panel.  In the following tutorial I will explain how to create a Happy Octopus Character (I am attracted by the cute octopus!).  You can use these techniques and elements to create whatever character you want!

STEP 1: Create a new document 11 inches wide by 8.5 inches tall.

STEP 2: With the Ellipse Tool, create an ellipse that is 2.5 inches by 2.5 inches. Fill the ellipse with a green color and take off the Stroke.

STEP 3: Next, use the Direct Selection Tool and select the bottom anchor on the ellipse and drag it down about half an inch.


STEP 4: Select the oblong ellipse and Copy and Paste In Front. Select the newly copied object with the Selection Tool and grab the bottom anchor. Then squish the ellipse about a quarter of an inch up. Fill the slightly squished ellipse with a light green color.

STEP 5: With the Ellipse Tool, draw five to six elongated ellipses of varying size for the spots on the head (keep the ellipses the same proportion, just change the size).

  • Make these spots a light green, lighter than the second head shape
  • Select both head shapes, the spots, and Group them by going to Object > Group, or by pressing Command+G.

STEP 6: To start with the mouth, draw another ellipse around 1.5 inches by 1.5 inches. Then fill it with black and apply no Stroke.

STEP 7: Next, draw a rectangle with the Rectangle Tool about half way down the black circle. Select both shapes, press the Subtract From Shape Area button in the Pathfinder Panel. Then press the Expand button.


STEP 8: For the teeth, draw an ellipse that is about .375 inches by .375 inches. Select the ellipse with the Selection Tool. Then hold down Alt+Shift, and drag to the right.

  • Note that holding Alt copies the shape and holding down Shift constrains the movement
  • Select both shapes and Group them.


STEP 9: Next, place the shape over the black mouth towards the top. Select both shapes and press the Horizontal Align Center button in the Align Panel.


STEP 11: Select the black mouth and Copy and Paste In Front. Select one of the mouth copies and the teeth and press the Minus Front button from the Pathfinder Panel. Change the mouth at the back to white and now you have teeth!


STEP 12: For the tongue, draw a .5 inch by .5 inch ellipse over the mouth where the tongue should go. Select the mouth, teeth, and tongue and and press the Horizontal Align Center button in the Align Panel. Just like with the teeth, Copy the mouth and Intersect the tongue and mouth shapes.


STEP 13: Select the tongue and create a Linear Gradient from the Gradient Panel (select Linear from the Type drop-down menu in the Gradient Panel). Make the left Swatch a pink color and the right Swatch a light pink color. To change these colors, select the particular Swatch on the Gradient Slider in the Gradient Panel. Then mix the color in the Color Panel.


STEP 14: With the tongue selected, adjust the Gradient with the Gradient Tool by clicking and dragging from the bottom of the tongue to the top.


STEP 15: Group the mouth, teeth, and tongue. Then place them over the head shape. Select all the shapes and Horizontal Align Center them.

STEP 16: Draw a ellipse that is .375 inches by .375 inches. Fill it with black.


STEP 17: Draw another ellipse close to the top of the black ellipse, but smaller, and fill it with white. Next, draw another ellipse smaller than the white one, and place it closer to the bottom right of the black ellipse. Then fill it with white.

STEP 18: Select the black ellipse, and the smaller white ones, and Group them. Place the eye on the head, flush with the left edge of the mouth. Next, hold down Alt+Shift. Then drag to copy the eye flush with the right side of the head.


STEP 19: Start with Pen Tool and draw a bézier curve a third of the way down the head.  It doesn’t have tons of curves, it just needs to get the idea across of a simple tentacle. Try to get the path to end right before the darker color of the head.

STEP 20: In the Stroke Panel, change the Stroke Weight to 15pt and press the Round Cap button.

STEP 21: Next, Expand the Stroke by going Object > Expand. Also, make sure the Stroke Check-box is checked. Change the color of the tentacle to the light green you use on the head.


STEP 22: Next, select the tentacle with the Selection Tool. Then hold down Alt+Shift, and drag to Copy the tentacle. Place it half way down the original tentacle. Change the color to your dark green.

Select the original tentacle and Copy and Paste In Front. Select one of the original tentacles, and the darker one, and press the Intersect Shape Areas button in the Pathfinder Panel. Now you have one complete tentacle.


STEP 23: Repeat these step until you have eight legs. Keep in mind the light source for the tentacle shadows. For the tentacles on the right, I dragged and copied the tentacle down and to the left to create the shadow.

Finish! Isn’t the octopus cute and lovely? 🙂 Hope you enjoy reading my tutorial!

Source: http://vector.tutsplus.com/tutorials/illustration/create-a-super-happy-octopus-character/


Tutorial #4: 5 Most Useful Photo Effects

11 Aug

Today, I would like to show you how to retouch your photos with the following 5 photo effects, which can greatly enhance the emotional aspect of your photos. Surprisingly, it does not require a lot of techniques. Even Photoshop beginners are able to manage the following effects.

The 5 useful photo effects:

  1. Bleach contrast boost
  2. Retro film
  3. Soft glow/fog
  4. Half Sepia
  5. Lomo

The above effects are extremely useful, especially for those who do not have professional cameras. My tutorials will teach you how to create some of the most popular effects using professional, non-destructive editing techniques. Let’s get started!

1. Contrast Boost Photo Effect

The first effect  you are about to see is an awesome way to give your flat photos a contrast boost. This photo effect uses just 1 black and white adjustment layer!

STEP 1: Open an image. Click on the “New Adjustment Layer” button in the layers palette then choose Black & White.

STEP 2: Set the blending mode of the Black & White layer to Soft Light.

STEP 3: Adjust the settings as you like in the adjustments palette. (If you do not see this palette, go to Window > Adjustments)

  • You can use the slider to directly select a color in the image to adjust
    e.g. I want to make the sky darker, just click and drag to the left
    e.g. I want to make the trees lighter, just click and drag to the right

Then you will see the difference!
Before:                                                                After:

2. Retro Film Photo Effect

Now I am going to show you a photo effect for those high-contrast outdoor photos. This photo effect gives your photos that old-school retro look and you can do it non-destructively without even creating a new layer.

STEP 1: Open an image. Unlock the background layer so we can apply a layer style to it.

  • To do this, just double-click on the layer. You will get a window with some layer properties, just click OK.

STEP 2: Right click on the layer then choose Blending Options.

STEP 3: Select the Color Overlay options then set the blend mode to Exclusion and opacity to 25%.

STEP 4: Next, click on the color then pick any color you like. I am going to pick a blue color right here.

Your box should look like this:

Here is what the effect looks like!



3. Soft Glow/Fog Photo Effect

Next up is a quick and easy way of giving your photos a dreamy look.

STEP 1: Open an image. Start by creating the layer into a Smart Object.

  • Right click on the layer then choose Convert to Smart Object

STEP 2: Go to Filter > Blur > Gaussian Blur.

STEP 3: Adjust the settings so that you get a blur like this then click OK.

STEP 4: Double-click on the blending options button beside the Gaussian Blur layer.

STEP 5: Change the Blending Mode to Screen and adjust the opacity to your likings (mine is 70%). Click OK.

That’s the soft fog effect! Here what it looks like before and after.



4. Half Sepia Photo Effect

The next photo effect is subtle but gives your photo a really nice antique feel. This effect works great on portraits.

STEP 1: Open an image. Start by creating a new Hue-Saturation adjustment Layer.

To do this, click on the Adjustment Layer button then choose Hue-Saturation

STEP 2: Select the Sepia preset. If you do not have this preset, enable the colorize option then set your hue to 35 and saturation to 25.

STEP 3: Right click on the layer then choose Blending Options.

  • In the Blend If area, hold down the Alt or Option key on a Mac then drag the black input slider all the way to the right
  • The slider will detach from the other half and give you a smooth blending as you drag it towards the right
  • Then click OK

Here is the half sepia effect! It is a nice subtle effect for portrait photos.



5. Lomo Photo Effect

The final photo effect you will learn is a lomo color effect. It gives your phoos a color pop just like some Lomo cameras and is surprisingly easy to do.

STEP 1: Open an image. Start by creating a new Levels adjustment layer.

  • Click on the New adjustment layer then choose Levels

STEP 2: Select red from the drop down menu then drag the black and white input slider (the upper one) towards the middle like the following.

STEP 3: We are going to finish this Lomo effect with a vignette. Before you add one, right click on the background layer and choose Convert to Smart Object. This will let us apply the vignette as a Smart Filter which lets you go back and change the settings anytime you like 🙂

STEP 4: Go to Filter > Lens correction.

STEP 5: In the Custom tab, adjust the vignette to -100 then click OK.

Here is the Lomo photo effect!



Isn’t easy to create the above effects? I strongly suggest you to give these photo effects a try! Hope you enjoy my tutorials. Thanks for reading!

Source: http://www.youtube.com/watch?v=pi_0KAP2Lxc

Tutorial #3: Text – Photoshop Glass Effect Tutorial

4 Aug

Very often, we want to create some special text effect so as to make our texts stand out. Some people may think, “Well, I can download different fonts from the Internet which have already been styled.” However, I find that most fonts are flat and not 3-dimentional at all. That is why today I am going to show you how to create a text effect on your own, which is easy and useful.  Whenever you are designing posters or other art-related projects, you can apply this effect onto your texts :). I have chosen “Glass Effect” this time (it looks cool!). The glass effect works well on images and texture backgrounds!

Let’s get started!

STEP 1: Download a glass texture image as background and open it in Photoshop.

STEP 2: Click Text Tool and make a text box at the centre of the background image. Type in anything you like 🙂

  • Font: Franklin Gothic Heavy (it works pretty well with this effect as it looks bolded)
  • Size: It depends on the length of text you type. I have chosen 220pt for my font size
  • Color: White

STEP 3: Right click the text layer, choose “Blending Options” to create special effect on your text (The Layer Style box will pop out).

STEP 4: Click Drop Shadow, set the drop shadow as below.

  • Opacity: 94%
  • Use global light, leave the angle as -66°
  • Distance: 5px
    Spead: 0%
    Size: 13px

STEP 5: Click Inner Shadow, set the inner shadow as below.

  • Blend mode: Normal
  • Color: White
  • Use global light, leave the angle as -66°
  • Distance: 8px
    Choke: 11%
    Size: 4px

STEP 6: Click Inner Glow, set the inner glow as below.

  • We would like to put a blue hue on the text to give a transparent look. Pick the inner glow color as #bee0ff. It is a light blue color.

  • Size of elements: 27px
  • Quality: Tick “Anti-aliased” and make sure the range is 50%

STEP 7: Go to Bevel & Emboss, change the settings as below.

  • Structure –
    Size: 4px
    Soften: 2px
  • Shading –
    Gloss Contours: change it to “Rolling Slope – Descending”

STEP 8: Click Satin, set the satin structure as below.

  • Color: #006fce (blue)

  • Distance: 34px
  • Size: 65px

STEP 9: Go to Stroke, change the stroke settings as below.

  • Structure –
    Size: 2px
    Blend Mode: Soft Light
    Opacity: 53%
  • Fill Type –
    Set from “Color” to “Gradient”
  • Click “OK”

You will now see an image like this :D!

STEP 10: To make the text more transparent (or less solid), we have to do make some changes on it.

  • Choose the text layer, click on “Fill” and drag from 100% to 0%

See? The text is much more fragile and glass-like.

STEP 11: Finally, we are going to change the hue of the background so that the whole thing looks more unified.

  • Hit Ctrl+U to change the Hue/Satutation of the background
  • Tick “Colorize”
  • Hue: 202
    Saturation: 68
    Lightness: 10
  • Click “OK”

Now, you are done! I think it’s a quite good-looking glass effect. Hope you enjoy my tutorial! Thank you 🙂

Source: http://www.youtube.com/watch?v=8OtfA4ou4k0

Tutorial #2: How To Make a Push Pin Using Illustrator

28 Jul

Hello! I believe all of you have used push pins, right? They are very useful especially when you want to attach notice on boards. When working on design projects, we may like to decorate our work with push pins to make it look more attractive. However I find it quite difficult to find a push pin in vector format on the Internet, therefore I decide to create my own. Today, I would like to teach you how to draw a push pin using illustrator. It is easy and will not take you a lot of time to make one. As the push pin is very volumetric, I think it is quite lovely. Ready to start creating your own push pin? 😀

Here we go!

STEP 1: Open a new A4 sized document.

  • Press Ctrl+R so that the rulers appear ( the rulers help us draw shapes more accurately )

STEP 2: Draw a half side of the upper part of a push pin.

  • Move a guide to the centre of the page
  • Draw shape with the pen tool
  • Remember to round the edges

STEP 3: Turn the incomplete 2D shape into a 3D image.

  • Select the shape that you have drawn, then click Effect > 3D > Revolve

STEP 4: Adjust the angle of your push pin ( any angles you like ).

  • You may click “Preview” to see the effect

STEP 5: You may find your push pin too “fat” or “thin”, so just click cancel and drag the points to adjust the size before clicking the “revolve” button

STEP 6: Repeat STEP 4, adjust the angles of your push pin.

  • Click “OK” after adjusting the angles

STEP 7: Pick a color that you like to fill the push pin :). I have chosen red.

STEP 8: Draw the half side of a pin using the pen tool.

  • It should look like a narrow triangle pointing downwards

STEP 9: Create a 3D effect by clicking Effect > Revolve again.

STEP 10: Add a few more light points on the pin.

  • Click “More Options”
  • Move the light points around the bottom edge of the sphere, as what I did below
  • You do not need to re-adjust the angles of the pin as the computer will automatically do it for you ( as same as the top part )

STEP 11: Adjust the size of the pin if you want.

STEP 12: Change the color of the pin to gray so it looks more metallic.

STEP 13: Drag the pin to the middle of the top of the push pin without overlapping it.

  • Select the pin, click Object > Arrange > Send to Back

STEP 14: Select the whole thing, click Object > Expand Appearance so as to get more points around the push pin.

STEP 15: Create a shadow for your push pin.

  • Copy the push pin image and paste the new image beside it

STEP 16: Create a complete outline of the push pin as the shadow.

  • Select the copied push pin image
  • Go to Window > Pathfinder
  • Click “Unite”

See? the whole thing is flattened 🙂

STEP 17: Fill the shadow with black as shadows are usually darker.

STEP 18: Lower the opacity of the shadow to 75% , avoiding it to look too solid.

STEP 19: Add some gradient to soften the shadow.

STEP 20: Adjust the size and angle of the shadow. Place it below the push pin. You are done!

Isn’t it nice and easy? Hope you will like my tutorial 🙂 Thank you!

Source: http://www.youtube.com/watch?v=bLys2zZIKC4

Tutorial #1: Creating Apple iOS Chat Bubbles in Photoshop

9 Jul

Hello, my first tutorial is something that you are very familiar with. I guess you chat with friends using chatrooms quite often, right? Chatrooms including Whatssapp and Line are becoming more and more popular among teengers. They bring us convenience and allow us to chat with more than 30 friends at the same time no matter where we are.

Today, I am going to teach you how to create chat bubbles using Photoshop. The reason why I am choosing this tutorial is that I want to experience how the developers design the chatrooms. By creating my own chatroom, I have to pay attention to every details of the layout. The techniques I learned from this tutorial may be useful in my future profession as I hope to be a graphic designer. And most importantly, I think it is interesting to create our own chat bubbles and conversations.

Okay, let’s get started!

STEP 1: Start by creating a new document sized 1280px by 720px.

  • I have chosen light gray as my background so that it looks more similar to the chatroom in iphones

You will create a document like this:

STEP 2: Draw the main body of the chat bubble.

  • Grab the Rounded Rectangle Tool
  • Draw a Shape sized 150 px by 25 px with the the radius to 20px
  • Just click once on the document and enter your settings


STEP 3: Add a “tail” to complete the speech bubble shape.

  • Grab the Pen Tool (P) and draw a shape similar to what I have

STEP 4: Merge shape layers.

  • Grab the Path Selection Tool (A) -The black arrow- and drag a selection over both shapes that we just merged into one Shape Layer
  • Look to the control bar and select the pathfinder icon > “Merge Shape Components”

STEP 5: Add in some features of the chat bubble.

  • Layer > Layer Style > Drop Shadow
  • Reduce the Fill Opacity of the layer to 25% and apply the Drop Shadow, Inner Shadow, and Stroke that I have applied in the screenshots below

Then you will see a chat bubble with shadow like this:

STEP 6: Give a “shine” for this bubble to make it look more volumetric.

  • Grab the Rounded Rectangle Tool (U) again and draw a nice little rounded rectangle at the upper part of bubble
  • Reduce the Fill Opacity of this shine to 0% and set the foreground color to white

  • Go Layer > Layer Style > Gradient Overlay and choose the “foreground to transparent” gradient as I have. Reduce the opacity of the gradient
  • Use the little “Reverse” option if the white is not at the top of the bubble

See? The chat bubble becomes so smooth and 3-dimentional now. Doesn’t it look nice?

STEP 7: Type in some text in the bubble.

  • Grab your Text Tool (T) and place some text in the bubble and size it appropriately
  • Add the simple Drop Shadow that I have in the screenshot below to give a slight letter-pressed effect.

iOS Chat Bubbles Text Message iPhone Effect Photoshop CS6 Tutorial

STEP 8: Draw a frame (which shows the display picture) beside the chat bubble.

  • Grab your Rounded Rectangle Tool again and draw out a rounded rectangle like in the screenshot.
  • I used 8x for the corner radius. Actually you can find a size you like 🙂

STEP 9: Apply some features to this rounded rectangle.

  • Click Layer > Layer Style
  • Add a Drop Shadow as below (we have only added a slight white line below this white shape, but the effect will really show up when we add the picture)

STEP 10: Now, place an image that you like in the rounded rectangle!

  • Go File > Place and choose an image that you want as your display image
  • Scale the image down to about the size you want and hit the Enter/Return key to place the image.

STEP 11: Next, apply the Inner Shadow and Gradient Overlay to the display image.

  • Go Layer > Layer Style, set the inner shadow and gradient as I have applied below

  • NOTE: The Gradient is a little tricky, you want to start with a Foreground to Transparency gradient and drag both of the Opacity stops to the 50% mark on the top of the gradient to create a sharp white-to-transparent effect. This will be our shine.

STEP 12: We now need to mask our image to the layer beneath.

  • Typically we would use a clipping mask, but because of our Layer Styles we want to go with a normal Layer Mask
  •  Cmd/Ctrl + Click on the Shape Layer’s thumbnail to load that rounded rectangle as a selection just as I have in my screenshot
  • Go Layer > Layer Mask > Reveal Selection to mask to the selected area

STEP 13: Adjust the part of the image shows up as the display picture

  • Click the little chain icon in the Layers Panel between this layer thumbnail and the mask to be able to move the image around and keep the mask in the exact place we need it to be

STEP 14: I want to add a small highlight to the small pointed area coming from the bottom left corner of our bubble.

  • Grab the Pen Tool (P) and drag a small shape as I have.

  • Cmd/Ctrl + Click our original bubble Shape layer to load it as a selection
  • Mask this little shape to our bubble layer by going Layer > Layer Mask > Reveal Selection
  • You want to add a Gradient Overlay by going layer > Layer Style > Gradient Overlay and grab the foreground to transparent (make sure your foreground color is white) > Drag the Opacity slider from the left to the 40% position as I have
  • Follow the rest of my settings in the Gradient Overlay section

Now that you are done! Hope you will like my tutorial :).

Source: http://tutvid.com/create-apple-ios-chat-bubbles-photoshop-cs6/

Hello world!

28 Jun

Welcome to WordPress.com! This is your very first post. Click the Edit link to modify or delete it, or start a new post. If you like, use this post to tell readers why you started this blog and what you plan to do with it.

Happy blogging!