Why do you love the holidays? Is it because you get to spend time with your family, eat like crazy, open gifts, buy gifts, or to create some awesome text using Photoshop? Well, for me, it is all of the above <grin>. I love the holiday season, it brings out the best is everyone. For this tutorial, I will show you how to create some really cool candy cane text using Adobe Photoshop. I currently use CS4, but you could get this done in CS2, or CS3. Enjoy!

Step One

Open up Photoshop and create a new document that is 10px wide, by 1 pixel high. Zoom all the way in, and make half of the document red (#ff0000), and the other half white (#ffffff).

This is my zoomed in document.

Step Two

Turn this document into a pattern. Go to edit > define pattern and create a name for it.

Step Three

Create a new document with your desired size. For this example, I used 500 width x 100 height.

Step Four

In your new document, go to edit > fill. In the drop down choose pattern and then choose the candy cane pattern.

You will have this:

Step Five

You want to extend the height of this and hit control-t and then extend the top and bottom like so:

To make life easy, hit alt and shift before you make the background bigger. This will make like easier.

Step Six

Now you want to create the angle on this, so while you are still in transform, click on the middle box on the top or bottom, hit control + alt + shift and drag the mouse to the left (or right).
(click image for full view)

Step Seven

Click on your Text Icon and create new text.

It is hard to tell, my text is in white, and it says Candy Cane Text. Make sure the text layer is on top of the red stripes.

Step Eight

On your text layer, go to layer > layer styles > blending options…
Use the following options on your text layer.

Blending Options: Custom

Drop Shadow

Inner Glow

Bevel and Emboss

Gradient Overlay

You will not have this:

Step Nine

Now you want to create the red stripes that are outside of the candy cane text. To do this, hold control and hit the text layer.

Then go to Select > Inverse or hit shift + control + I.

Select the layer with the red stripe and hit delete on your keyboard.

Step Ten

Create a new layer on the bottom and add your background color or image.

You are now finished.

I used this effect on my person logo.

In this tutorial I will teach you how to create a grass scene in Photoshop. You can use this tutorial to create pretty nice looking cartoon inspired images as well. It is very easy to do with just a few steps. Lets get started, shall we.

Step One

Create a new document in Photoshop. I went with 550px wide by 350px high.

Step Two

Create clouds using a white background and a baby blue color foreground (#2fdfff).

Filter > Render > Clouds

Step Three

Create a new layer and apply the cloud again this time making the new layer 70% opacity.

Step Four

Create another layer and make this layer have a Linear Burn with 59% opacity.

Step Five

Lets start to create the grass now. You need to reset your brushes if you do not append new brush sets in. To reset the brushes, click on the brush tool, , then click the drop down (red color) then the over arrow (yellow color) and choose Reset Brushes.

Once you reset them, or if you append your brushes, we are looking for this brush:

Step Six

We need to add some dynamics to this brush, so pull up your brushes set (f5 on PC). Use the following settings:

Color Dynamic is very important because when you pick your foreground and background colors, the color dynamics will use colors within that realm. Doing so will give the grass a seasonal look. You will not see the changes in the preview box, but once you start painting, they are there!

Your brush preview screen will now look like this:

Step Seven

We need to change the color of the foreground and background now. You want to use two shades of green, one darker than the other. For the foreground use a dark green (#136500) and for the background use a lighter green (#2cc729).

Also, change the size of the brush to 52px.

Step Eight

Create a new layer, and start painting! Start about midway to three quarters down your background, and start painting and move downward with your brush, never go up (I will show you soon why).

What happens if you make an error and you need to go back to the top to level out the grass? If you do, that is fine, do not worry about it, but your image will end up looking like this:

Notice how the left side looks all messy compared to the picture before this? Well, no worries, just repaint starting from the top, going down.

Here is my edited grass using the last picture:

Step Nine

It looks good, but lets add some more depth to it. So, after you are satisfied with your grass, drag it to copy the layer.

Change the new copied layer to Color Burn and the Opacity to 33%.

Step Ten

We look like we are done, but I think the clouds could use some more coloring. With your paint brush, set it to a circle, with a diameter of 30px and a hardness of 0%. Also, change the flow to 20%.

Create a new layer and with your foreground being white, paint some extra clouds. You can mess around with the dynamics to the brush if you want, I didn’t and this was my outcome.

Step Eleven

Do the same as step 10, this time instead of white, use a baby blue color (#4ee4ff).

There you have it. You have an awesome looking cartoon grass effort.

Along with Facebook, Twitter has grown into a huge social network for a lot of people. You can find your average joe, celebs, employers, friends, co workers, family members – the list goes on! When you sign up to Twitter, you get a pretty plain background with ways to update it with standardized one Twitter offers. However, what if you could create your own? I will show you show.

There are two ways to create a Twitter background, one being a tiled background, like my twitter page, another to have some information and a picture/company logo to the left of the tweets. Whatever you decide to do, you need to make sure you find out what resolution people are using these days. After a few hours on my website, user resolution logger gave me these statistics.

Create a tiled/seamless background

Step One

Find seamless backgrounds. The backgrounds I found came from http://www.filterforge.com/.

Step Two

Once you find your background, right click it and choose copy image. I used this:

The size of this background is 512px by 512px.
You can use as many as you want, but for this example, I used this.

Step Three

Since you copied the picture from their website, just go into Photoshop, File > New, and size of the document should already be 512 by 512. Click OK.

Now hit Control – V to paste your background.

Step Four

Turn it into a pattern. In Photoshop, go to Edit > Define Pattern. Type a name and click OK.

Step Five

Create a new document that is 512px wide by 1024px high. The reason for 1024px high is because you want to double the height of the image. Doing this will make sure the image is completely seamless. Also, < 1024px high is about what the average user has for their resolution on their computer.

Now, go to Edit > Fill and choose your pattern. Then navigatie to your pattern.

(click image for full view)

Step Six

Add effects to the background.

(click image for full view)

Once you are finished with your image, save it as a .jpg.

Step Seven

Import it into your Twitter account. Login to your twitter account and then go to Settings at the top. Click on design. Then click on change background picture. Click on choose file. Finally, select your image, click the tile background check mark, and hit save changes.

You are finished with the seamless background tutorial.
Here is what my Twitter page looks like (follow me).

Create an informational twitter background

Think of this as a line card you would use in emails at work. However, now you can use graphics and get it to be much more enjoyable for the viewers. We need to look at the statistics again so here they are:

By the looks of it, more people are running on a 1280 x 800 screen resolution. We should base our background around that. However, there are a few people who use larger resolutions (I use 1920 x 1200 – 24in HP screen[w2408]). Therefore, I created a document in Photoshop in the size of 1350 x 900.

If you are going to base the tweet section around this document, then you need to find the middle of this document.

Step One

Turn Rulers on and Snap on in the View drop down. The width of the tweet section is 763px wide. Also, the height is 65px high from the top of the page, to the top of the tweet section. You want to keep that in mind when designing your background. Draw the rulers in to outline the center of your image.

(click image for full view)

Step Two

Start designing!
I will just design a basic template here and I will also provide you with a downloadable .psd in zip format.
(click images to view full size)

Here is the idea of the template. You have your top (black), your left and right (dark gray) and your middle (light gray).

Here is my design without the tweet section. As you can see, the left and right sides bleed into the middle.

Here is what it will look like with the tween section in it. Keep in mind, this is a 1350 x 900 area. If people are viewing it smaller, your information may be cut off.

Step Three

After you finished with your design, save it as a .jpg and log into your twitter account. Go to Settings at the top, click on design. Now, click on change background picture. Choose your file and make sure that file background is unchecked. Click save settings.

Download PSD

If you would like other templates for different sizes, leave a comment.
If you want me to custom design a background for you, leave a comment!

Download the template to the informational twitter background:

In part one of this tutorial, I showed you how to create the navigation bar from Apple’s website in Photoshop. In this tutorial, I will show you how to code the navigation bar in CSS. It is really easy so sit back, read over this tutorial, then open up your editing tool and get started (I used dream weaver).

Step One

In part one you were left off by putting the hover part under the normal stage and saving it as one file. Here is the image for reference.

Click image to view full size. You may right click it and save it if you wish. If you followed the first tutorial, just open you image. You want to measure each link. Below is an image to clarify what I mean.

Once you write those numbers down, we can begin.

Step Two

The CSS


<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

#applenav {
background: url(appnav.png);
height: 35px;
width: 978px;
margin: 0px auto;
position: relative;
top: 30px;
}

#applenav li {
list-style-type: none;
float: left;
}

#applenav a {
height: 35px;
display: block;
}

#one { width: 110px; }
#two { width: 110px; }
#three { width: 106px; }
#four { width: 134px; }
#five { width: 103px; }
#six { width: 127px; }
#seven { width: 110px; }

#one a:hover {
background: url(appnav.png) 0px -35px no-repeat;
}

