In this tutorial we will learn how to design a logo of a company that sells pears!  Looks like they are getting pretty high tech these days.

Note: As a General rule every step should have a new layer.

Our Final Result of this Photoshop Tutorial, Click to View Large

Step 1
Create a new document with the following properties:

Width: 1000 pixels
Height: 800 pixels
Background Color: #b1f6ad

Step 2
Now use the Ellipse Tool (m) and make a selection like below, fill that selection with black:

Create a Circular Selection and fill it with black Tip: Press Shift to make a perfect Circle Selection

Step 3
Follow the same procedure but this time create a smaller ellipse near the top of the other circle and slightly to the left. Also fill it with black.

Add another Smaller Circle

Step 4

With both of your circle layers selected press ctrl+t (transform) and then while altering the top left vertex press ctrl+alt which allows you to skew only one side of the pear that is taking shape, move the mouse to the left until it looks like below:

Press Ctrl T and the Press Ctrl Alt to Skew only one angle of the Pear

Step 5
Now Press Ctrl+e to merge the topmost Circle with the Bottom Circle Layer

Make sure Both Circle Layers are merged

Then ctrl+click on the Layer Thumbnail this will generate a selection of your pair logo, go to Select > Modify > Contract and Contract the Selection by 10 pixels Fill that selection with white to come out with the following:

Add in a Middle White Area, kind of like an Oreo Pear

Step 6
Do the same thing as last step except for this time Only Contract by 5 pixels Fill this selection with #31e727 To come out with:

Fill the inner middle area with #31e727

Step 7
The next few steps might be a little confusing but here goes:

ctrl+click the layer thumbnail of the “Green” part of the Pear
Pull out the Elliptical Marquee and Press Alt to do a Substraction Selection and Un-Select the Top Half of your pear
Press Ctrl + Shift + I to invert your selection
Fill the inverted Selection with White

You should come up with something like below, if you find the steps above hard to follow let me know, I might make a video tutorial of this one. but basically you have to make a selection like below: (doesn’t need to be exact) Press ctrl+alt+g while the white layer is selected to mask it to the “Green” Pair Layer.

Do your Best to get this kind of a selection and fill it with White

Step 8
Now you need to change that White Area to a Gradient of White to Transparent you can do this by duplicating the white layer, and then ctrl+clicking the thumbnail to make a selection of that layer, then fill it with a white to transparent gradient with a angle to the left, set the layer mode to “overlay” you should come out with below:

Make a Gradient of White to Transparent, set the Layer Mode to "Overlay"

Step 9
Now you need to add the following Inner Shadow to your “Green” Layer

Apply these Innser Shadow Styles to your Green Layer

Step 10
Add a bunch of similar “Pear Spots” to the top left of your pear, fill them with #23a71c and then Set their Layer Opacity to 60% to come out with:

Add a couple of Spots to the Photoshop, change layer opacity to 60%

Step 11
Use the Pen Tool to create a Stem Like Below:

Use the Pen Tool to create the Pears Stem

Step 12
And finally I added some text for the company, and some shadows around the edges:

Our Final Result of this Photoshop Tutorial, Click to View Large

I hope you enjoyed the tutorial, let me know if you have any questions.

So what can we learn from designing a logo of a pear? Well you can learn how to design logos, and that designing logos of fruit is always a good idea! Look at Apple.

“Lt. Dan Invested in Some Fruit Company … Then we didn’t have to worry about money no more, and I said, Great! One less thing” – Forrest Gump

Very Go Green Logo Tutorial in Illustrator, excellent introduction to Illustrator

Click Here to see the Tutorial

Very Go Green Logo Tutorial in Illustrator, excellent introduction to Illustrator

Click Here to see the Tutorial

Create the logo of the best browser in Photoshop!

Click Here to see the Tutorial

Sony Ericsson has a pretty cool logo, learn how to design in Photoshop

Click Here to see the Tutorial

Create the Windows Vista Icon in Photoshop, excellent effect!

Click Here to see the Tutorial

Use Photoshop to create Grungy style logo Design!

Click Here to see the Tutorial

