What You'll Be Creating

During this tutorial I'm going to walk you through the process of creating sophisticated web element styling in Photoshop, but without employing a single image file in your finished website. When we're done, you'll have a single page layout with all the UI elements you see in the preview image above, using nothing but CSS3, Base64 code and font icons.

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.



* You can use a different preprocessor if you prefer.

By bringing these elements together it's possible to generate a pure code design that is virtually identical to the original PSD:

The PSD

The pure code result (viewed in Firefox)

This tutorial will be broken into two parts:

The design. The code generation.

During this first part we'll be demonstrating the types of techniques you can use in Photoshop when creating a CSS3 and Base64 friendly design. While we can achieve a lot with pure code these days, we can't yet translate absolutely everything you might find in Photoshop. So it's important to have the "dos" and "don'ts" in mind when you set out.

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.

CSSHat interprets primarily from your layer style settings, so you should aim to add your gradients and borders via layer styles rather than any of Photoshop's alternative methods.

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)

(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.

However, in this case, you'll have to manually remove unwanted default code for things like absolute positioning, z-index, dimensions and class names. It also doesn't handle generation of multiple shadows and gradients as well as CSSHat, and it cannot produce LESS, Sass/SCSS or Stylus ready code.

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 of 1600px 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.

You should now see some subtle grayscale vertical lines on your canvas. We've selected this pattern as a good fit for conversion to Base64 as it uses very few colors and is only 24px by 12px in size, meaning it will produce a relatively small code string.

Add the Top Trim

To help frame the page create a rectangle at the top of your canvas, running the full width and 8px in height. Give it these properties:

Fill color: #dddddd

Opacity: 50%

Layer style > Inner Shadow:

Blending Mode: Normal

Color: #c8c8c8

Opacity: 100%

Angle: -90

Distance: 2

Size: 4

Layer style > Drop Shadow:

Blending Mode: Normal

Color: #ffffff

Opacity: 100%

Angle: 90

Distance: 2

Size: 1

Your "top trim" should look like this:

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 at 1200px 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: 12px



Layer style > Inner Shadow:

Blending Mode: Normal

Color: #000000

Opacity: 15%

Angle: 90

Distance: 1

Size: 10

Layer style > Gradient Overlay:

Color > Location, 0%: #ffffff

Color > Location, 100%: #f3f3f3

Style: Linear

Layer style > Drop Shadow:

Blending Mode: Normal

Color: #ffffff

Opacity: 100%

Angle: 90

Distance: 1

Size: 2

Your menu wrapper should now look like:

2. Menu Background

Create a second rounded corner rectangle above your menu wrapper, at 1190px 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: #ffffff

Properties > Live Shape Properties > Corner radius: 10px



Layer style > Stroke:

Size: 1

Position: outside

Color: #e4e4e4

Layer style > Gradient Overlay:

Color > Location, 0%: #e5e5e5

Color > Location, 100%: #ffffff

Style: Linear

Layer style > Drop Shadow:

Blending Mode: Normal

Color: #c1c1c1

Opacity: 100%

Angle: 90

Distance: 3

Size: 4

You should now have:

3. Add Menu Items

Create another rectangle, this time at 130px 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

Now add some placeholder text: type out the word "Page" and position it over the middle of your menu items with the following settings:

Character > Font: Roboto, Regular



Character > Font size: 18px



Character > Color: #5c5c5c



Layer style > Drop Shadow:

Blending Mode: Normal

Color: #ffffff

Opacity: 100%

Angle: 90

Distance: 1

Size: 0

Your menu item should look like this:

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

Layer style > Inner Shadow:

Blending Mode: Normal

Color: #faabb9

Opacity: 60%

Angle: 90

Distance: 3

Size: 5

Layer style > Gradient Overlay:

Color > Location, 0%: #ef3d5d

Color > Location, 25%: #dc2345

Color > Location, 100%: #fc6c86

Style: Linear

Layer style > Drop Shadow:

Blending Mode: Normal

Color: #cc2241

Opacity: 100%

Angle: 90

Distance: 1

Size: 0

Then change your text color and drop shadow settings to:

Character > Color: #ffffff



Layer style > Drop Shadow:

Blending Mode: Normal

Color: #b50020

Opacity: 100%

Angle: 90

Distance: 1

Size: 0

When you're done with the above, make some more duplicates of the original "menu item" and place them to the right of the "current menu item". We do this to see how the menu item styles look when sitting flush against each other, to ensure there is adequate visual separation from one item to the next.

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 #dddddd

With 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?



Give the first and third lines the following settings:

Character > Font: Roboto, Thin



Character > Font size: 48px



Character > Color: #6b6b6b

Then give the second and fourth lines these settings:

Character > Font: Roboto, Bold



Character > Font size: 80px



Character > Color: #ef3d5d

Your text should now look like this:

Add the Info Panel

1. Create the Panel Background

Below the main text, create a rounded corner rectangle 1200px wide by 665px high. Give it these settings:

Fill color: #ffffff

Properties > Live Shape Properties > Corner radius: 15px



Layer style > Stroke:

Size: 1

Position: inside

Color: #d8d8d8

Layer style > Drop Shadow:

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: #ef3d5d

Properties > Live Shape Properties > Corner radius: 10px



Layer style > Inner Shadow:

Blending Mode: Normal

Color: #de2a4a

Opacity: 60%

Angle: 90

Distance: 0

Size: 5

Layer style > Gradient Overlay:



Color > Location, 0%: #ef2c4f

Color > Location, 10%: #dc2345

Color > Location, 100%: #fc6c86

Style: Linear

Layer style > Drop Shadow:

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, Regular



Character > Font size: 24px



Character > Color: #ffffff



Layer 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.

standards ready pure CSS3 + Base64 code. That means no images and minimal HTTP requests for ultra efficient loading. CSSHat + PNGHat + LESS + FontAwesome



Set the first lot of text to:

Character > Font: Roboto, Thin



Character > Font size: 36px



Character > Color: #6b6b6b

And the second lot of text to:

Character > Font: Roboto, Black



Character > Font size: 48px



Character > Color: #6b6b6b

Then highlight each of the "+" symbols and set their color to: #ef3d5d

You 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

Highlight and copy the little downwards arrow

Go back to your canvas, place a cursor with the text tool, and paste in the character you just copied. At first you'll just see a funny little rectangle with a cross in it, so change your settings to this:

Character > Font: FontAwesome



Character > Font size: 200px



Character > Color: #6b6b6b

Make 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

To create the right pointing arrow we're again going to use FontAwesome. Head back over to the cheatsheet and this time copy the 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: FontAwesome



Character > Font size: 36px



Character > Color: #ffffff

Position 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, Regular



Character > Font size: 36px



Character > Color: #ffffff

This 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: #f2f2f2

Layer style > Stroke:

Size: 5

Position: inside

Color: #dddddd

Layer style > Gradient Overlay:

Color > Location, 40%: #dddddd

Color > Location, 45%: #f2f2f2

Style: Radial

Pay special attention to the gradient overlay settings as they are different to those we've used before. The color stops are placed at 40% and 45% rather than 0% and 100%, and we're using a radial gradient instead of linear. Along with the border/stroke, this gives the effect of small grey circle surrounded by a larger one.

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

I'll see you then!