#two a:hover {
background: url(appnav.png) -111px -35px no-repeat;
}

#three a:hover {
background: url(appnav.png) -220px -35px no-repeat;
}

#four a:hover {
background: url(appnav.png) -327px -35px no-repeat;
}
#five a:hover {
background: url(appnav.png) -460px -35px no-repeat;
}

#six a:hover {
background: url(appnav.png) -563px -35px no-repeat;
}

#seven a:hover {
background: url(appnav.png) -690px -35px no-repeat;
}

#search {
width:172px;
margin-left:5px;
}
</style>

Let’s explain the CSS as best we can.
We have a total of eight spaces, however, only 7 will be links and the last one will be the search field. Each state is the width of each link then we have the hover state which is taking the bottom of the image (-35px – rememebr, this image is 70px high in total) and creating the hover effect. The larger numbers in the hover effect,  are the numbers that start from the left hand side of our image and go outward. This will create the hover effect because it all lines up from the top to the bottom of our image.

Step Three

The HTML


<body>
<ul id="applenav" style=" vertical-align:top">
<li id="one"><a href="#"></a></li>
<li id="two"><a href="#"></a></li>
<li id="three"><a href="#"></a></li>
<li id="four"><a href="#"></a></li>
<li id="five"><a href="#"></a></li>
<li id="six"><a href="#"></a></li>
<li id="seven"><a href="#"></a></li>
<li id="search">search form here</li>
</ul>
</body>


