Free Artsy Texture Header and Photoshop Tutorial

Posted in Free Website Templates

Today, I’m going to guide you through this Photoshop tutorial so we can create an Artsy Texture Header for a web design agency. At the end, you can download the PSD of the Artsy Texture Header to use, modify and compare. Okay, let’s get started!


Materials and Resources Used in This Tutorial

Photoshop CC 2015

Photos

Coffee Cup Mug Desk Photo
https://www.pexels.com/photo/coffee-cup-mug-desk-5305/

Office Working App Computer
https://www.pexels.com/photo/office-working-app-computer-97077/

White Paper
https://www.pexels.com/photo/white-paper-51159/

Social Media Icon Human Personal
https://pixabay.com/en/social-media-icon-human-personal-2537391/

Textures

Concrete Bare Texture
https://www.textures.com/download/concretebare0244/26815

Small Tiles Texture
https://www.textures.com/download/tilessmall0114/96264

Pink Color Love Texture
https://pixabay.com/en/texture-pink-color-love-608645/

Font

Google Font Source Sans Pro
https://fonts.google.com/specimen/Source+Sans+Pro
 

Icons

Font Awesome Cheat Sheet
http://fontawesome.io/cheatsheet/


Step 1

Open a new document with these dimensions in pixels: 1200 width x 790 height. Name the new document: Artsy Texture Header.





Step 2

Use the Rectangle Tool to create a box and place at the top left corner of the canvas.

Dimensions: 612w x 396h
Stroke: 1px
Color: b18191
Opacity: 60%




Step 3

Insert Coffee Cup Mug Desk Photo into the top left corner box.

Go to Place Embedded under the File drop down menu.
Select the Coffee Cup Mug Desk photo.
Resize the photo to a smaller size to make it easier to fit into the box.
Right click on the photo in the Layers Panel and select Create Clipping Mask.
Under Blending Options select Color Burn.









Step 4

Use the Rectangle Tool to create a box and place at the bottom left corner of the canvas.

Dimensions: 612w x 394h
Stroke: 1px
Color: a5c0cb
Opacity: 60%




Step 5

Insert Office Working App Computer Photo into the bottom left corner box.

Go to Place Embedded under the File drop down menu.
Select the Office Working App Computer photo.
Resize the photo to a smaller size to make it easier to fit into the box.
Right click on the photo in the Layers Panel and select Create Clipping Mask.
Under Blending Options select Color Burn.








Step 6

Use the Rectangle Tool to create a box and place at the top right corner of the canvas.

Dimensions: 588w x 396h
Stroke: 1px
Color: 2473ab
Opacity: 60%


Step 7

Insert White Paper Photo into the top right corner box.

Go to Place Embedded under the File drop down menu.
Select the White Paper photo.
Resize the photo to a smaller size to make it easier to fit into the box.
Right click on the photo in the Layers Panel and select Create Clipping Mask.
Under Blending Options select Color Burn.


Step 8

Use the Rectangle Tool to create a box and place at the bottom right corner of the canvas.

Dimensions: 588w x 396h
Stroke: 1px
Color: debaa7
Opacity: 60%


Step 9

Insert Social Media Icon Human Personal Photo into the bottom right corner box.

Go to Place Embedded under the File drop down menu.
Select the Social Media Icon Human Personal photo.
Resize the photo to a smaller size to make it easier to fit into the box.
Right click on the photo in the Layers Panel and select Create Clipping Mask.
Under Blending Options select Color Burn with 43% Opacity.
 

Step 10

Insert Concrete Bare Texture over the entire canvas.

Go to Place Embedded under the File drop down menu.
Select the Concrete Bare Texture.
Resize the texture to fit over the entire canvas and the 4 boxes we created.
Under Blending Options select Overlay with 47% Opacity.








Step 11

Insert Small Tiles Texture over the entire canvas.

Go to Place Embedded under the File drop down menu.
Select the Small Tiles Texture.
Resize the texture to fit over the entire canvas and the 4 boxes we created.
Under Blending Options select Overlay with 41% Opacity.


Step 12

Use the Ellipse Tool to create a circle and place over the boxes and in the middle of the canvas.

Dimensions: 341w x 341h
Stroke: 1px
Color: ffffff





Step 13

Double click on the ellipse (circle) we just created in the Layers Panel. The Layers Style box will pop up on the screen. We are going to add Stroke and Outer Glow styles to the ellipse (circle).

Stroke
Size: 2px
Position: Outside
Blend Mode: Multiply
Opacity: 100%

Outer Glow
Blend Mode: Screen
Opacity: 35%
Size: 67%








Step 14

Insert Pink Color Love Texture over the ellipse.

Go to Place Embedded under the File drop down menu.
Select the Pink Color Love Texture.
Resize the photo to a smaller size to make it easier to fit into the ellipse.
Right click on the photo in the Layers Panel and select Create Clipping Mask.
Turn down the Opacity of the texture to 61%.








Step 15

Use the Horizontal Type Tool to write “RIDWAN STUDIOS” and place in the middle of the ellipse on the canvas.

Font: Source Sans Pro Black
Size: 55px
Color: 000000
Style: Optical
Letters Spacing: 100



Step 16

Use the Horizontal Type Tool to write “DESIGN”, “CONTENT”, “CODE”, and “SOCIAL MEDIA” and place in the middle of each box. Top left box: “DESIGN”. Top right box: “CONTENT”. Bottom left box: “CODE”. Bottom right box: “SOCIAL MEDIA”.

Font: Source Sans Pro Bold
Size: 36px
Color: 000000
Style: Metrics
Letters Spacing: 100





Step 17

Use the Rectangle Tool to create a box that almost spans the entire width of the canvas. Place the rectangle at the top of the canvas.

Dimensions: 1125w x 67h
Stroke: None
Color: ffffff
Opacity: 49%





Step 18

Use the Horizontal Type Tool to write “About”, “Services”, “Downloads”, “Portfolio”, “Blog” and “Contact” and place in the middle of rectangle.

Font: Source Sans Pro SemiBold
Size: 18px
Color: 000000
Style: Metrics
Letters Spacing: 100



Step 19

Use the Rectangle Tool to create a box that almost spans the entire width of the canvas. Place the rectangle at the bottom of the canvas.

Dimensions: 1125w x 67h
Stroke: None
Color: ffffff
Opacity: 49%





Step 20

Insert Facebook, Twitter, LinkedIn, Instagram, and Pinterest icons in the center of the rectangle box at the bottom of the canvas.

Use the Horizontal Type Tool and choose the FontAwesome font in the Character Panel. Use the Font Awesome cheat sheet to paste all the icons into the canvas and rectangle box.

Select all the social media icons in the Layers Panel. Use the Transform Tool (Ctrl + T) to increase the size of all the icons at the same time. Then in the Options Panel at the top of Photoshop, select Align Vertical Centers and Distribute Horizontal Centers.








Step 21

Now place all the layers of the Artsy Texture Header into separate folders to keep everything organized. We created “Boxes”, “Textures and Logo”, “Text”, and “Menu and Icons” folders and put related layers into each folder. You can organize your layers as you like.





You have now created the Artsy Texture Header. You can download our Artsy Texture Header to use, modify or compare to your own. Enjoy and drop us at info@ridwanstudios.com if you use the Artsy Texture Header.