• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
Download
 
Meanderfly Creative: Web 2.0 Diagonal Stripes Tutorialhttp://meanderfly.blogspot.com/2008/02/web-20-diagonal-stripes-tuto...1 of 92/20/08 6:06 AM
Web 2.0 Diagonal Stripes Tutorial
Diagonal stripe patterns are very popular whenproducing Web 2.0 design styles. On Meanderfly, Ihave used a diagonal stripe background on my postheadings. It is not unusual to see this style used inweb page headers, menu backgrounds, content boxes,buttons, logos and more. I decided to provide a kindof general tutorial for producing this popular Web 2.0graphic design style. In addition I am offering, forfreedownload,, a diagonal stripe pattern collection.First off, take a look at the image below, it showcasesa number of Web 2.0 diagonal striped graphics createdwith the free stripe patterns collection. 
 
Meanderfly Creative: Web 2.0 Diagonal Stripes Tutorialhttp://meanderfly.blogspot.com/2008/02/web-20-diagonal-stripes-tuto...2 of 92/20/08 6:06 AM
The examples were created using the Gimp, an opensource graphics and image editing application.However, you can easily adapt this tutorial towhatever graphics package you are using. Not onlythat, but the diagonal stripe patterns are available forGimp in .pat format or as PNG files that you canconvert for use with your own particular software.There are 8 black and white patterns, as well as 8two-toned grey patterns. Depending on which youchose and the blending options you employ, you canachieve an endless number of effects.Here is an image showing the sixteen different stripepatterns:The numbers below each image indicate the width of the stripes in pixels, not the size of the actual patterntiles, which range from 4x4 pixels to 32x32 pixels. (Todownload your collectionsee the instructionsat theend of this post.)
 
 
Meanderfly Creative: Web 2.0 Diagonal Stripes Tutorialhttp://meanderfly.blogspot.com/2008/02/web-20-diagonal-stripes-tuto...3 of 92/20/08 6:06 AM
 
THE TUTORIAL:
First, open a new image large enough toaccommodate the desired size for your project. Forthis example I opened a new image 400 pixels wideby 200 pixels high. Choose a transparent or coloredbackground - depending on your preference and theultimate use for the finished image. I am using awhite background so you can see it better.I added two new layers above the background andnamed them as shown in the picture beolow. TheStripes Layer is active.
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...