And like my other graphics elements - this design is totally based on solid and gradient layers in photoshop and 100% customizable.
Let's start
Open photoshop and create a new document with following settings :
| Height | 160 px |
| Width | 486 px |
| Color mode | RGB – 8 bit |
Additionally set the new document name as 'banner'
Add base color layer
Add a new gradient layer with the following settings:
| Style | Linear |
| Angle | 60 degree |
| Scale | 150 |
Then click on the gradient drop-down to edit its settings like listed below
| Gradient type | Noise |
| Roughness | 50 |
| Color model | HSB |
Now play with the hue, saturation and brightness sliders to achieve a color-scheme of your choice. Press 'randomize' to mix colors.
When you are finished playing with color, press ok, ok, ok to get back to the document. Rename this layer as 'color' as this is going to be the base of your design.
By default photoshop have provided you with a 'background' layer – you will not need it as our design will be completely based on gradient layers and text, so delete this.
Darken top and bottom
You can see the noise gradient is looking 'flat' - we will add 'depth' to it by fading out the top and bottom portion of the design to black.
To do so, add another gradient layer on top of the 'color' layer. The settings for this layer will be as follows:
| Style | Reflected |
| Angle | 90 degree |
| Start color | ffffff (pure white) |
| End color | 808080 (grey) |
Set the layer blond mode to 'Linear burn'.
As we are using this layer to mask the base color layer – so rename this as 'mask'
Add a glow to center
So the background is not that flat now – right? We will need to add some extra highlight at the center. Add another gradient layer with the settings below:
| Style | Radial |
| Angle | 0 degree |
| Start color | c4c4c4 |
| End color | 000000 (pure black) |
Set the layer blend mode of this new gradient layer to 'Color dodge'.
Lastly rename this layer as 'glow' – the name signifies its content.
Add heading
Now we are done with the background – it's time to add some text to our design.
For the heading add a text layer to the design and type-in your headline text.
The settings for the text I have used in my design is as follows:
| Font | Georgia - regular |
| Font size | 48 pixels |
| Color | 6f0100 |
| Style | Faux bold, strong |
Align the headline layer vertically center with the document, and a little up above the horizontal center.
Then double click on the text layer to open the layer-style dialog box. To make the headline 'depressed' we will check 'drop shadow' and 'inner shadow'.
The settings for the 'drop shadow', is like mentioned below:
| Blend mode | Normal |
| Color | ffffff (pure white) |
| Opacity | 100% |
| Angle | 60 degrees |
| Distance | 1 px |
| Size | 0 px |
And the settings of the 'inner shadow' is listed here :
| Blend mode | Multiply |
| Color | 000000 (pure black) |
| Opacity | 50% |
| Angle | 60 degrees |
| Distance | 1 px |
| Size | 2 px |
Add a catchline
Add another text layer below the previously added headline text and type-in your catchline. After finishing with the sub heading format the text properties as written below
| Font | Verdana - regular |
| Font size | 16 pixels |
| Color | 000000 (pure black) |
| Style | strong |
Nudge this layer down to leave a comfortable space with the headline. If necessary shift the headline text layers position vertically to make the texts center optically with the design.
Double-click on the sub-heading text layer to open the layer style properties and check drop shadow with the following settings :
| Blend mode | Normal |
| Color | ffffff (pure white) |
| Opacity | 100% |
| Angle | 60 degrees |
| Distance | 1 px |
| Size | 0 px |
This will make this text layer a little depressed.
Done
Now this is the end-result. You see you can make shape variations by simply pressing 'randomize' button on the gradient properties dialog. Or you can change the color scheme by shifting the hue, saturation or brightness of the noise gradient.
Checkout some examples –
Do you need the PSD of this tutorial? Download it from here.
Comments
Post a Comment