How to make a honey comb/cells pattern in Photoshop CS5

Example 1

  

Example 2

Today I saw a website with a honey comb background, like in the image above (the one with the fade).  When I saw it I figured it was worth a try and after a bit I figured I'd share my process on how to make the pattern with you!


PLEASE NOTE: I'm working on a mac so all key commands are for mac.

Preperation
Lets start by making a new file...

We want our new document 90px wide and 50px high with a 10px/in resolution. This resolution is used because it will make our job easier later, when we are laying out our pattern.


Once out new document opens, click the zoom tool (Z key) and zoom in to make the document easier to work with. I like to stretch the window as well so I can work close to the edge of my document.


Next lets turn on our grid (View> Show> Grid or Command ' ) and snapping (View> Snap or Shift + Command + ; )


For this pattern, we are only going to use the Line Tool (U key).  
If you don't see the line tool press Shift + U until the line tool is selected.

Once you have it selected look to the top tool bar. 

We want to make sure the fill pixels option is selected, and the weight is 2px(this can be changed depending on how thick you want your honey comb lines)


Designing the pattern 

First we are going to make a line from the left edge, exact center to the top edge 15px in or one and a half lines as seen below.

Next we make the top line from our last point 30px to the right. This line will be half the weight of the rest of our lines (1px).

Now we are going to make the opposite of the line we made. From our last point go 15px right and 25px down

Then 15px left and 25px down.

30px more back to the left for the bottom edge. Just like the top line this one is also 1px wide.

Then connect our last point to our first point.

Lastly we want to make a line from our fourth point 30px to the right.

Now you make this your pattern. Select Edit > Define Pattern. 

 

 A dialogue box will appear asking you to name your new pattern.

I named my pattern "Honey Comb Cells"

Using the pattern

To use your pattern select the layer you want to use the pattern on and open the "Layer Properties" dialog box (double click the layer).

From the style list select Pattern Overlay.

In the pattern overlay select the "Honey Comb Cell" pattern we created from the pattern drop down box.

You can adjust the pattern by using the scale slider below the drop down box, or you can change the opacity of the pattern to show whats underneath, like in the gradient example at the top of this post.

That's it! Thanks for reading, I'll post more soon! Let me know what you think and if you'd like to know how to make your honey comb texture look like Example 2, comment and I'll post a quick tutorial on that.



Check out my website at CDuenasProductions.com 

Also, I have a new site I'm working on, check out UndeadDatabase.com




 

Make a carbon fiber texture in photoshop CS5

 

Today I decided to share a quick easy way to make a carbon fiber texture in Photoshop. I first had to use this texture for a Power Point layout job I did for a web hosting company, and had found it was very useful for other projects.

PLEASE NOTE: I'm working on a mac so all key commands are for mac.

Preperation
Lets start by making a new file...

 

We want to make it 8px wide by 16px high.

Once out new document opens, click the zoom tool (Z key) and along the top tool bar select fit screen.

That should make our document a little easier to work with.

Now select your pencil tool (B key). If you do not see the pencil tool on your tool bar click and hold on the paint brush button, a drop down will appear where you can select the pencil tool... Or just press, Shift + B.

Next, click the brush preset picker drop down box in the top tool bar, if you don't have square brushes loaded, load them now.

To load the square brushes, click the small arrow in the top right corner of the preset drop down box. A menu will appear, select Square Brushes. Click append.

When the brushes are added select the size 4 square brush. 

To finish up your preparation turn on snapping... View-> Snap (Command + Shift + ; ) 

Designing the pattern

Lets get started...

For this texture you will need only 4 colors. I used:

#222222 - Dark grey

#444444 - Dark mid grey

#888888 - Mid grey

#aaaaaa -  Light grey

For those who don't know about hexadecimal color codes don't worry, just note that the color codes above are entered at the bottom of color picker window (see following pictures)

Now... here is the pattern (this is why we are using the 4px square pencil brush)

First the #222222 in the top left

#888888 in the top right

The next row is #aaaaaa on the left

And #444444 on the right 

The next four squares are just a mirror image of the first four squares
 #888888 on the left

#222222 on the right

Next line, #444444 on the left

#aaaaaa on the right.

Now you make this your pattern. Select Edit > Define Pattern.

A dialog box will appear asking you to name your patter, I chose "Carbon Fiber"

And that's it all there is to making the pattern.

Using the pattern

To use your pattern select the layer you want to use the pattern on and open the "Layer Properties" dialog box (double click the layer).

From the style list select Pattern Overlay.

In the pattern overlay select the "Carbon Fiber" pattern we created from the pattern drop down box.

You can adjust the pattern by using the scale slider below the drop down box, or you can change the opacity of the pattern to show whats underneath, like in the gradient example at the top of this post

 

That's it! Thanks for reading, I'll post more soon! Let me know what you think and check out my website at CDuenasProductions.com

Make a houndstooth pattern in Photoshop CS5

Today I decided to I would show everyone how to make a houndstooth pattern in photoshop. I first decided to make the pattern while meandering through the mall and I noticed it everywhere, so without further delay here we go...


PLEASE NOTE: I'm working on a mac so all key commands are for mac.


Preperation
Lets start by making a new file...

I made mine 100px by 100px with a 10px/in resolution (I chose that resolution because it makes the grid line up even and helps make it more exact...)

Then select the zoom tool (z key) to open the zoom option along the top click fit screen so you can see what you're doing.


also make sure the grid is on (command + ' ) and make sure snap option is on (command + shift + ; )

Designing the pattern
Lets get started...

select the pen tool (p key) and

In the option toolbar along the top, make sure shape layer is selected, and make the outline color none and fill color black.

The pattern consists of only 4 shapes!  I did it from the left, you can go from either side...

• First shape

Make your first point in the top left corner.
Then 80px to the right or at the 8th line make your second point.
For your third point go down 50px or 5 lines and then left 50px or 5 lines.
Next go 30px or 3 lines back to the left for your fourth point.
Lastly connect to your first point to complete the shape (see picture above)!
this is why I picked the resolution of 10px/in notice the solid lines are each 10px apart (It's just easier).

• Second shape

Start in the bottom left, make your first point.
Make your second point 50px right and 50px up
The third point is 20px above that.
Then the fourth is 50px left and 50px down. it runs along the angled edge of the first shape and runs along the left edge of the document.
Lastly connect to your first point to complete the shape (see picture above)!

• Third shape

Starting from the top right, make your first point
Make your second point 50px left and 50px down connect it with the second point of the second shape.
Make your third point 20px right of the second.
Make your fourth point 30px right and 30px up from that
Lastly connect to your first point to complete the shape (see picture above)!

• Fourth (last) shape

 

Starting from the bottom 20px from the left make your first point.

The second point is 30px to the right and 30px up.

The third point is 30px down along the bottom.
Lastly connect to your first point to complete the shape (see picture above)!

Making the pattern

First you want to combine the shape layers you created by first selecting all layers

And then merge layers (command + E or  Layers > Merge layers)

Now you make this your pattern. Select Edit > Define Pattern.

 

A dialog box will appear asking you to name your patter, I chose "HoundsTooth"

And that's it all there is to making the pattern.

Using the pattern

To use your pattern select the layer you want to use the pattern on and open the "Layer Properties" dialog box (double click the layer).

From the style list select Pattern Overlay.

In the pattern overlay select the "HoundsTooth" pattern we created from the pattern drop down box.

you can adjust the pattern by using the scale slider below the drop down box. 

You can change the opacity of the pattern to show whats underneath, like in the gradient example at the top of this post

That's it! Thanks for reading, I'll post more soon! Let me know what you think and check out my website at CDuenasProductions.com