By creating a "no image" design you can keep your load time and HTTP request count to an absolute minimum, whilst achieving the highest possible level of flexibility in your UI elements. Pure code UI elements can be quickly and easily tweaked via CSS in ways static images can't without being manually edited and re-exported.
To make this all happen we'll be employing four key resources:
- CSSHat
Photoshop plugin made by Source which generates CSS3 directly from Photoshop layers. - PNGHat
Photoshop plugin, also made by Source, which converts any image into Base64 code. - LESS
CSS preprocessor that makes coding a bazillion times easier *. - FontAwesome
A popular collection of font-based icons.
By bringing these elements together it's possible to generate a pure code design that is virtually identical to the original PSD:
- The design.
- The code generation.
Let's get started with a brief overview of CSSHat and PNGHat, the Photoshop plugins we'll be using to generate our CSS3 and Base64 code.
Intro to CSSHat & PNGHat
CSSHat
With the CSSHat plugin installed you can click any layer in your Photoshop document and the CSSHat window will instantly output production-ready code for you.
Photoshop properties which CSSHat can interpret:
- Gradient/Solid color fill layer
- Gradient overlay
- Drop shadow
- Text layers
- Inner shadow
- Inner glow
- Outer glow
- Color overlay
- Stroke
- Border radius
- Opacity
Code which CSSHat can output
- Standards compliant CSS3 including gradients, drop shadows, text shadows etc.
- Vendor prefixes (optional)
- Width and height in
px(optional) - Font properties:
font-family,font-size,font-weight (bold/normal),font-style - LESS with LESSHat mixins
- Sass/SCSS with Compass mixins
- Stylus with Nib mixins
- SVG gradients for IE9
- Wrap into class named after Photoshop layer (optional)
- CSS circles
- Both box shadows and text shadows
Things CSSHat can't work with:
- Blending modes like multiply and overlay - always set the blending mode for drop shadows and so on to normal.
- Pattern overlay - we'll be handling background image code generation with PNGHat instead.
- Separate border properties per side - due to the fact Photoshop can only set all sides of a border uniformly.
- CSS triangles
- Numerical font-weight settings like 100, 700 etc.
PNGHat
PNGHat can do many things. Check out How to Export Photoshop Assets For the Web With PNGHat for a full rundown on the plugin.In the case of this tutorial we'll be using it to generate Base64 code which will form the background image of the design. You'll see how this works in practice shortly.
When an image is converted into Base64 you get a text string that can then be incorporated directly into CSS. The more data is in the image, the longer the string, so for that reason Base64 is best suited to simple tiling images with few colors.
Getting Started
To get the ball rolling you'll need a few things.Photoshop Plugins
To begin with, you should have the CSSHat and PNGHat plugins installed.If you're unable to purchase a copy of CSSHat you can still follow along and use Photoshop's in built "Copy CSS" functionality, which can be selected from the context menu after right-clicking any layer.
If you can't purchase PNGHat you can manually export your background image then put it through an online converter such as: http://webcodertools.com/imagetobase64converter
I also highly recommend a third plugin from Source named Subtle Patterns. This plugin added adds a library of hundreds of patterns to Photoshop, each of which can be instantly applied as a pattern overlay to any layer.
As an alternative to using the Subtle Patterns plugin, you can just browse the patterns and download them for free.
Note: I know what you might be wondering - that's a lot of stuff by Source, is this a sponsored post? No. The truth is, I purchased Source's whole product range long before I started writing for Tuts+ and I love every one of them due to the sheer number of hours they've added back into my day. I recommend these plugins because I've been so super impressed by my own experience of the entire suite.
Font Awesome & Roboto
We'll be placing some icons into your design via Font Awesome, so you'll need to go and download the font and install it onto your system.The font of choice for our regular text will be Roboto so you'll need to install that also. You can grab it from Google Webfonts.
New PSD and Background Image
Create a new Photoshop document at a size of1600px x 2180px. Double click the default "Background" layer to unlock it, then save your PSD.In the Subtle Patterns window, (or website), search for satin weave. When you find it, with your Background layer selected, click the pattern's tile to automatically apply it as a pattern overlay.
Add the Top Trim
To help frame the page create a rectangle at the top of your canvas, running the full width and8px in height. Give it these properties:Fill color:
#ddddddOpacity:
50%Layer style > Inner Shadow:
- Blending Mode:
Normal - Color:
#c8c8c8 - Opacity:
100% - Angle:
-90 - Distance:
2 - Size:
4
- Blending Mode:
Normal - Color:
#ffffff - Opacity:
100% - Angle:
90 - Distance:
2 - Size:
1
Create the Menu
Through creating this menu we'll get to see some of the effects that can be created with gradients, shadows and strokes. We're going for a clean-looking raised menu that is seated in an inset wrapper.1. Menu Wrapper
To begin with we'll create the inset wrapper that will hold the menu. Create a center aligned, rounded corner rectangle on your canvas at1200px wide by 61px high. Set the following properties:Fill color:
#f9f9f9 - note that even though there will be a gradient on this rectangle, we still want to set a fill color as a fallback.Properties > Live Shape Properties > Corner radius:
12pxLayer style > Inner Shadow:
- Blending Mode:
Normal - Color:
#000000 - Opacity:
15% - Angle:
90 - Distance:
1 - Size:
10
- Color > Location, 0%:
#ffffff - Color > Location, 100%:
#f3f3f3 - Style:
Linear
- Blending Mode:
Normal - Color:
#ffffff - Opacity:
100% - Angle:
90 - Distance:
1 - Size:
2
2. Menu Background
Create a second rounded corner rectangle above your menu wrapper, at1190px wide by 50px high, with its top left corner 5px further right and down than the menu wrapper's top left corner. Add these properties:Fill color:
#ffffffProperties > Live Shape Properties > Corner radius:
10pxLayer style > Stroke:
- Size:
1 - Position:
outside - Color:
#e4e4e4
- Color > Location, 0%:
#e5e5e5 - Color > Location, 100%:
#ffffff - Style:
Linear
- Blending Mode:
Normal - Color:
#c1c1c1 - Opacity:
100% - Angle:
90 - Distance:
3 - Size:
4
3. Add Menu Items
Create another rectangle, this time at130px wide by 51px high, directly over the top of your "menu background" bar. Give it this gradient overlay:Layer style > Gradient Overlay:
- Color > Location, 0%:
#efefef - Color > Location, 25%:
#e4e4e4 - Color > Location, 100%:
#fcfcfc - Style:
Linear
Character > Font:
Roboto, RegularCharacter > Font size:
18pxCharacter > Color:
#5c5c5cLayer style > Drop Shadow:
- Blending Mode:
Normal - Color:
#ffffff - Opacity:
100% - Angle:
90 - Distance:
1 - Size:
0
4. Create "Current" Menu Item Style
Make a duplicate of your menu item rectangle and text, then move it to the right so it sits just next to your original. Edit the text to read "Current".Set the rectangle's layer style properties to:
Layer style > Stroke:
- Size:
1 - Position:
outside - Color:
#e62d4ee4e4e4
- Blending Mode:
Normal - Color:
#faabb9 - Opacity:
60% - Angle:
90 - Distance:
3 - Size:
5
- Color > Location, 0%:
#ef3d5d - Color > Location, 25%:
#dc2345 - Color > Location, 100%:
#fc6c86 - Style:
Linear
- Blending Mode:
Normal - Color:
#cc2241 - Opacity:
100% - Angle:
90 - Distance:
1 - Size:
0
Character > Color:
#ffffffLayer style > Drop Shadow:
- Blending Mode:
Normal - Color:
#b50020 - Opacity:
100% - Angle:
90 - Distance:
1 - Size:
0
Unfortunately, Photoshop has no way of setting something like "border-left" so we can't set left or right borders directly on our menu item rectangles. However we still need to simulate the effect so we can create separation between each item. Use Photoshop's line tool to draw some
1px wide vertical lines between the menu items, and set their fill color to #ddddddWith all these elements in place you should have:
Add the Main Text
If you were using this layout for a client, this is the area in which you would add their main interest hook or call to action. For the purposes of this tutorial, add the following four lines, all centered on the page:- Did you know you can
- Have Your Photoshop
- AND YOUR
- Pure Code too?
Character > Font:
Roboto, ThinCharacter > Font size:
48pxCharacter > Color:
#6b6b6bThen give the second and fourth lines these settings:
Character > Font:
Roboto, BoldCharacter > Font size:
80pxCharacter > Color:
#ef3d5dYour text should now look like this:
Add the Info Panel
1. Create the Panel Background
Below the main text, create a rounded corner rectangle1200px wide by 665px high. Give it these settings:Fill color:
#ffffffProperties > Live Shape Properties > Corner radius:
15pxLayer style > Stroke:
- Size:
1 - Position:
inside - Color:
#d8d8d8
- Blending Mode:
Normal - Color:
#c1c1c1 - Opacity:
27% - Angle:
90 - Distance:
3 - Size:
4
2. Create the Panel Header Background
Then,60px below the top of the panel background, create another rounded corner rectangle. It should be 1230px wide and 70px high. Center it on the canvas so it sticks out by 15px either side of the panel background. Give it these properties:Fill color:
#ef3d5dProperties > Live Shape Properties > Corner radius:
10pxLayer style > Inner Shadow:
- Blending Mode:
Normal - Color:
#de2a4a - Opacity:
60% - Angle:
90 - Distance:
0 - Size:
5
- Color > Location, 0%:
#ef2c4f - Color > Location, 10%:
#dc2345 - Color > Location, 100%:
#fc6c86 - Style:
Linear
- Blending Mode:
Normal - Color:
#cc2241 - Opacity:
100% - Angle:
90 - Distance:
3 - Size:
0
3. Create the Panel Header Background's Second Shadow
We already have a drop shadow set on the rectangle we just created, which will give it a subtle 3D effect. But we also want to have a second drop shadow that will look like an actual shadow cast by a downlight. Because we've already "used up" the drop shadow property of the existing rectangle, we'll need to create a second rectangle to apply a second shadow to.Duplicate your panel background rectangle and drag it below the original in your layers panel, then clear its existing layer style. Name it "panelheadershadow" so you can tell the two layers apart easily. Give it these drop shadow settings:
Layer style > Drop Shadow:
- Blending Mode:
Normal - Color:
#000000 - Opacity:
27% - Angle:
90 - Distance:
5 - Size:
3
4. Create the Panel Header Text
Directly over the middle of the panel header background type out "IN THIS TUTORIAL:" and give the text these settings:Character > Font:
Roboto, RegularCharacter > Font size:
24pxCharacter > Color:
#ffffffLayer style > Drop Shadow:
- Blending Mode:
Normal - Color:
#b50020 - Opacity:
100% - Angle:
90 - Distance:
1 - Size:
0
5. Create the Panel Text
Finally, add these lines of text:- Learn how to design in Photoshop and output
standards ready pure CSS3 + Base64 code.
That means no images and minimal HTTP
requests for ultra efficient loading. - CSSHat + PNGHat + LESS + FontAwesome
Character > Font:
Roboto, ThinCharacter > Font size:
36pxCharacter > Color:
#6b6b6bAnd the second lot of text to:
Character > Font:
Roboto, BlackCharacter > Font size:
48pxCharacter > Color:
#6b6b6bThen highlight each of the "+" symbols and set their color to:
#ef3d5dYou should now have an info panel that looks like this:
Add the Big Down Arrow
This is where we'll start using Font Awesome. We're going to place the "fa-down-arrow" icon and use that instead of an image.The easiest way to do this is to get the appropriate "letter" into your cache by going to the Font Awesome cheatsheet. Locate the "fa-down-arrow" icon, then highlight the little image preview and press CTRL / CMD + C
Character > Font:
FontAwesomeCharacter > Font size:
200pxCharacter > Color:
#6b6b6bMake sure the arrow is centered on the canvas, and set the layer's opacity to
30%. You should now have this cool looking arrow:
Add the "Start" Button
1. Button Background and Second Shadow
Create a new rounded corner rectangle,420px wide by 105px
high. The button will use the exact same layer style properties as the
"Panel header background" so you can simply copy over those layer
styles. Right-click the layer of your panel header background and select
"Copy Layer Style", then right-click your new button layer and select
"Paste Layer Style".As we did with the panel header background, we want to create a second rectangle for this button that can have a second drop shadow applied to it. Duplicate your button layer and drag it below the original in your layers palette, then rename it "button shadow". Copy the layer style from the "panelheadershadow" layer you created earlier and paste it onto your new "button shadow" layer.
2. Button Circle and Right Arrow
We're going to add a little circle to the button that will look like a small depression, and we'll then set a right pointing white arrow on top of it.Create a circle (ellipse) above the button at
47px by 47px.
Position it so it is equal distance from the top, left and bottom edges
of the button background, then give it this gradient overlay:Layer style > Gradient Overlay:
- Color > Location, 0%:
#f04f6c - Color > Location, 100%:
#e32d4f - Style:
Linear
fa-caret-right
icon. On your canvas, use the text tool to place a cursor over the
circle you just created and paste in the Font Awesome icon/character.
Give it these properties:Character > Font:
FontAwesomeCharacter > Font size:
36pxCharacter > Color:
#ffffffPosition the newly created white arrow in the center of the circle it sits above.
3. Create the Button Text
Over the top of the button, to the right of the circle and arrow, type "Start the Tutorial" and give the text these settings:Character > Font:
Roboto, RegularCharacter > Font size:
36pxCharacter > Color:
#ffffffThis text uses the same drop shadow as the "Panel header text", so you can copy the style from that text and paste it onto this layer.
You should now have a button that looks like this:
Add the Bottom Trim
We're now going to add the final element of the design, some trim at the bottom to finish framing off the space. When this element is coded up we'll be using separate top and bottom border settings, but as Photoshop can't facilitate this we'll again use shape tools instead so we can get the right colors in place.Below the start button, create a rectangle with a fill color of
#dddddd that is 5px high and stretches the full width of the page. Duplicate the new rectangle and move it down 10px so there is a 5px gap between the two rectangles.In the center of your canvas and above the two grey lines/rectangles, draw a circle that is
40px by 40px and give it these properties:Fill color:
#f2f2f2Layer style > Stroke:
- Size:
5 - Position:
inside - Color:
#dddddd
- Color > Location, 40%:
#dddddd - Color > Location, 45%:
#f2f2f2 - Style:
Radial
Your bottom trim should look like this:
All Done!
You should now have a completed PSD design, 100% ready for translation into pure CSS3 and Base64 code:
Coming up
In the following part of this tutorial:- You'll setup the HTML for your design.
- You'll also setup an easy, autocompiling LESS project (with no command line) using the free Windows & Mac app Prepros.
- We'll incorporate LESSHat and Normalize.less
- then also Font Awesome via FontAwesome.less.
- You'll convert your background image to Base64 and incorporate it into your LESS code.
- After that, you'll convert all your design elements to CSS3 and add them to your LESS code.
- Finally, you'll be able to lean back in your chair and feel very impressed with yourself
