Get Our Free Ebook
Beginners Guide to HTML

Carbon Fibre

Step 1

First lets create the carbon fibre pattern. Open up a new document 4x4 Pixels with a White background. Then zoom in all the way so you can actually see what your doing.

Step 2

Grab the Pencil Tool with a 1 pixel diameter.

image 1

Then fill your 4x4 canvas with the instructions in the picture below.

image 2

Step 3

Now let us define the pattern. Go to Edit--> Define--> Pattern type "Carbon Fibre" or "fibre de carbone" if your french ;) and then hit the OK button. You can close this fibre de carbone pattern window now.

Step 4

Open up a blank document where you want to apply the carbon fibre to or an image. In our tutorial we will open up a 400x400 blank canvas.

Step 5

Once you got that open, create a new layer then go to Edit--> Fill. Under Contents and the "Use:" dropdown menu select Pattern then under "Custom Pattern" find the carbon fibre pattern you just made. Choose Normal for the blending mode and have the opacity at 100%.

Step 6

Thats the basics of it you can add gradients to give it depth and such. Optional is take your gradient tool have it foreground to transparent and press D then press X to reset your colors. Choose Reflected gradient with blending mode at difference and click and drag length-wise or height-wise half of the canvas and you'll get some depth.

Final Product

Thats all there is to it, experiment and this effect is great for intro pages just add detail and some good interface techniques will get this pattern alive and kicking.

Carbon Fibre

subscribe to newsletter