8
How I created my website background.

How I created my website background

Embed Size (px)

Citation preview

Page 1: How I created my website background

How I created my website background.

Page 2: How I created my website background

I used the pencil tool to create this pattern on a 3x3 transparent pixels canvas. Then, by going to Edit>Define Pattern, I was able to create a pattern file.

This is the pattern I created using five pencil clicks.

Page 3: How I created my website background

I then created a 1366x768 canvas (screen resolution) which would act as the actual background.

I coloured this in a grey colour – using the paint bucket tool - so as to make it easy to colour later on.

Page 4: How I created my website background

By using the Pattern Overlay

effect I was able to apply the

previously made pattern by

selecting it from the drop down

menu. I kept the opacity and scale

to 100% but changed the blend mode to Overlay.

Page 5: How I created my website background

I used the following Inner Shadow settings to give the background a subtle 3D effect. The effect (darkened edges blended in) can be seen in the preview.

The ‘distance’ and ‘size’ settings refer to the size of the shadow and the ‘choke’ setting adjusts how intense the colour is. The blend mode is set to Multiply due to dark colours only showing up on Multiply and light colours on Screen, Overlay, etc.

Page 6: How I created my website background

At this point, the background looks a lot like the deadmau5 website’s, which is what I intended. However, I wanted to add some colour to mine which represents the

dance/fun aspect of Hummer’s music. How I did this will be explained in the next slide.

Page 7: How I created my website background

Gradient Overlay.

I used a pre-existing gradient here: the rainbow gradient.

The blend mode is set to Overlay and the Opacity 26% in order to allow the rainbow gradient to blend into the background rather than standing out and becoming jarring.

I also changed the angle from 90 to 45 so that the rainbow effect is diagonal along the background rather than horizontal or vertical.

Page 8: How I created my website background

Final Product