Create a highly professional Web Logo using Photoshop, very high quality!

Click Here to see the Tutorial

Use Photoshop, and possibly an ATI Graphics card to design the ATI Logo!

Click Here to see the Tutorial

Design the Volkswagen Logo in Photoshop.

Click Here to see the Tutorial

Use Photoshop to create the Skype Logo

Click Here to see the Tutorial

Use Photoshop to create cool looking Logos VIDEO TUTORIALS!

Click Here to see the Tutorial

Description

In this tutorial we will be creating a Logo with some cool effects and a
professional final look.

Objectives

• Layer Opacities and Styles
• Text Effects
• Blending Options
• Text Reflection

Final Result:

Step 1:

Create a new document 439×153 pixels, fill the background with Black #000000 and
write your text, in my example “Company Name”
(i used the font “Helvetica” for the text).

Step 2:

Let´s put some colour to the text. Fill the word “Company” with #FF9600 and “Name”
with #6B6B6B.

Step 3:

Now we are going to create the reflection. This is done by duplicating the text
layer and going to Edit>Transform>Flip Vertical

Step 4:

Now rasterize the layer (Layer>Rasterize>Text), take the Rectangular
Marque Tool
and select the half part of the layer like this:

Step 5:

Now press Alt+Ctrl+D and write 25 in the box, then press the Delete buttom two
times, Ctrl+D to deselect the layer and change the opacity to 60% (you can play
with this number if you like), you will have the reflection like this:

Step 6:

Select the Text Tool and write the slogan, in my example “your slogan goes here”,
i used the Trebuchet MS font and with a space between each leater to make it
looks better, like this:

Step 7:

Now let´s create a new layer (Ctrl+N) on the top of the text layer (not the
reflection one, the Company Name layer), and let´s select the Elpitical Marquee
Tool. Press D and X to use the White colour and draw an eliptical selection on
the text like this:

Step 8:

Then fill that selection with White (Alt+Backspace), you will have something
like this:

Step 9:

Then press Ctrl+G on the white selection layer to get this:

Step 10:

Then change the opacity to 20% (you can play with this number too), you will get
this:

Step 11:

Finally you can add some symbol to your Logo, i added an orange parrot on the
last “e” of the word Name (i used the Personaliced Shapes to add the parrot),
and finally you will get this:

Conclusion

Well I hope you enjoyed the tutorial, if you have any questions be sure to leave a comment below!

In this tutorial we will design a new Logo with some live and cool colours
for a Free Download page.

Objectives

• Logo Design
• Blending Options (Text Effect)
• Movement Effect for a Symbol

Final Result:

Step 1:

Create a new document 400×150 pixels, white background, and take your Text Tool
to write your SiteName, in this case “Free Download” (for this logo i used a
font called Humanst521), fill the word FREE with #7C7C7C and DOWNLOAD with
#27C12E:

Step 2:

