QUICK TIP
Double-click on your Vector Smart Object while
in Photoshop and it will open in Illustrator, then
click File>Save As and choose SVG from the file
options. You will have exported a perfectly
scalable web icon.04
MA+%Ĉ4(%Ĉ36'Ɏ2%!$9Ĉ)#/.3
For the social icons, make one 36 x 36px in Illustrator and use
that as a template for the rest of the icons. After pasting it into Photoshop,
click on it and select ‘New Smart Object Via Copy’. This will avoid conflict
between the icons you copy and reuse on your website, as if you were to
make an adjustment to one of them, it would apply to all icons you’ve
copied. Social icons can be found on FileSilo.05
)-!'%29Ĉ!.$Ĉ34!4%-%.4
Tone down the image by creating a new layer on top and fill it with colour
#202020. Set the Opacity to 50%. Add a Black & White adjustment layer and boost the
Exposure to give the image a traditional fashion look. As a last touch, add the colour on top
of the layers. Make sure it’s above the Black & White layer, otherwise the colour won’t be
visible. Hit [G] and fill the layer with bronze (#ad825d). Select Color blending mode and set
the Opacity to 10%.06
SV'Ɏ2%!$9Ĉ7%"Ĉ'2!0()#3
Create a new document in Illustrator. Set
the values to 36 x 36px. Now click the Round
Rectangle tool and drag a line 25px in width and
2.5px in height, duplicate it three times and rotate the
lines 45 degrees to create a diamond square.
Duplicate this and move it up as seen on the image,
then select the two diamonds with the Selection tool,
change the colour to white and copy and paste it into
your Photoshop document. Place the graphic in the
centre underneath your title treatment.07
"544/.Ĉ2/,,/6%2
In Photoshop, use the Rectangle tool and
drag to make a bronze shape 250 x 50px. Choose a
font with less detail for the smaller text and buttons.
I’ve used Cabin from Google Web fonts – it’s also
included on FileSilo. After placing the text in the
centre of the shape you just created, make sure the
size of the text is 18pt and set to regular. Now you’ve
just created your ‘rollover’ for the button, as you will
do the buttons in the same style as the 2pt circles
you have around your social icons and the 2pt
diamond graphics.08
"544/.Ĉ4%-0,!4%
After you’ve created the rollover state for
your button, it’s easy to make the normal state, since
this is going to be an outline that gets filled in on
rollover. Simply make two new rectangle shapes,
which are 2px in height and 250px wide (the button’s
width). Do the same with two new shapes that are
50px in height and 2px in width to create the vertical
sides for the button. If you are using Photoshop CC,
you can simply select all four rectangle shape layers
and merge them into one shape.GRAPHICS AND WEB