Let’s explain the HTML as best we can.
The HTML consists of only the ul and li commands. Since this is pure CSS, all we need to do is create the simple commands to call the CSS to our image.

Test it out

There you have it. Feel free to leave a comment with any question’s or trouble’s you come across.

Anyone who has an iPod, iPhone, or any other Apple product more than likely has visited there website to get some sort of details on the product you will purchase. I do not have any of Apple’s products, but I do visit their website often because I love the look of it. So, in this tutorial, I will help you create the Apple’s navigation bar. In part one of two, I will design the actual navigation bar in Photoshop.

Step One

Open up Photoshop, create a new document and make it 1000 pixels wide by 47 pixel high.

Step Two

Click the Rounded Rectange Tool, , choose 4 for the radius, and make your shape. I used a red background to make it easier to see. I have this:
(Click image for full view)

Step Three

Add the following effects to the nav bar.

Gradient Overlay

Click image for full view.

Step Four

Add the Apple logo and the text. Use this for the apple logo. For the text, I used Veranda set at 11 pts and bold. Set it up to leave enough room at the right for the search field. The search field will be added in the part 2.
(Click image for full view)

Step Five

Add the following blending options to the text. This will be used for the ‘normal’ state.

Drop Shadow

Step Six

Make a new folder and put in the three layers you have right now. Name this folder normal.

Close the folder, drag to to the new layer icon, and name the new folder hover.

Step Seven (see edit’s at the bottom)

Open up the hover folder and make change to the blending options to the third layer (the nav bar).

Inner Shadow

Gradient Overlay

Now change the follow of the font to black. Change the drop shadow to white.
(click image for full view)

(This is wrong, please see updates at the bottom)

Step Eight

Add the lines that separate the links. Add a two new layers above the hover folder. The first layer will be a line from top to bottom in 6a6a6a. And two lines next to it (in the second layer) in white. Make the first layers opacity 42% and the second layer 9%.

Then make copies of them and move them over so they are between the rest of the links.

Click images to view larger.

Step Eight

Save the normal state and the hover state as png’s. Once you do that, you want to turn them into one image. Make the hover effect under the normal state. You new image will look like this (its ONE image):

Edit to Step Seven

I found that my Step Seven looks identical to Apple’s ‘active’ link. Therefore, I am glad you saved that, however, that was for the active stage. Apply the following settings to the nav bar layer for the hover stage:

If you ever played pool, you know the game is quite difficult. For me, the game is probably the hardest game besides the sport of golf. I decided to create a pool ball (the number 6 – solid). So in this tutorial you will learn how to design one for yourself. You may want one if you are buying a sports bar with pool tables.

Step One

