Pixel buttons in Photoshop

We are going to be creating pixel buttons like so

First off create a new image document, I made it 100 x 50 pixels, now you need to use the paintbucket tool to fill the background with #D5D3BF.

After you create the new image with the background color set the foreground color to #313025 and pull out your pencil tool set it’s width to 1 pixel, create a new layer and draw a shape like below.

I found it very helpful to zoon im using the zoom tool so it was like this

Now use the wand tool to click inside of the black outline and select inside of it. Then create a new layer .

Now be sure that the new layer is selected (layer 3) and set your foreground color to #9F9B74, then pull out the paintbucket tool and click inside of your selected area to fill it with that color:

Now comes the fun part we’re going to make a highlight of the button, first set the foreground color to #B7B391, then using the pencil tool draw a 1 pixel line around the top left hand corner of the button like so, be sure you have created a new layer

Now simiarly we are going to create a shadow, pull out the pencil tool again and set the foreground color to #797353, then in the bottom right hand corner of the button draw the shadow, it should look like this

Create a Photoshop icon in Photoshop

We are going to be making a very small icon , using the famous Photoshop Feather logo! This should help you in some basic Pixeling concepts.

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

Modern Logo in Photoshop

We are going to be creating a modern Photoshop Logo like below:

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!

Create a Mac Style Interface Button in Photoshop

In the following tutorial we are going to be creating a stylized button like so

First off you are going to want to create a new document. I used the following settings.

Use the Fill tool to fill the background with white #FFFFFF, Create a New Layer over the white background and grab the marquee tool , create a selection directally in the middle of the document filling up about 75% and fill it with black #000000 useing the paintbucket tool again (see below):

Now with the blacklayer selected go to Filter > Blur > Gaussian Blur use these settings:

After that set the layer with the black on it’s opacity to 20-30%

Now we are going to create a highlight of the whole area, create a new layer now grab your marquee tool and select down to almost halfway, then pull out the gradient tool set your foreground color to white #ffffff, set the gradients style to foreground to transparent (see pic), and drage the gradient tool over almost the whole document.

To come out with:

Now we need to create the button part, first grab the

Circular Marquee tool , create a new circle selection that almost fills the whole document (see pic) and fill it, using the paint bucket tool with white #ffffff

with the layer with the white button on it bring up the layer styles for that layer select dropshadow and apply the following settings:

Now we need to make the button have a shadow in it, first create a new layer and press ctrl+g to have that layer mask the layer under it, then select the Circular Marquee tool and create a circular selection in the center of the button circle. Now set your foreground color to Black #000000, and select the gradient tool set the gradient style to black to transparent and drag from the top left of the Circular marquee to almost all the way through it (see pic)

You should end up with something like this:

Set that layers opacity to about 15-20% to dim down the shadow a bit.

Well that’s it for this tutorial, I fooled around a bit more and came out with this.

some type of Music player skin.

Create a Moniter Icon in Photoshop – Page 2

Learn how to create a cool looking Moniter Icon – Page 2

Page prev 1 2

Now we are going to start coloring the monitor, to begin first create a new layer and position that layer UNDER the layer with the monitor outline. then pull out the trusty Pen Tool again and draw out the shape of the front of the monitor, set your foreground color to #E2E2E2 then right click and choose fill path.

Fill the path with the foreground color, now use the pen tool again to make another path for the shadow of the monitor and fill it in with #C9CACB

Ok, now for all of the next steps you are going to be wanting to be creating new layers for each seperate color element, when you create a new layer position it relative to the rest of the layers so that it will show and hide the right things.

Next create a path of the entire base and fill it with #E2E2E2

next you need to create the shading of the base, create the shapes like below and fill them with the corresponding colors.

Now pull out the Burn Tool, (just under the paintbucket tool) set its radius to 6 and draw a line like below, do this 2-3 times and each time lower the radius until you get to 1px.

Now use the Wand tool to select the area where the screen of the monitor is, go to Select > Modify > Contract, and contract it by 10 pixels, you should have below.

Now fill that selection with #0047B6, then choose Select > Modify > Contract once again, and contract it by 1 pixel, use the gradient tool set to white to transparent, and drag the gradient tool like so:

Ctrl+click the blue screen layer again, and use the gradient tool again only this time use black to transparent to make a shadow of the moniter:

Change the opacity of the gradients, and try changing the color of the moniter around, around I came out with:

Page prev 1 2

Create a Moniter Icon in Photoshop

Page 1 2 next

In this tutorial we will be covering the Basics of Icon creation by creating a ‘monitor’ icon like below. We will be using the Pen tool and be practicing a fairly common illistration technique for icon development.

First create a new document, I made mine 400 x 400 pixels with a white background. Next pull out the pen tool , and then configure your brush tool to be 3 pixels wide. (make sure you configure the brush tool like below) Also be sure to create a new layer over the background layer.

Next with the pen tool

create a shape like below. Note that I am zoomed in, in this picture.

Now right click in the area and select stroke path (pictured above), when the dialouge box comes up choose the following options.

Press ok, then right click and choose Delete Path you should come out with the following:

Next you will need to use the pen tool again and create lines like the following image

Now this part will probably

be the hardest part so you may mess up a few times but keep at it until you get a good curve. With the pen tool, and on the same layer make a path like below (to do curves when you click the second time, drag the mouse around to configure the curve.

Stroke the path again and zoom out to make sure it looks right, do the same thing to the other side of the computer monitor.

Now make two lines like below.

Now you need to make the curve for the stand, make it look like below

You are now completed with the outline of the computer!

Proceed to the next page to see how to color it

Page 1 2 next