Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Honeycomb Hexagonal Pattern Overlays

1. Open a new file that is 25 px by 25 px, RGB 144 PPI transparent.


2. Click edit=> preferences => guides, grids and slices. Set the grid to 

  • lines
  • 5 pixels with 
  • 5 subdivisions and
  • RED. 

3. Hold your ctrl and shift key down and hit your " (ctrl, shift,") to turn your grid on. Magnify your image to about 1000%. Insert a layer.

4. Select your polygonal lasso tool from your tool bar and click in the following coordinates:

  1. 8 across, 0 down
  2. 17 across, 0 down
  3. 25 across, 8 down
  4. 25across, 17 down
  5. 17across, 25 down
  6. 8across, 25 down
  7. 0across,17 down
  8. 0across, 8 down=> back to 8 across,0 down

5. Click Edit=> Stroke

  • width=1 px
  • color=black
  • location=inside
  • mode= normal
  • opacity = 100%

6. Click Select all.

7. Click Edit=> Define Pattern.

Call the pattern "hexagon-25-a"

8. Click Edit=>Undo, till you get to the highlighting and no stroke but you still have a selection.

9. Click EDIT=> STROKE. Select the same stroke, however, set it to 2 px..  

10. Click Select=>ALL. Click EDIT=> Define pattern. Call the pattern "hexagon-25-b"

11. Select your rectangular marquee and select a square starting at 1 X1 pixels to 24X24 pixels. Click Edit=> Define Pattern. Call this pattern "hexagon-23"

21. Click image=>image size. Resize the image to 21 X 21 pixels. 

Click Edit=>define pattern. Name the pattern "hexagon-21"

22. Select your rectangular marquee and select from 1X1 pixel to 20X20 pixel. 

Click Edit=> Define pattern. Name the pattern "hexagon-19.

23. Back up by clicking edit=>step backwards until your image is now 25 X 25 again.

24. Click image=> image size. Set the size to 17X17.

Click Edit=>define pattern. Name the pattern "hexagon-17"

25. Select your rectangular marquee and select from 1X1 pixel to 16X16 pixel. 

Click Edit=> Define pattern. Name the pattern "hexagon-15.

26. Back up by clicking edit=>step backwards until your image is now 25 X 25 again.

27. Click image=> image size. Set the size to 13X13.

Click Edit=>define pattern. Name the pattern "hexagon-13"

28. Select your rectangular marquee and select from 1X1 pixel to 12X12 pixel.

Click Edit=> Define pattern. Name the pattern "hexagon-11.

29. Click EDIT=>preset manager. Set the preset manager to Patterns. Hold your shift key down and selct all your hexagons. Set the set by clikcing the save set as.



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2010 All Rights Reserved
Privacy and Legal