Let´s add the Download arrow, create a new layer, zoom in to the L of the “Download”
word and use the Rectangular Marquee Tool to draw a vertical rectangle to make
the L larger, and fill the rectangle with the same green (#27C12E), like this:

Step 3:

Then you have to make larger and fill the lighter green area of the L, to do
this make a new rectangle continuing the other part of the L as large as the
previous, and fill the rectangle with this green (#93E096), like this:

Step 4:

Then merge the two layers (this one of the rectangles and the text layer, also
to rasterize it).
Create a new layer, and select this green for the principal colour (#27C12E),
then take the personalized shape tool and draw the following arrow:

Step 5:

Go to Edit>Free Transform to turn the arrow down and put it under the L to close
the arrow:

Step 6:

Now merge the two layers, double click on it to go to Blending Options, put the
same values as shown on the following images:

you will get something like this:

Step 7:

Now create a new layer and take the eliptical marquee tool, draw an eliptical
selection on the top of the text, like this:

Step 8:

Now fill the selection with White and press Ctrl+G, then Ctrl+D to deselect and
low the opacity to 20%, you will get this:

Step 9:

Now create a new layer and write your slogan under the text, in my example
“Slogan Goes Here” (i used the font “Kartika” with a space between each letter):

Step 10:

Finally, let´s add the bird, create a new layer, use the personalized shape to
draw the bird with this colour (#828282):

Step 11:

Now duplicate two times that layer, and for the top layer let the opacity in
100%, for the middle layer 45% and move it to the left, then for the bottom
layer low the opacity to 20% and move it to the left to get the movement effect,
here is the final logo design:

Please tell us what you think.

Objectives

In this tutorial you will learn how to create a smooth style website layout with a technique I have dubbed Whiteshading, this is Version 2 of the popular tutorial

• Fundamentals of Web Design
• Color choice ideas
• ‘Whiteshading style’

Difficulty Level: Intermediate

Final Result:

Zoom

Step 1:

First create a new Photoshop document 16×16 pixels in size:

Step 2:

First pull out the pencil tool (you’ll be using this alot) and set your foreground color to: #7C7C7C, Zoom in as far as you can zoom in and use the pencil tool to draw out an image like below:

Step 3:

Next set your foreground color to white and fill in the areas where the paper would be **BE SURE TO TURN OFF ANTI-ALIASED IN THE TOP RIGHT OF PHOTOSHOP

Step 4:

Now pull out your pencil tool again and set your foreground color to #C2C2C2 and draw a shape like below:

Step 5:(optional but recommended)

Zoom out sit back relax and enjoy the results of your work so far (*^_^*)

Step 6:

Now create a new layer and with the pencil tool and foreground color set too #242424 draw out a rectangle like below:

Step 7:

Create another layer and use the pencil tool to fill in the area inside of the upper left rectangle with #3E9FE0

Step 8:

Now apply the following Gradient Overlay to the layer.

Click on the Gradient to bring next option up

Which should produce:

Step 9:

Now you need to insert the text ‘PS’ for Photoshop, use a System font like System, or MS Sans-serif, set the font to really small and the Anti-Aliasing of text to ‘None’ Type in PS (believe me, it says PS down there). If you can’t find a font that works then just draw out the white shapes with the pencil tool.

You should have the following so far:

Step 10:

Last thing to do is insert the Photoshop Feather, download the feather below by right clicking and selecting ‘Save Picture As’, save it to your hard drive then open it in photoshop:

Copy the image and paste it into your icon on a layer directly under the layer with the ‘PS’ box on it, but above the paper part in the backgroud,go to Edit > Transform (ctrl+t) so that you can resize the feather to a size that fits inside of the paper:

And walla your done:

But don’t stop there! Use your newfound pixel skills to do other cool stuff

First start by creating a new Photoshop image, 500 x 400 pixels, with a white background. Make a new layer and use the circular marquee to create a selection like below and fill that selection with Black #000000.

Now using the circular marquee tool make two selections like below and press delete to make the circle have divits and breaks.

Make a selection like below, then go to Select > Transform Selection and rotate the selection like the second image, then press delete.

Ok, now create a new layer and ctrl+click on the layer with the black ‘Circles’ to make a selection of that layer, then go to Select > Modify > Contract and contract it by about 5 pixels it should look like below:

Now making sure you are in the new layer use the paintbucket tool to fill the top two “shapes” with #0084B2, the bottom two shapes with #00B4D6, and the top right shape with #EC4E3B.

Now apply the following layer style settings to the layer:

That should produce:

Drop the opacity of the black layer to about 20-30%

Now we need to work on the Logo text I used the font Trebuchet MS below with the text ‘company’ being the color #0074A8 and the text ‘name’ being the color #F57558

Now create a new layer above the ‘Company’ Layer press ctrl+g to make this layer a mask of the layer below (ctrl+alt+g for cs2), use the rectangular marquee tool to make a selection of the top half of the text then pull out the gradient tool, set the color of the gradient to white to transparent and drag from the top to the center of the marquee, like below.

Do the same with the ‘name’ text to produce

I hope you enjoyed the tutorial, if you liked the tutorial or have any questions, be sure to leave a comment below!

Welcome to the CSS Header Tutorial! Today we are going to be building a scalable cross platform header which will validate strict XHTML on W3C. Our finished design will look like this:

This CSS Web Header Tutorial is an excellent supplement to all of our photoshop tutorials.

Note: This Tutorial assumes you have a basic knowledge of HTML/CSS editing

Click image to preview CSS Header

Step 1: Your going to need to download all of the images that I use here:

Download CSS Header Files
(size 14.1KB files: index.html, headtop.png, logo.png)

Make sure you save all the files in the same directory!

Step 2: Your going to need to open a text editor (like Notepad Start – Run – Type Notepad) to edit your HTML and CSS create a file named index.html Tip: I personally use VIM as an editor.

Step 3: First of all we need to create the HTML of our website and assign all the various areas different ID’s

index.html

————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<title>CSS Header</title>
</head>
<body>
<div id=”wrapper”>

<div id=”header”>

<div id=”logo”>

<img src=”logo.png” />

</div>

<div
id=”mainMenu”>

<a href=”link”>Home</a> |
<a href=”link”>Download</a> | <a
href=”link”>More Links</a>

</div>

</div>
</div>

</body>

</html>

Lets break that down:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>

That bit of code declares your website as an XHTML website, which helps be more cross browser compatible (e.g. Internet Exploer/Firefox)

The rest of the code assigns the areas of your page to different ID’s so you can style them in CSS e.g.

Right now your website wont look like much so you will need to use CSS to design it

Open a new document and save it as style.css in the same directory as index.html

Let’s look at the coding for style.css

———————————-

body{

margin: 0;

padding: 0;

font-family: Verdana;

}

a{

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

#wrapper{

width: 100%;

background-image: url(‘headTop.png’);

background-repeat: repeat-x;

}

#header{

width: 80%;

height: 194px;

margin-left: auto;

margin-right: auto;

position: relative;
}

#logo{

float: left;

margin: 80px 0 0 0;

}

#mainMenu{

float:right;

margin: 160px 0 0 0;

color: #FFFFFF;

font-size: 11px;

}

Alright so we will look at it from the top, we first change the body attribute to have no margins or padding this allows the website to be Flush with the window, we also change the Font to Verdana

Next we change the appearance of the links (the a attribute) set it text-decoration to none (no underline) color to #FFFFFF (white) and it’s weight to bold

Now the wrapper is quite interesting. we set the width to 100% of the entire page, set the background image to ‘headTop.png’ and the background-repeat to repeat-x. what that does is makes the background only repeat on the x (horizontal) axis so that it doesn’t spread across the entire page, it only spreads on top. Thats a pretty nifty attribute

Hopefully you are noticing how the #idName controls the id that’s in the HTML e.g. #wrapper controls the div that was given the id of wrapper

The next id we change is the header Which is where the logo and the links are. The width is set to 80% of the page height to 194 pixels (the height of the background image) notice the margin-left and margin-right are set to auto, this is what causes them to center.

Now for the Logo it is set to float: left, this allows it to align to the left of the div without ‘pushing’ things down. I used CSS Shorthand on the margins like this margin: 80px 0 0 0, what does that mean? Well it’s like this margin: top margin#, right margin#, bottom margin#, left margin#. So essentially I only set the Top Margin to 80 pixels which pushes the logo down 80 pixels.

For the Main Menu you do essentially the same thing as the Logo except float it to the right and push it down a bit more pixels.

Don’t forget to link the HTML file to the CSS file like so

Goes into

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<link rel=”stylesheet” href=”style.css”
type=”text/css” />

<title>CSS Header</title>
</head>
<body>

My advice is to use this tutorial and then mess around with the settings until you figure out what they all do in CSS

Please Contact Us with any questions or comments

Thanks for reading

Be sure to also check our photoshop tutorials

To begin, create a new Image in Gimp with the following properties

Now that the new image is created create a new layer and name it Arrow-One use the rectangular select tool and create a selection with the following properties: Tip: Look to the left for these properties

Use the bucket tool (Shift + B) and fill the selection with the color #4DA900 you should now have the following:

You are now going to need to create a Triangle to do this activate the View-Show Grid option and the View-Snap To Grid Option, this will aid in the creation of the triangle. Select the path tool and use it to create a selection like below:

after you are finished, look to the left hand side and click the ‘Selection from Path’ button, this will create a new selection. Use the bucket tool and fill your new selection in with #4DA900 again. It should look like below.

Tip: You may need to move the selection around a little bit to get it aligned properly. You can also remove the View-Snap to Grid and Show Grid options.

Now right click on the Layer with the arrow on it And select Alpha to Selection this will select the arrow, now right click in the image editing area and choose Select then Grow this will expand the selection by a certain amount of pixels, grow it by 3 pixels like below

Now create a new layer underneath the arrow layer and name it Arrow Border use the bucket tool and fill the selection with white #FFFFFF. Right click in the selection area and go to Filters – Light and Shadow – Drop Shadow like below:

In the Drop Shadow Dialouge be sure to apply the following settings

Now right click on the main Arrow layer and select Alpha to Selection this will create a selection for the arrow, create a new layer and select the Rectangle Select Tool now press and hold ctrl and then drag a selection around the bottom of the arrow like below.

It should now look like this

Now select the Blend or Gradient Tool (L) and set it’s properties like so:

Create a new layer and name it Highlight Layer Now drag the gradient in a vertical line from Bottom to top Like so

Which should make it look like so: Tip: You can adjust the opacity of the highlight layer for a more realistic appearance

Now, merge every layer except for the background layer, Duplicate the newly merged layer, pull out the rotate tool click anywhere in the editing window and set the rotate tools angle to the following settings and press rotate. (only modify the angle

Now use the Move tool to position the newly created arrow underneath the first Arrow.

Now we can work on the Text of the logo

Pull out the text tool and click anywhere you want the text to be

I set the Text to the following properties

Now type in whatever you want for the tutorial I typed ‘study’

Once again right click on the new ‘study’ layer and choose, Alpha to Selection Create a new layer under the ‘study’ layer and right click in the image editing area and choose Select then Grow this time choose 2 pixels and your selection will grow Fill the selection with white #FFFFFF, and apply a dropshadow (right click – filters – light and shadow – drop shadow) with the following properties:

And there you have it, do the same as the previous step with the rest of your text and you will come out with.

Step 1: First creat a a new image, make the background transparent, and the size 120 pixels wide by 240 pixels tall *note see the tip above to see about standard web banner sizes.

Step 2: Now you are going to want to create the shape of the affiliate banner using the rectangle tool set the radius of the tool to 10px put the cursor near the top left hand corner of the document and drag down towards the bottom right of the document. *Note* If you want to use the same color scheme we use, remember to set the foreground color to: #009543; Or you can fool around with a color you think would look good, or better portray your message.

Step 3: Next apply a stroke to the layer,

I applied the following settings.

Step 4: We are now going to be adding some glow effects to the banner, first make a new layer, by clicking on the new layer button , Now with that layer selected press ctrl+g, what this will do is make that layer “Mask” the layer underneath it i.e. things will only show on that layer if it is “touching” stuff in the layer underneath it. Grab the rectangular Marquee tool , make a selection of about the top 4th of the rounded rectangle box, now select the gradient tool set it’s style to foreground to transparent (top box you can make the gradient tool work by making it move from solid color to transparent color), and drag the gradient tool from top to bottom like so. REMEMBER!! to set the foreground color to #00F943 and the gradient from solid to transparent.

To come out with:

note how the solid to transparent gradient is selected, as well as the correct foreground color

Step 5: Now we are going to do about the same thing just a more subdued gradient, pull out the marquee tool again make a selection from the bottom up to almost 3/4′th of the way. After that pull out the gradient tool, , remember to keep the same settings as the previous step and use the gradient tool like so *note how we don’t “pull” the gradient all the way through the marquee this allows for a more “blended look”:

That should produce this:

And that is about it, I borrowed some photos from MorgueFile.com A great website that offers free professional stock photos. I cropped the images from there and positioned them on top of that banner, then added the Monkey Feather Logo (MonkeyFeather.com is a high quality hosting company that psdesignzone.com recommends above any other!) and some other advertising text with an outer glow to get a decent looking affiliate banner like below: