Result

Step 1

Let’s get started by inserting our sketch into Illustrator to begin the drawing process. I have a few tutorials which cover these techniques. I think you can refer back in details if you like. Here are the tutorials:

• Sketch To Vector – Bird
• Illustrate Image Into Vector

Step 2

Create a new document with 600px X 300px. Fill the background color with pink (#f08fb0). Create a new layer and rename it as color. Randomly paint the layer with a 200px soft brush with 60% opacity. The colors I am using are #e595b7, #f7c89c and #beeee2. You can use your own color set. Go to Filter > Blur > Gaussian Blur > Radius 70px. Duplicate the color layer.

Step 3

Create a new layer and rename as texture. Fill it with black and set the blend mode to screen. Go to Filter > Noise > Add Noise. Add a 400% Gaussian Monochromatic Noise. Set the layer fill to 20%.Then, go to Filter > Artistic > Watercolor and apply the setting as show in the image.

Step 4

Create another layer and rename as line. Fill it with black and set the blend mode to soft light. Go to Filter > Noise > Add Noise. Use the setting below.

Step 5

With the line layer selected, go to Filter > Blur > Motion Blur. Apply the setting below. Then, Erase the bottom part using a 300px soft brush. Then import the character vector from Illustration as a smart object.

Step 6

Draw a white shape like what you see in the animation below. Rasterize the shape. Erase most of the part as shown in the example image. Apply Color Overlay; I am using the same pink color. CTRL + J to duplicate the layer. CTRL + T to transform the layer. Set the transform angle to 15 degree for each new duplicated layer. After all, select all the pink layer and Press CTRL + E to merge all layers. Create a new layer above it. Set the blend mode to Soft Light. Paint the center of the shape with black using a soft brush. ALT + click in between the new layer with the pink layer to create a mask of the pink layer.

Step 7

Select a 40px hard brush. Press F5 to bring up the brushes setting and set accordingly. Paint as you like.

Step 8

Create a new layer above all the layers. Select a 400px soft brush. Press a few times as shown below. Set the layer blend mode to soft light.

Step 9

Almost there, type in the message you like. If you like, you can follow mine. I am using Myriad Pro, 60pt, semibold italic and white color. Apply a 1px outside stroke with #8b8782 color. Inner Shadow Distance 1px, Size 3px, -49 degree of angle, 24% opacity with Multiply blend mode. Drop Shadow with Soft Light blend mode, 100% opacity, 5px Distance and Size.

Step 10

I am trying to increase the realistic feel of the character. Create a new layer above the character smartobject. ALT + click in between the new layer and the smartobject to create a masking effect. Set the new layer blend mode to soft light. Gently paint the new layer according to the smartobject’s edge with white color to create a lighting effect. Create another layer and mask it as well. This time, we will be using black color to create the shadow effect.

Result

Download

Result

Step 1

First of all, we start from skecth. I skecth on a paper and then scan it into my PC.

Step 2

Open Illustrator, place the image (sketch) into the document. Place it as the bottom layer. Lock it. Create a new layer above it and set the transparency to 50% or 60%. Start draw out the basic shape. It doesn’t have to be very accurate. Smooth, natural and balance are the keys here. You can check out my previous tutorial on Illustrate Image Into Vector or Sketch To Vector. Below is the basic shape I got.

Step 3

We are not going to use the stroke here. We are going to draw out the outline manually. We will be using the pathfinder tool very often since now.

Step 4

Try to Zoom in and to draw out the details line. Below are some shortcut keys to speed up the work.

• Zoom in = CTRL + +
• Zoom out = CTRL + -
• Paste infront = CTRL + F
• Move a layer down = CTRL + [
• Move a layer top = CTRL + ]

Step 5

Draw out the eyes amd legs. We are going to use pathfinder too.

Step 6

Now, the cow is alomost donw. What we need to do here is to add some details and gradients.

Step 7

Hurray! Done!

Happy Chinese New year!

I take this chance to say Happy Chinese New Year to all of you. By the way, “cow”, pronounce in Mandarin is same as “new”. So, When you say Happy New Year to someone. It means you are greeting him a Happy Cow Year! Interesting, right? Alright, I have compile the e-card and the source file of the cow vector. You can download them now!

e-card

Download

Step 1

CRTL+N and create a 1024px X 768px file. Fill the background with the color showing in the image below. Grab the Rectangle Tool and draw a rectangle with take about half of the page with the color given below and rasterize it, rename this as top layer. Using Lasso Tool, draw the shape and press delete.

Step 2

Create new layer belor the top layer. Grab the Brush Tool and with the soft mechanical 100px, #484536 color. brush out the shape of the shadow for the top layer. You may need to zoom in and smudge it to get the better result. Apply 1px outside whtie stroke to the top layer. Then, Apply Pattern Overlay with Soft Light Blend Mode, Rust Flakes.

Tips: try to make the shadow “no fixed as it may make it look not natural. You need some times for this part to make it looks natural.

Step 3

Create a layer above the top layer, ALT and click between the layers to create mask. With the same brush set, #d8ce9d color, brush a long the edge of the top layer.

Step 4

Create a rectangle and CTRL + T then rotate to the angle shown below. CTRL + T again and this time select Wrap and drag the bottom right corner as shown below.

Step 5

Using the Pen Tool, draw out the shadow below the rectangle shape. Apply Gaussion Blur 5px and set the layer blend mode to Multiply.

Tips: Brush out the little shadow at the top to enhance the effect.

Step 6

CTRL + Click on the rectanlge to bring out the selection. Goto select > Modify > Contract > 10px. Create a new layer above it and fill it with white color. Now, place any photo you like and simply create a mask with the new layer we created just now. Then, using the Polygonal lasso Tool to draw the tab and create a new layer above then fill with white color and set the Fill to 47%. Apply 1px inside stroke #e4dec3 and set the opacity to 66%.

Step 7

Brush the shadow for the tab.

Step 8

Type out the Site title. I am using Bernard MT Condensed with #7a745e 72px. Type out the rest of the title. Rasterize the type. Grab the Erase Tool and with the TB_Grunge Brush. Randomly erase the font to make the effect.

Step 9

using the Pencil Tool, zoom in and draw out the arrow shape and then erase it like what we do with the title we made.

Step 10

Using the same technique, Create the Search input field and also the RSS icon.

Step 11

For the footer, use the same technique to create the top layer in Step 1 & 2. Apply Inner shadow, Blend Mode Multiply, 20% opacity, 90 °, Distance 5px, Choke 0, Size 10px. Color Overlay 100% #302e26. 1px outside white stroke with 18% opacity. Well, we are done now, Simply add in 3 rectangle and apply Drop Shaow Effect.

• Font (sizes, colors, type and style)
• White space ( spaces, padding and line height )
• Arrangement ( structure each sections organized )

The main goal of a magazine site is to present useful information to the readers. So, we can expect there will be lots of text on the page. In this case, heavy graphic layout is not recommended. It not only will slow down the page loading time, more bandwidth but also scare the users away from the page which flood with text.

Result

Before we get started, let’s check out what we are aiming for in this tutorial. We are going to use pixel-like text base concept in this design.

Step 1

Open new document (CTRL + N) with 1024px width and 960px height, RGB color. CTRL + R to bring out the ruler. Draw the guide lines follow the sample image. The maximum width we are going to use is 960px. We will use 240px for the left column, 468px for the middle column and 212px for the right column. There will be 20px space between each of them. We will split the middle column into two.

Step 2

Create a new folder and name it as “header”. I use this font for the title. Type the title you want or simply follow mine. I use 48px font for this. Change the color of the first alphabet into #f1b90b. The rest keep it in black (#000000) color. Double click on the text layer, bring out the blending option. Apply 1px outside stroke with grey (#747474) color. Apply black to white Gradient with Soft Light Blend Mode. Then, hold CTRL and left click on the text layer thumbnail to bring out the selection. Go to Edit > Stroke > 1px , white, inside. Grab the rectangle tool and draw a rectangle above the title with color #464646. Apply 1px inside stroke with black color.

Step 3

Create a new folder and name it as “nav”. Grab the rectangle tool and draw a horizontal navigation bar, color #e1e1e1. Apply 1px inside stroke, color #c8c8c8. Type some dummy text. I am using 11pt Tahoma, grey (#7e7e7e) color for inactive link and black color for active link. Draw a rectangle for the active tab and draw the border using pencil tool. You should get the result shown in the sample above. Then, draw a horizontal white color line and place it 1px inside the navigation bar.

Step 4

Subscriber number (readers) is very important for a magazine site. It determinates the popularity of the site in some points. So, I decided to make it big enough and put at the top right of the site. I am using the same technique in Step 3 to achieve this. I am using 30pt Tahoma for the reader’s number.

Step 5

Create a new folder, rename as “feature”. We are going to use this section to display the headline stories. I am going to use the same technique in Step 3 to create the heading and title. What we need to pay attention here is the image size. I am using 220px X 100px where is nearly 2:1 ratio. This is a good option because when it comes to the detailed articles, the image can be resized easier and better.

Step 6

We can now create all the sections by using the same technique in Step 3. Remember to create a new folder for each section. This is to let you modify the layout easier in the future.

Step 7

For the icon we created for the author, refer to the image above. I am using 10pt Tahoma for that, so the icon should match the font size as well. I create 2 guide lines in order to draw the icon. In this stage, you need to zoom into 1200% to draw using 1px pencil tool. We can use the same technique to create the tabbing area icons for the top stories and recent comments.

Step 8

Member login is consider a must have section for magazine site. So, I put it on the top right of the site for easy navigation. I am using 10pt Tahoma for the typing and the similar technique we used before to create the button. You may notice that there is a 1 pixel white color stroke in between the outline and inner gradient. That’s to create the sharper look and feel for the buttons. To create the button, draw a rectangle using rectangle tool and fill it with light grey (#f3f3f3) color. Apply 1px grey (#cccccc) color inside stroke. Apply white to black gradient overlay with soft light blend mode. For the 1 pixel white color stroke, you can zoom in and draw using pencil tool or CTRL+ left click on the rectangle button, bring out the selection. Go to Select > Modify > Contract > 1px. Then create a new layer above the button. Goto Edit > Stroke > 1px inside white color stroke.

Step 9

We use the similar technique for in the footer part. Here, we create a button that allows the user to jump to the top of the page. This is pretty useful while there is a long article.

Conclusion

There are a few things we can conclude from the layout.

Font

You may notice that I’m only using 2 types of fonts for the whole design, Tahoma and Arial. I used Arial for the title and Tahoma for the content. It make the site looks professional, balance, neat and clean. I am using Anti-Alias None for the dummy text so that you can have the exact outcome when it is converted into HTML.

Color

I use grey color for the whole site and only 2 colors for the text links. This may create the consistency and user can browse easily.

Line Height

This is more to CSS / XHTML side. When I am using 12px font, usually the line height will be 18px – 22px. It’s depending on your preferences but never less than that.

Thank You

Thank you to follow this tutorial and I hope it can give you some tips in designing a site like this. I was wondering anyone interested to purchase a WordPress Theme like this? Let me know. Any feedback about this tutorial is welcome.

Mission

Before this, I’ve release a tutorial about the CSS sliding door using only 1 image. I will extend from there and what we need to do is to modify some codes. Before that, you can
.

Step 1 – HTML Structure

Let’s start here. This is a basic structure that we need. We need to put everything inside a div that we are going to control using the javascript. Here we use #tab. The beauty of Savvy UI is that the title of the div will be the anchor text for the tab buttons. The x-simpletab-panel is a pre-built class for the tab button within the system to make sure that the content within the div will be included in the tabbing system.

<div id="tab">
	<div id="tab-home" title="Home" class="x-simpletab-panel">
        <!--content goes here-->home content
        </div><!--tab-home end-->

	<div id="tab-products" title="Products" class="x-simpletab-panel">
        <!--content goes here-->products content
        </div><!--tab-product end-->

	<div id="tab-blog" title="Blog" class="x-simpletab-panel">
        <!--content goes here-->blog content
        </div><!--tab-blog end-->

	<div id="tab-contact" title="Contact" class="x-simpletab-panel">
        <!--content goes here-->contact content
        </div><!--tab-contact end-->
</div>

Step 2 – CSS

For the css part, we will need to create something to suit the system. There will be several auto-generated class for the ul, li and div that we use.

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

.simpletab-toolbar-container { /*container for the tab buttons*/
	float: left;
	width: 100%;
}

ul.simpletab-toolbar { /*auto generated ul with specified class */
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #fff;
	float: left;
	clear: left;
}

ul.simpletab-toolbar li {
	float: left;
}

ul.simpletab-toolbar li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.simpletab-toolbar li a em { /*auto generated em, the useage is same with what we used for the sliding dor as span */
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

ul.simpletab-toolbar li a:hover {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}

ul.simpletab-toolbar li a:hover em {
	background: url("images/blue.png") no-repeat top left;
}

ul.simpletab-toolbar li a.current {
	background: url("images/blue.png") no-repeat top right;
 	color: #0d5f83;
}

ul.simpletab-toolbar li a.current em {
	background: url("images/blue.png") no-repeat top left;
}

.simpletab-container { /*auto generated class for the content container */
	margin-top: 10px;
	float: left;
}

.simpletab-container .simpletab-active { /*auto generated class for the active content container */
	display: block;
}

.simpletab-container .simpletab-hidden { /*auto generated class for the in-active content container */
	display: none;
}

Step 3 – Download the Library and Implement

We need to build the Library that we need and implement into the codes. What we need is only the Simple Tab under Utilities. Then, implement into our system.

<script type="text/javascript" src="savvy-build.js"></script>
	<script type="text/javascript">
		SUI(document).ready(function(){
    		new SUI.Util.SimpleTab("#tab");
		});
	</script>                                

/*before the head close tag*/

The result so far.

Step 4 – Structure The Contents

Now, let’s try to add in some content and style it in what you like. Below is my example for it.

<h1><a href="#">Simple Tab Using Savvy.UI</a></h1>
<div id="tab">
<div id="tab-home" title="Home" class="x-simpletab-panel">
<div class="content">
<h3>Home</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-home end-->

<div id="tab-products" title="Products" class="x-simpletab-panel">
<div class="content">
<h3>Products</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-priduct end-->

<div id="tab-blog" title="Blog" class="x-simpletab-panel">
<div class="content">
<h3>Post Title 1</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-blog end-->

<div id="tab-contact" title="Contact" class="x-simpletab-panel">
<div class="content">
<h3>Contact</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-contact end-->

</div>

Step 5- CSS Again

After that, apply some CSS for it.

#tab {
	clear: left;
	width: 100%;
}

.content {
	border: 1px solid #59b9e8;
	background-color: #e0eef4;
	margin-bottom: 15px;
}

.post {
	padding: 0 10px;
}

h3 {
	background: url(images/header.png) repeat-x top left;
	height: 30px;
	font: 900 20px "Times New Roman", Times, serif;
	color: #fff;
	margin: 0;
	padding: 2px 0 0 10px;
}

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

p {
	padding: 0 0 12px 0;
}

h1 a {
	font: 900 200% "trebuchet MS";
	color: #59B9E8;
	letter-spacing: -1px;
	margin: 0;
	text-decoration: none;
}

h1 a:hover {
	color: #09f;
}

Conclusion and Download

It is simple and easy to do. Again, here is the end result. And below is the download for the source files that I used. Cheers!

The Image

Concept

The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.

HTML

<ul class="blue">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="products">products</a></li>
    <li><a href="#" title="blog">blog</a></li>
    <li><a href="#" title="contact">contact</a></li>
</ul>

Now, I add in a <span> for each of the link to hold the left hand side of the background image.

<ul>
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

CSS

1. <ul> – Unorder-List

ul {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

ul li {
	float: left;
	display: inline; /*For ignore double margin in IE6*/
	margin: 0 10px;
}

ul li a {
	text-decoration: none;
	float:left;
	color: #999;
	cursor: pointer;
	font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
	margin: 0 10px 0 -10px;
	padding: 1px 8px 5px 18px;
	position: relative; /*To fix IE6 problem (not displaying)*/
	float:left;
}

We need to make list-style as none because no image for any list within it. I use a float left here because I am going to use float left for the <span> and also <li>. I am not going to define a width for it because this is just a sample.

4. <Hover> – mouse over action

ul.blue li a.current, ul.blue li a:hover {
	background: url(images/blue.png) no-repeat top right;
 	color: #0d5f83;
}

ul.blue li a.current span, ul.blue li a:hover span {
	background: url(images/blue.png) no-repeat top left;
}

Since we are going to have the same effect for the mouse over and active link. I combine the codes.
Here is another example with 4 colors.

Compatibality, Conclusion and Download

This script has been tested in IE6, 7, Firefox 3.5.5, Safari and Google Chrome. This is a very useful technique which you can re-use in page with only 1 image. It is easy to use and I hope that you guys can understand my poor English explanation. Any question, just send me an email or drop me a comment here.

Update ( 10th Decemeber 2009 )

Thanks Dimitar Yanev for the advice to not using empty tags, I decided to update the codes. I hope you guys enjoy this little trick!

1. FONT

Usually, we beautify font with several line of codes like this :

h3.my {
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial", Helvetica, sans-serif;
	color: #333333;
	line-height: 24px;
}

<h3 class="my">Loon Design</h3>

Do you find the code is a bit too messy or too long? Here is my solution for them:

h3.my {
	font: 900 160%/240% "Arial", Helvetica, sans-serif;
	color: #333;
}

<h3 class="my">Loon Design</h3>

Will this cut down your coding time? The output will be:

Tips

• The order of the attributes are font: weight size/line-height family;
• 400 = normal and 900 for bold

2. Margin and Padding

Wondering what how to differentiate them? You check this site for details. We use margin and padding most of the time when we write up the codes. However, I am not to say the padding problem with IE6 ( seriously, I am having a bad time with IE6 during my work, may post it out later ) here but try to give you some tricks on how to make it in 1 line.

Normally, we code like this, we take margin as example :

.my {
	margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 5px;
        margin-right: 5px;
}

but now we can make it in 1 line like this :

.my {
	margin: 10px 5px 20px 5px;
}

Tips

• margin: top right bottom left;
• or when you have the same margin for the top and bottom, it become like this : margin: 10px 0;
• while margin: 0 auto; means vertically align.

3. Class and ID

the symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

ID
• IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.
• We consider that it has the higher level than class. It is more specific.
• can be used and an anchor name.

Class
• Classes mark elements as members of a group and can be used multiple times.

Actually, you can use both id and class in a div or element. It’s priority of attributes are depend on id first.

4. Ignore by IE – !important

This is a trick to write something that ignore by IE but can be run in all browsers. The attributes before the !important will be ignored by IE.

Example: margin: 20px !important; margin: 10px;

There will be 20px margin for all browsers except IE which will have the 10px margin. This is useful when you doing some positioning adjustments and most of the time it is showing different result in IE browser.

5. Block vs. inline level elements

Most of the HTML elements are block or inline elements. What is the different between them?

Block
• Always begin on a new line.
• Height, line-height and top and bottom margins can be manipulated.
• Width defaults to 100% of their containing element, unless a width is specified.
• Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements
• Always begin on the same line.
• Height, line-height and top and bottom margins can’t be changed.
• Width is as long as the text/image and can’t be manipulated.
• Example <span>, <a>, <label>, <input>, <img>, <strong> and <em>

Conclusion

Well, that’s all I wish to share with you guys. Feel free to drop me a message if you find any question about the provided tricks. Thanks!

Step 1

First of all, you may need some drawing skill in using Pen Tool. Anyway, it doesn’t matter if you really wish to learn. Since it is a simple artwork, so, I didn’t sketch on paper. Draw out the shape as shown below with the color given. That is actually a color code. You can easily find the correct color by inserting the number given into the color picker window.

Step 2

Then the mouth with the color given. remember to rename the layers you created for a easier modification later on.

Step 3

This is a bit tricky but I think it won’t make you stop here. It is actually not that hard. Just draw out the shape first and then double click on the created layer thumbnail to pick the correct color.

Step 4

Here is the ears. Watch carefully the animation steps shown below. You need to draw out the ear shape first. Then only create the shadow part. To create a clipping mask, select the ear_darker layer and press CTRL + ATL + G or you can hold down the ALT key and click between the layers you wish to be masked.

Step 5

Then the eyes, follow the steps shown below.

Step 6

Tail and nose…

Step 7

Again, for the shadow. You need to use the masking method.

Step 8

hand, here you may need to zoom in by pressing CTRL + + to draw the tiny part.

Step 9

Draw it’s teeth.

Step 10

Well, the basic shape is done so far. Now, we add some shades for it to make it look more real and give it some color tones. Pick the soft 175 pixel brush and set the foreground color to #000000 or black color. Create a new layer above the lowest shape layer you created in the first step. For me, I name it as body. Mask the layers as shown below and change the shade layer blend mode to soft light with 75% opacity. Now, simply click once at the bottom left of the stage to get the result. You can also resize the brush by pressing “[" (reduce) and "]” (enlarge).

Step 11

After you get your desired effect. Now, select the brush tool but this time with a 4 pixel hard brush. Press F5 to bring out the Brush Preset then checked the Shape Dynamics and Scattering. Pick up the Pen Tool and select path. You can refer the setting as below:-

Step 12

Create a new layer above all layers and start draw the outline of the mouse. You can learn the line drawing skill from my previous tutorial about Paint Rukawa. Below is the workflow:-

Ste p 13

Tadaaa! Here is the final art work. Simply add a some text there and here is the Lucky Mouse for Year 2008! For those who don’t know mandarin. The text read as “Gong Xi Fa Cai” which mean “May You HaveA Prosperous New Year”

This tutorials show you:-

• [ to reduce brush size and ] to enlarge brush size.
• CTRL ++/– to zoom in and zoom out
• F5 to bring out the brush preset
• CTRL + ATL + G to make masking

I found this funny. Few days ago, I receive a mail from my friend. It is about the art of paper. I bet you see this before but that is real photo. However, I think over and figure it out. Now, I am going to create the paper cut art with Photoshop.

Step 1

Open a document with 400 X 350 px, RGB, 72 DPI with white background. Immediately, create a new layer and rename it as paper. Apply this setting:-

Gradient Overlay
Blend mode : normal
Gradient from #69bbd3 (location = 65%) to white, reverse.
Angle = 90°

Step 2

With the custom shape, choose a desire shape and draw with holding shift with white color. You can download my custom shape here. Apply the following setting for the shape:-Gradient Overlay
Blend mode : normal
Gradient from Blackto white
Angle = 90°Drop Shadow
Blend mode : multiply
Opacity : 15%
Distance : 1px
Size : 0px
Uncheck global light, Angle = -155°

Step 3

CTRL + J to duplicate the shape and right click on the copy shape and clear the layer style. Change the shape color to black for easy modification. CTRL + T to enable the transform. Right click and select distort. drag the top middle point as shown.

Step 4

After confirm the transform. CTRL + Left Click on the layer to bring out the selection. Select paper layer and press del.

Step 5

Create a new layer and rename as inner. Draw as shown with the rectanlge marquee tool. Drag a black to transparent gradient. CTRL + Left Click on shape layer and select inner layer, click the add mask layer at the bottom of the layer pallete.

Step 6

CTRL + J to duplicate shape layer again and change the color to black. CTRL + T to transform. Select distort too and drag as shown.

Step 7

Rasterize the transform shape and go to Filter > Blur > Gaussian Blur > 3px. Set the opacity to 25%. Put it below shape layer. Open the wood picture and place it below paper layer. Done!

Below is another sample I did. Hope you enjoy this!

Recently I am busy with my company product video (yes, again…) So, I take some free time to create my first ever web layout Photoshop Tutorial. Since this is my first time, I bet that it must be some error or unclear section. Please comment as I can make it better for my next one. Thanks.

Step 1

Ok, lets start then. Create a new document with 800 x 800 px, 72 resolution, RGB. Background color set to #434343.

Step 2

Grab the text tool, type your site name and I use “YourSite” here. I use moonstar with 48px, white. Place it nicely on the top left of the page. Press F5 to bring out the brushes setting. Check the Shape Dynamics and use a 3 px hard brush. Create a new layer above of the text layer and name as line_layer. Grab the pen tools and select path. Draw the wave as shown below. This is very depend on you and how the shape you like. After draw a line, right click and select stroke path, check the simulate pressure and stroke with brushes.

Step 3

After complete the desired shape or wave, double click text layer or right click and select blending option. Check Outer Glow,color #009cff,Opacity 80%, Size 6px, Blend Mode Screen. Right click the text layer and copy the layer style. Paste into the line_layer. CTRL+J to duplicate the line_layer to make the glow lighter. Create a new group and name it as Logo and copy all layers except the background layer, into the group.

Step 4

For the top navigation bar, I use the simple but nice custom symbol as shown. To match with the theme, here are what I use. For the activated icon, simply paste the layer style that we had copy just now. I use 11pt Tahoma. Grab the Rounded Rectangle Tool, with 4px radius, draw a small shape (#2f2f2f)that can cover the icon and text as shown. Bring out the blending option. Use Stroke, 1px inside white stroke with 45% opacity. Inner Glow, normal blend mode, 45% opacity, 4px size, black. Put all these layer into a new group named as Nav.

Step 5

Grab the Rounded Rectanlge Tool, draw as shown below, about 2/3 of the page. Apply the blending option shown.

Step 6

Draw the shape shown below with the rectangle tool using color #2581de. Create a new layer below the blue layer and use the Polygonal Lasso Tool draw out the shape to make the drop shadow. With the new empty layer selected, fill it with black, Goto Filter > Blur > Gaussian Blur > 4px. Type the date with Tahoma, Bold, 30pt. and the month and years with Arial 9pt.

Step 7

Grab the Line Tool and draw a line. CTRL+J to duplicate the line. Press the up button the bring it 1px up. Use the color shown.

Step 8

You will get something like this. Put all layers into a new group named Body.

Step 9

For the sidebar, It is simple and the technique is excatly same with what we do for the logo. Here is this. For the gallery boxes. Appy this blending option. 1 inside white stroke 30% opacity. After all done, put all layers into a new group and name it as SideBar.

Step 10

Goto the Nav group and create a new layer, put it at the bottom in the group. Grab the Rectangle Tool and draw the shape. Apply the blending option shown below.

Step 11

Create a new group and name it as Footer. Draw the rectangle with the blending option applied.

12. Hurray! DONE!!!

Hope you enjoy this. Any comment will be welcome!

This tutorial will guide you to paint an artwork and turn it into a comic.I’ve made a tutorial about paint your work before but since they is some comment that the steps are not details enough. So, I decided to make one more which I think is more details in step by step painting and drawing.

Let’s start then. Still, you will need to use some shortcut key to faster your task.
{ = decrease brush size
} = increase brush size

Step 1

Open the artwork or you may use mine.

Step 2

Create a new layer and rename it as skin and set it to multiply. Paint the skin for Rukawa using the color shown below. You also may use your preferring colors here. Always start with the lighter color. Before start, you have to decide the lighting direction. Here, I assume that the light is come from the top left.

Step 3

Grab the smudge tool and set the hardness to 75%. Left click and drag between 2 colors to blend. This required some patient and may need to redo sometimes. So, do not rush. If you need the color to be lighter, drag from the lighter color to the darker and opposite if you prefer it to be darker.

Step 4

Create a new layer and rename it as shirt and set it to multiply. Use the color to paint like below.

Step 5

Smudge the color or blend them. Here, you need to resize the brush sometimes to make a sharper blend effect.

Step 6

Add some white color for the text on shirt and some light effect on the shirt. Smudge it.

Step 7

Create another layer and rename it as ball, blend mode multiply. Paint it with the color shown below. Smudge it.

Step 8

Create another layer and rename it as hair, blend mode multiply. Paint it with the color shown below. Smudge it. Then paint with darker color and smudge it. You may need to add some white color to make the hair more real. To smudge the hair, you have to use smaller brush.

Step 9

Paint the mouth and add some darker color to the area which you think need to be modified. This is an additional step which for you to make it better and better. Since I found that the color I use for skin is too light, so, I decide to make it darker. So, I just paint some darker color with same tone on the skin layer and smudge it. This is why I use separate layer for each part. Easy to modify!

Step 10

Go to windows > Brushes and use the setting below. Set the foreground color into black (#000000) and the brush size set to 3px solid / hard. Grab the pen tool and set it as below.

Step 11

The technique is simple. Below is the sample drawing. Draw a line with pen tool and right click and stroke path with simulate pressure using brushes tools.

Step 12

Slowly draw out the outline of Rukawa and DO NOT draw it in 1 shot. If you see it carefully, you may notice that the pressure part is always on the middle of the line. So, always draw a small part and stroke path. Then only draw a new one. You need to make it on a new layer. After that. Merge the layers by with CTRL + E and duplicate the layer. Set the new layer blend mode into soft light and 60% opacity. Done!

I bet that many of you wish to know how to paint your artwork digitally. Today, I am going to make a tutorial about this technique. I am still in the learning progress in this field, any mistakes or errors, please let me know and I am always ready to listen from you. This is an artwork that I draw for this tutorial. Always start with an easier one will be better for a beginner to get the concept for future development.

Step 1

Let’s start then. If you have your own artwork, sure you can use it and if you don’t own one, you can download mine. Open the image in the Photosop. Here is some shortcut keys for you :-

- [ to reduce brush and smudge size

- ] to increase brush and smudge size

Step 2

Create a new layer and rename it as face, change the blend mode into multiply. Grab the brush tool and set it to a 20px soft brushes will do. You can use the color given or you also can use the color you like. Always start with a lighter color is easier (I also don’t know why?), dont’t too care about the color painting, it can be overlapping. In this stage, the result maybe not so smooth. So, we need to use the smudge tool to make blend the color. This required some skills and technique. Well, great passion is needed for great output. After a while, you may get this:-

Step 3

Create another new layer and rename it as cloth, change the blend mode into multiply. Same grab the brush tool and after that smudge tool. Here, I add some white area as the lighting effects. You may ignore it if you don’t want.

Step 4

Create another new layer and rename it as cloth bottom, change the blend mode into multiply too. Brush and smudge.

Step 5

Create another new layer and rename it as hat, change the blend mode into multiply. This is a more difficult stage and I hope you can be patient on it. I also add some white area on the hat to make it livelier. To smudge it, you need to follow the flow of the drawing line.

Step 6

After that, create a new layer and name it as sword, multiply too. Same work.

Step 7

Finally, the hair part.

Step 8

Here is it!

Step 9

I make some filter effects to make it more look like a painted work. Merge all the color layers, go to filter > artistic > dry brush. Brush size 2, Brush detail 10 and texture 1. Finally, go to filter > texturizer. Texture canvas, scaling 50%, relief 4 and light is top. Here is the final output. Hope you enjoy this.

Today I am going to illustrate a “bird” from sketch to vector. To do this tutorial, you need to have some basic of illustrator drawing technique or you can refer to my previous tutorial. Ok, let’s start then.

This is my sketch:-

This is the more detail hand drawing:-

Step 1

Here we start the process. Scan the artwork into your pc. Open a new document with RGB color mode. Go to file > Place. Place the artwork on the stage. Reduce the opacity to 50% and lock the layer.

Step 2

Create a new layer and move it below the artwork. Rename it as feather. We start with the feather because it is at the backward of all part for the “bird”. Start illustrates and fills it with black color. You will get this:-

Step 3

Secondly, create a new layer and rename it as body. Draw the white feather as it is just above the feather layer. Sure, fill it with white color.

Step 4

Create a new layer, name it as mouth. Draw out the mouth and set the gradient as shown below:-

Step 5

This is the process to draw out the eyes. Still, create a new layer and name it as eyes. You need to use the pathfinder for this part:-

Step 6

after all, you will get this:-

Step 7

This part will be a bit more difficult but still using the same technique. Create a new layer and rename it as leg. Simply follow the steps shown below. You may also use your own color for this part.

Step 8

Lastly, create a new layer and draw out the tree. Put this below the legs layer.

Step 9

To make it look more real. Simply create a new layer and draw out the shadow for each part that you think is necessary.

Step 10

Here is it! Cheers! Hope you enjoy this. Any question, simply email me or leave a comment here. Thanks!

Tips:

• Differentiate each part with different layers and rename it properly. You can modify or enhance the work easier and in a better way.
• CTRL + C to copy
• CTRL + F to paste in front in same position

This will be a short and simple tutorial for photo edit. I try this during my lunch time yesterday and find it is quite interesting. So, I wish to share with you guys too. This is best for those who like photo with glow effect or a little fantasy effects. Well, check this out.

Step 1

Open the image, if you wish to use mine then download here. CTRL + J to duplicate the image and rename as glow.

Step 2

Go to Filter > Blur > Gaussian Blur > 3px. Press “D” to reset the color mode to default (black foreground and white background). Go to Filter > Distort > Diffuse Glow and set the Glow and Clear amount to 18. Graininess to 0. Set the layer opacity to 60%.

Step 3

CTRL + E to merge both layers. Go to Filter > Sharpen > Unsharp Mask. Set as below. Repeat 2-3 times to get the best effect by pressing CTRL + F.

Step 4

Create a new layer and rename as light. Grab the Polygonal Lasso Tool and make a selection as below. With Radial Gradient set foreground color to white. Drag it from top to bottom as shown. Go to Filter > Blur > Gaussian Blur > 60.

Step 5

Reduce the layer opacity to 50%. Well, it is done! Hope you enjoy this.

Here is another example:

Today, I am going to do a photo retouch tutorial to create clean and smooth skin. I think this is useful for girls who wish to have their own photo album. Again, I try to make my tutorial here simple and easy to learn but, sure, efficient. Ok, let’s start.

Step 1

Choose a photo for this tutorial and I use this, you can simply search from Google image or stock xchang or you also can use mine, download here. Open the image in PS. Rename the image layer to image.

Step 2

Grab the Patch Tool and make a selection around the unwanted area. Left click and drag to the area outside the selection.

Step 3

You will get this. If you fail to get this result, try and error will always help.

Step 4

After that, repeat the step 2 to clean up all unwanted area and object on the face. Finally, you will get this.

Step 5

To make thing better, we will retouch the skin for the girl. CTRL + J to duplicate the layer and name it as image_copy. Select image_copy (upper layer), grab the Lasso Tool and make a selection as below. CTRL + SHIFT + I (invert) and go to Selection > Feather > 20px. Press Del.

Step 6

Select image (bottom layer), go to Filter > Blur > Gaussian Blur > 4px.

Step 7

Select image_copy (upper layer), CTRL + J to duplicate. Change the blend mode to Soft Light and set the opacity to 60%. go to Filter > Blur > Gaussian Blur > 2px. Yup, you’re done! Hope you enjoy this!

Today we will have a photo edit tutorial and sure, it is simple and easy to follow as usual. I think you may see this in many music album CD cover and some artist poster or wallpaper. Ok, let’s start then.

This is the photo that I found in Google image.

If you wish to use mine, just download here.

Step 1

Open the image in PS.

Step 2

Go to the bottom of the layers palette and click on the Hue/Saturation option. Set the setting as below:

Step 3

After that, you may get this:

Step 4

Create a new layer and set it to Soft Light Blend mode. Choose a 48px hard brush and paint the new layer as shown below. You can choose the colors you like.

Step 5

Go to Filter > Blur > Gaussian Blur > 90 pixels.

Step 6

Yup, you’re done! It’s easy and now you can edit your photo yourself easily. Thanks!

Tips:

• The lower the saturation will decrease the color more.
• So, the lower the saturation will increase the visibility of the painted color.

Today I am going to do a very simple but very useful tutorial. It is about the blending option. Blending option is a very important component in PS and if you can get use to it well then you can make life easy when you doing graphic design. I choose to use text for this tutorial and you may also be able to use this technique in other object such as the button, logo and etc. let’s start now.

1.

Create a new document (400px X 200px) with white background color.

2.

Type something with a bold font so that we can see the effect more detail. I use Arial Black, 48pt and type LOONDESIGN again.

3.

Ok, let’s start with the blending option by double click the type layer. Check the Inner Glow Option and set the blend mode to normal, 35% opacity and 8px for size:

4.

After that, Gradient Overlay with 100% opacity and linear style.

5.

This is the most important part and you should do some experiments on this. For now, set as below:

6.

Final step, Stroke Option, 1px inside stroke with 100% opacity and the color shown below:

7.

You’re done! Easy, right?

8.

Here is some other examples, hope you enjoy!

Today I am going to make a tutorial for the text reflection. Actually I think you may also use this technique in other design for the reflection purposes. Let’s start then. Open the PS for sure then open a new document and we need it in 400px X 200px with white background.

1

Create a new layer, rename as gradient_background, with gradient tool, set the foreground color to #999999 and the background color to white (#ffffff). Drag from the bottom to the top of the stage and you may get something like this:

2

Select the horizontal type tool and write something there and here I write LOONDESIGN. I use supersonic for this typing with white color.

3

Double click on the text layer to bring out the layer blending option and we need to set the stroke and gradient overlay option like below:

4

CRTL + J to duplicate the text layer then right click on the copy layer and select Rasterize. Right click again and select clear layer style. CTRL + T to bring out free transform option and right click on the stage and select flip vertical. Adjust the position and you will get something like this:

5

Select the rasterized layer again, press “Q” on your keyboard to use the Quick Mask Mode function. Select gradient tool, drag by holding shift like shown below. Press “Q” again and press Delete once. Set the layer opacity to 60%.

6

Create a new layer below all layers but above the gradient_background layer. Take Elliptical Marquee Tool and draw a circle as the image below shows.

7

Fill it with black color then go to Filter > Blur > Gaussian Blur 2. Now adjust the layer to get the desired effect and change the Opacity to 30%. And you are done!

Now you can tune or set the text effect via the layer blending option and the gradient_background color with gradient tool. have fun!

As my tutorial had been choose for the Top Ten in June by NI-LIMITS BLOG. Now I continue my job and share my photo edit tricks with all my fellow readers.

Step 1

Open an image, I will use this image because it suit to my tricks.

Step 2

CTRL + J, duplicate the image. Now you will have a layer which labeled as “layer 1”. SHIFT + CTRL + U, desaturate the image and you will get something like this:

Step 3

CTRL + J again to duplicate layer 1 and you will get a new layer which labeled as “layer 1 copy”. CTRL + I to invert the layer and set the layer blend mode to Color Dodge. Go to filter > other > minimum > 1. Double click on layer 1 copy to bring out the blending option. ALT + left click on the triangle and set the underlying layer as below:

Step 4

CTRL + E to merge up both layers. CTRL + J, duplicate layer 1. Select layer 1 copy and go to filter > blur > Gaussian Blur > radius 6. Set the layer blend mode to linear burn. CTRL + J on layer background and put the layer background copy at the top of all layer and set the layer blend mode to color.

Step 5

Hope you are still with me. Select layer background copy and add a layer mask, fill it with black color.

Step 6

Still with the layer background copy, go to image > adjustment > curve and set as below.

Step 7

Create a new layer and put it top of all layer. Fill it with #ffecd1. Set layer blend option to linear burn.

Step 8

We are nearly there, now select layer 1 and set the opacity to 60% or whatever you think suitable. Select the background copy layer’s mask, with a 45px soft brush, opacity 65%, brush the face area. Here is it!

The difference:

Examples:

Hope you guys enjoy this! Thanks!

Today I am going to show the basic way to illustrate and image into vector. Basically, it is quite simple to illustrate an animate rather than a real object. Its color tone is simple and easy to apply. It is a good practice method for the novice. This is the image that I am going to use, Princess Mononoke( one of my favourite characther of Ghibli’s product ). I think I watch it for not less than 10 times…okok! Let’s start then …

Before start, here is some tips for you to make the process faster and easier.
*Ctr + C and Ctr + F = copy and paste into the original position but forward.
*CTR + +/- to zoom in/out.

Step 1

Open the image, double click on the layer and rename as img, checked the dim image=50%. Create a new layer and make sure it is below of the img layer. Pick the pen tool, start draw from the face area. We will only draw the outer line of the image. For the color, just use the eyedropper tool to pick up from the image we use on the area which we are drawing. Rename layer as face_bg. After that, you will get the result as below:

Step 2

After that, we will draw out the shadow area which is the darker side. FYI, you only need to draw carefully when the area is intersect with the others. Rename layer as face_shadow. After that, you will get something like this:

Step 3

To create the shadow area, select the face_bg layer then CTR + C and CTR + F. While the duplicated face_bg layer selected, left click on the face_shadow layer by holding shift. Goto window > Pathfinder, click the intersect shape area, then expand. As below:

Step 4

Next, we are going to draw out her eye. You need to zoom in to draw this part.

Step 5

After that, we will add the border for the face area.

Step 6

After that, we will draw her hair and hat.

Step 7

So, just continue the drawing by using the technique stated above. After a while you should get some thing like this:

We are done! So, remember, it is always esay to start from simple. have a nice day!