Open up Photoshop and create a new document that is 500 pixels wide and 500 pixels high. With my example, I created a background. You can do this if you want, if not, fill the background with white (#000000).

Step Two

With your Marquee Tool, create a circle in the middle of the document. Do not fill the this with any color, but click on the Gradient tool. Make sure your foreground is a light red, and your background is a dark red. I used #ee8181 for my foreground, and #810000 for my background.

Select Radial Gradient and do the following:

Step Three

You want to create a dark bottom to the ball. Hit control, then click on the layer with the ball. This will highlight the circle. Create a new layer and go to Select > Modify > Contract and choose 5 (this number depends on the size of your ball). Fill this area with a black to white foreground. change the blending mode to Overlay, and the Opacity to 43%.

Step Four

Now you want to create the top shine to the ball. Hit control, then click on the layer with the ball. Go to Select > Modify > Contract and choose 10. Create a new layer, and fill it with white. Hit control, and click on the layer with the white circle, and go to Select > Modify > Contract and choose 3. Press delete on your keyboard. You will be left with this:

Step Five

Select your Rectangle Marquee Tool, change the feather to 10px, and draw a box just under the top of the white circle and press delete on your keyboard. After you hit delete on your keyboard, go to Filter > Blur > Gaussian Blur and choose 2.7

Step Six

You want to add some more glow to the top. Select the paint brush tool, with a large brush. Select white and paint under the fade that is already at the top. Go to Filter > Blur > Gaussian Blur and choose around 5.0 or 6.0. If that is not enough, change the Opacity of this new layer to 30% – 42%.

Step Seven

Press control and select the layer with the red ball. Create a new layer, and move the select marquee up the ball about 55% up. Fill it with white. While you are on this new layer, press control and select the red ball layer, then press shift + control + I (Select – Inverse) and press delete.

Change the blending mode to overlay and the opacity to 6%.

Step Eight

Now you need to create the number. In a new layer, create a small circle and fill it with white.

Step Nine

Go to Layer > Layer Style > Blending Options. Do the following:

Outer Glow

Inner Glow

Step Ten

Add the number. I used Arial font in bold.

Step Eleven

Add some shadow under the ball.

As design comes second nature to a lot of us, we try to come up with new ways to show our site visitors ways to improve the look of our personal or business website. Pressing text into a background is just another way to add a slight flare to your designs. This tutorial will be a quick one and will not be very hard. It only consists of two layers! Let’s get started.

Step One

Open up photoshop, create a new file with 500 pixels high x 500 pixels wide. Fill it in with a red/orange color (#db4848).
If you pressing your text into an already made background, you can skip this step.

Step Two

Add a lighting effect. Filter > Render > Lighting Effects…

I decided to apply the lighting effects twice, this step is optional.

Step Three

Add your desired text . Use a dark grey (#4a4343) for your text.

Step Four

Add the following blending options. Layer > Layer Style > Blending Options…

Inner Shadow:

Drop Shadow:

Gradient Overlay:

I recently got into the game of golf and I thought to myself, boy, wouldn’t it be cool to design a golf ball in Photoshop. Well, after trial and error, I finally came up with a good tutorial on how to design it. This tutorial does have a few tricky parts, but with the time, you can also design your very own golf ball in Photoshop.

Step One

The first thing you want to do is open up Photoshop, create a new document 500 pixels by 500 pixels.

Step Two

With your Marquee Tool, draw a circle (hold down shift).

Step Three

Fill it with white.

Step Four

Now create a new 500 pixels by 500 pixels document. Click on the custom shape tool (or press U), and choose the hexagon shape.

In your new document, create a hexagon like so:

Step Five

You now want to create a pattern with that hexagon. Click on the shape’s layer, and drag it over to the new layer icon.

Step Six

Move the new layer down and over and continue this process:
You may right click this image and save it if you wish.

After that is finished, you want to merge all the layers into one single layer. Do this by selecting all of the layers, right clicking on them, and then clicking on Rasterize.
If you used a lot of layers like I did, it will take come time depending on your computers hardware. However, once that is complete, highlight all of the layers one more time, right click them, then click on merge layers. This will make all of the layers into one.

Once you finish that, make a selection of the tiles and hit control c. Go back to the other document where your white circle was and his control v to paste it.

Step Seven

On the layer with the pattern, go to Filter > Distort > Spherize.

Press OK.

Step Eight

With your Marquee Tool, make a selection of the circle like so:

Hit Control C, then Control V.

Step Nine

Hit control T to transform the circle. Make it the same size as your white circle now.

Step Ten

On the layer of the white circle, add these blending options.

Step Eleven

On the layer with the pattern, click lock transparent pixels. Now, take your paint bucket with a white foreground, and fill the pattern area.

Step Twelve

Double click on the pattern layer, and add this blending option.

Click OK.

Step Thirteen

On the layer with the pattern - Change the fill opacity to 0%.

You will now have your finished golf ball!

Since today is my birthday, I thought I would get a tutorial up to show how to make balloons. I made a logo for my birthday that I displayed on the top of the website, sort of what Google does. Anyway, you may use this tutorial to create your own balloons in different colors, shapes, or sizes. Make sure to use them on your next birthday card!

Step One

Create a new document in Photoshop with 300 pixels wide by 300 pixels high.

Step Two

Create a new folder, name is B1, and inside that new folder create 2 layers. The bottom layer is going to be the bottom of the balloon, and the top layer will be the balloon.

Step Three

On the balloon Layer, with your Marquee Tool, , create an oval. Fill it with a blue color (or any color you decide).

Step Four

Now with the oval done, you want to create the bottom piece of the balloon. For that, you can use your Pen Tool, or the Lasso Tool. Make sure to do this on the bottom layer. Here is what mine looks like.

Step Five

Once you get the bottom done, hit control-E. This will merge the two layers into one.

Step Six

On that layer, hit Control-E, and click the layer. This will highlight the balloon shape. Create a new layer and with your gradient tool, Select White as your first color, and the second color should be white also but it should have an Opacity of 0%. Your balloon will look like this:

(Ignore my color change – I made an edit to the color.)

Step Seven

Now you want to create a duplicate layer of the Balloon. Inside of that duplicate layer, you want to add the same gradient tool and with your brush, you want to paint some effects to the balloon. Your brush should be 4px, 100% hardness, Linear Dodge mode, 24% Opacity, and 22% flow. Now pain on the bottom, middle, and top of the balloon.

Step Eight

You also want to add an Inner Glow to that layer. Use these settings:

Step Nine

Once you do that, make that layer lighten and layer’s opacity 46%.

Step Ten

Draw a simple string and you are finished.

Step Eleven

You may want more than one balloon and color. To do this, create a duplicate of the folder, this will create a new folder with the same effects (rename the folders if you want to). All you need to do is adjust the color. EASY!
When you create your duplicate folder, open it up, and there are two layers you want to change. Below is an image of the two layers.
(click image to enlarge)

Step Twelve

To change the colors of these two layers, click on each layer, then go to Image > Adjustments > Hue/Saturation.

Once you are in there, click on colorize and adjust the sliders to your likings. Make sure to adjust BOTH layer in EACH folder.

Step Thirteen

Here is the finished product.

With Halloween right around the corner, it is only fair to start some tutorials for it. This tutorial is going to have a lot of steps, but when you are finished, you will love the end result. This tutorial will go over how to make a vector style pumpkin in Photoshop.

Step One

Open up Photoshop, file > new and enter the following:

Fill the area with Black (#000000).

Step Two

Create a Pumpkin shape with the Elliptical Marquee Tool ().

Step Three

Fill the area with Black (#000000), and change the fill to 0%. Now add the following blending options:

Step Four

With that done, you want to copy this into a new layer. Once you do that, you will hit Control – T, and move the edges inwards, like so:

Do that a few times:

Step Five

For the last inlet, you want to drag another section over, remove the inner glow, and change the gradient overlay like so:

Step Six

Now for the eyes and the nose. You want to use the ‘already made’ shapes . Find the triangle and click it.

Draw one eye for now and apply these settings to the layer:

You will now have this:

Copy the one eye into three more layers. Move the second layer over to the left. Move the third layer you made down between the eyes, hit control T, hold shift, and make it smaller.

Step Seven

Now we need to draw the mouth. To do that, you want to create a large oval like so:

Hold alt down, draw another one over the previous circle, and you will be left with a mouth. You may want to try it a few times until you get it right. It does take some time getting the “perfect smile“.
To make the teeth, choose the square marquee tool and draw two small rectangles. Apply the same settings as you did for the eyes.

Step Eight

Now for the top. On a new single, draw out an oval for the bottom, hit shift, and draw out the top portion. With brushes (small), fill in the area the best you can to make it look like the stalk of a real pumpkin.

Step Nine

to add some more effects, which is options, go to the last layer in your layers palette, create a new layer, select the circle marquee tool, make the feather 50px, and draw a circle like so:

Select your gradient tool, pick a dark orange (almost brown – #b73600) to transparent, and start by the pumpkin and go outward.

]]> http://www.mattginsberg.net/tutorial-design-a-pumpkin-for-halloween/feed/ 0