Mon, 01 Feb 2010 09:05:27 +0000

When working on large projects, with many mock-ups and style-sheets, even the smallest change on a re-occurring component can take quite some time. Going through the many mock-ups and adjusting a color or font on that re-occurring component can be a grueling task. If you have an intern that does those things for you, you are in luck, but what about us freelancers?

Do we just sit there and endure the pain? Well, not anymore! A while back, I discovered a system that enables designers to say goodbye to opening 23 PSD files just to change the header color. Instead, we can work smart, like our counter parts the developers, and import external files with something called - “Variables”.

This allows us to put the re-occurring component into one external file and simply import that file into all of our mock-ups. When a change is required, we can just change it in one place.

What is a Photoshop Variable?

Here is Adobe’s technical explanation for a variable. A variable is basically used to define which elements in a template change. There are three ways to define a variable.

1. Visibility Variables - Shows or hides the content of a layer.
2. Pixel Replacement - Variables that replace the pixels in the layer with pixels from another image file.
3. Text Replacement - Variables that replace a string of text in a type layer.

You can read more about variables here: Photoshop Define Variables

For our needs, we are going to focus solely on Pixel Replacement, since what we want to do is import an external style-sheet into our PSD.

Lets Get Started

Step 1 - Setting up your files

In this step we need to decide which component in our homepage deserves a variable. In most cases, it is better off creating a variable for a component that re-appears in many different mock-ups. These components can be headers, footers, various sidebar widgets, and anything that re-occurs in the project. In our example, we will use the global header.

There are usually many different states to a component (for example, most common is logged in / logged out). This being the case, style-sheets are created for the component, illustrating the states. Ideally, we want to import the component’s style-sheet and make it fit seamlessly into the mock-up. This will provide us with one file acting both as a style-sheet, and as an embedded file that will be imported into all the mocks the component appears in.

I have created a fake style-sheet for the global header called 'Component_GlobalHeader.psd'. To continue on with the rest of the steps, please Download it.

Step 2 – Setting up grounds

Let’s open our homepage mock-up and create a new layer. We will give it the same name as the style-sheet's file name, in our case 'Component_GlobalHeader.psd'. Let’s call this new layer 'Component_GlobalHeader'. This is the layer we will be importing the external file to.

Step 3 – Creating the variable

Now it’s time to create the variable. We do this by going to image > variables > define. A popup will appear and we are going to edit some of the parameters.

First of all, always double check that the layer is indeed the correct one (the one we just created). You can check that in the ‘Layer’ field. If it is the incorrect layer, it may cause a bit of a mess later on.

Since we are focusing on importing, we will go straight to the 'Pixel Replacement' option. In the 'Name' field, enter the same name as the layer and external style-sheet. It is healthy to keep every name the same as this will help with organization in the future.

Next, we are going to focus on ‘Method’. We are going to choose a method for scaling the replacement image/file. There are a few options here:

1. Fit - scales the image so that it fits in the bounding box (which may leave parts of the bounding box empty).
2. Fill - scales the image so that it fills the bounding box entirely (which may cause the image to extend beyond the bounding box).
3. As Is - applies no scaling to the image.
4. Conform - scales the image disproportionally so that it fits in the bounding box.

What we want is 'As Is' since we do not want to manipulate our external style sheet.

The 'Alignment' can be left as the default middle, but this is a personal preference as well as a component consideration. I have aligned top-left in the past as well. It really depends on you.

Let’s leave 'Clip to Bounding Box' unchecked.

Click Next.

Step 4 – The actual importing

In order to import the file, we need to either choose or create a new 'Data Set'. Data sets are collections of variables and associated data. You define a data set for each version of the graphic you want to generate. So if you have many different sidebar widgets in your mock-up, all generated from the same external file, you would only need one data set called 'sidebar_widgets'.

Since we don’t have any previously created data sets, let’s start by creating a new one. To do this, click on the small disk/arrow icon on the left of the trash icon. Now that we have created a new data set, let’s give it a name. Yep, you guessed it. Let’s give it the same name as the variable, layer, and external style-sheet file. As I’ve said before, they should all be the same name.

Now that’s done, we can upload the external file. Click on the 'select file' button in the 'Value' section, and choose 'Component_GlobalHeader.psd'. Notice that if you have 'Preview' checked (on the right, under the apply button), you will see the new style sheet appear on your homepage mock-up. Super important: always remember to click 'apply' before clicking on 'OK'. If you do not do this, all that we have gone through would be lost and you would need to redo everything. So remember CLICK 'APPLY', then click 'OK'.

We have successfully imported the external style sheet into our homepage mock-up! Yay! But wait! We now have this massive layer, but need only part of it.

Step 5 – Masking

Since we don’t want the whole style-sheet to appear in our mock-up, we can basically mask the part we need and hide the rest. We will do this by creating a new shape layer in the same dimensions as the component we want to show. Now to get the shape layer to mask it, all we need to do is drag the mask onto the component layer. You will now see the whole screen filled by the shape layer since we removed its mask. Delete the un-masked shape.

Step 6 - Updating

Now that you have an external file, let me show you how this is useful. Let’s say that the red selected state on your global header just isn’t working for you and you’d like to switch it to blue. Simple! Go to your original style-sheet 'Component_GlobalHeader.psd' and change the selected color to blue. Save the file and go back to the homepage mock-up. Click on image > apply Data Sets and choose the data set that you would like to update. You will automatically see the change right away.

Disadvantages

Along with its potential, keep in mind that this is still considered a hack. Until Adobe decides to create a built-in system for importing external PSDs there will never be a foolproof way to do it.

One major disadvantage is that changing a component PSD and saving it will not automatically change it in the mock-ups associated with it. For example, this means that you will always need to 'apply data sets', when opening the homepage mock-up. Though this is something I have not tried, this problem might be able to be solved by creating an action of some sort, making the PSD open and automatically ‘apply data sets’.

Another disadvantage is the folder structure. Moving a file into a new folder tends to mess up the configuration thus creating an error when 'applying data sets'. Since it is random I haven’t found a way to work around it.

With those issues in mind, I still believe that this system saves countless hours of grueling hard labor. You need to know when to use it. Most of the time, it is used only with projects that contain more than 15 to 20 mock-ups.

Conclusion

This example is just the tip of the iceberg. You can see for yourself the amazing potential this system has. Be creative and experiment. Why not try adding sidebar widgets with only one data set?

If you're new here, you may want to subscribe to my RSS feed.

So this week, I decided to work on a little side project as my tutorial. Many times, a company will hire you on to do a string of redesigns. This can vary from simple layout enhancement to a full site overhaul. So this week, I will show you a more indepth redesign.

If you don’t already own a site, find one online that could use an upgrade. This is also a good way to get your foot in the door with freelance work. Once you have chosen your site, the next step is to find inspiration through other sites in your niche or industry. Since I am doing a software site, I looked to sites like softpedia and sourceforge for ideas. After you have found some good sites to get ideas from, you can start building your photoshop mockup. The mockup with server as your image template and guide for your CSS and HTML layout. So to begin, choose a color for your base background. I chose #57748A but pick what ever color fits your site better.

Now you can start building some stronger definition into your background. Drag out horzontal guides at 950 px make a new layer. Now select your gradient tool, selection “Foreground to Transparent”, set your Foreground color to #001747, and drag your gradient from the top of the document to the 950px guide we just created.

Now you can start building some stronger definition into your background. Drag out horizontal guides at 260 px make a new layer. Now select your gradient tool, selection “Foreground to Transparent”, set your Foreground color to #009DF1, and drag your gradient from the top of the document to the 260px guide we just created. Then set the layer blend to Linear Dodge (add).

The next part we are going to create is our social networking buttons. Since I want the button to stand out from the header and top navigation, I decided to make them hang off the header. So to do this I need to drag out some horizontal guides, three to be exact. The three guides will be placed at 65, 75, and 115. The 65 and 115 will serve as the top and bottom guides for our bottom respectively. The guide at 75 serves as the bottom of our header/top navigation area. Now we need to drag out two vertical guides at 900 and 940. Next we select your rounded rectangle tool. Set your foreground color to white. Make sure your RRT is set to shape and the radius is 4px then draw out your button inside our guides. Lastly, we need to add our blending option. The blending option we are going to use is the *Drop Shadow*. Set the opacity to 35%, the distance and spread to 0, and the size to 6.

Now duplicate this layer and move it to the right of the first button with a 10 pixel buffer between each.

Then find a small twitter “T” and place it in the center of the first button.

Then find a small Facebook icon and place it in the second.

Now we are ready to create our top header and navigation area. Drag out a horizontal guide at 35 pixels. Make a new layer, then create a black bar the full width of the document.

Now for mock up purposes take a copy of the ads and place them in the ad bar.

Now we are ready to finish off our header. Make a new layer and use the guide we made earlier, the 75 pixel. Then make a new bar between the 35 pixel guide and the 75 pixel guide. Next, add a Gradient Overlay startig with #5D5D5D and ending in #7F7F7F.

Next we are going to create a shadow for our new bar. Grab your gradient tool and set your foreground to #000000. Set the gradient to Foreground to transparent. Make a new layer and drag out a gradient from the top of our document to the 115 pixel guide. Now CTRL+Shift+Click the ad bar and header bar layers. Reselect your new gradient layer and hit the delete key. Finally set this layer Opacity to 50%.

For added depth duplicate the shadow layer.

Next we are going to make our logo. I like the original logo so I am just going to smooth it and make it blend with the new design. Grab your text tool. Now we are going to use the 65 pixel guide as the bottom or our text. Set the Text size to 26, the Tracking to -75, color white, and write out “{webmasterfree}”. Then go back with the text tool and highlight the master section, and change the color to #FF0000.

Now we move to the last part of our header, the top navigation. This will contain a link to: Popular software, Newsletter Archives, and the Submit Your Software section. Again using the 65 pixel guide as the bottom of our text type out “Popular Software | Newsletter Archive | Submit Your Article”. Then we need to change our formatting on this text. Set the Text size to 11, the Tracking to 0, and the color to white.

To finish off our header we are going to add one more element. So grab your Single Row Marquee Tool and make a selection at the 75 pixel guide. Make a new layer and fill the selectin with white. Then using a soft eraser make the line look like it fades out at either end. Then finally, set this layer opacity to 20%.

Again for mock up purposes add two horizontal guides at 90 pixels and 190 and place the large header ad between the guides centered.

Now that we have our header area complete we can move onto the menu bar. Again, we are going to drag out some new guides this time two vertical (50 and 975) and two horizontal (210 and 250). Then grab your Rounded Rectangle Tool with a radius of 10 pixels and make a select within those guides. Then we are gonig to add a Drop Shadow and a Gradient Overlay. The Drop Shadow first, set the opacity to 30%, the distance and spread to 0, and the size to 8. Then add a Gradient overlay, set the starting color to #CCCCCC and the ending color to #FFFFFF.

Next drag out another horizontal guide at 230. This will serve as the bottom of our text. Then type out “Home | Archive | About | Contact | Advertise | WMF Resources | Popular Software | Mirror Service | Submit Your Article”. Notice there are two spaces between each break. Set the text size to 14, we will be using arial (For the rest of this tutorial so I won’t be stating the font style further), and set the color to #464646. Then highlight the “Home” text and change it’s color to #000000. We will be using that as the active page color.

Then to denote the active link more we are going add a upside down triangle. Then add a Drop Shadow, set the opacity to 60%, the distance and spread to 0, and the size to 5.

Now make a new layer and add a radial gradient on color #10719F to transparent. Then scale the width to be as wide as the menu bar. Lastly erase the gradient under and in the menu bar.

Now that we have our menu bar we can add the last of the ad spots. Firstly you need to drag a new vertical guide and 35 pixels and one horizontal guide at 260. Then place the square ad on the left. I added a red border to show the actually ad size.

Then place your tall narrow ad on the right.

Next place the shorter ad 10 pixels below the tall ad on the right side.

Next we are going to create our search bar under the square ad. Drag out two horizontal guides at 550 and 575, then one vertical at 375. Using the same steps like we did on the base menu make the search bar. Only this time set the rounded rectangle tool’s radius to 4px.

Drag out a vertical guide at 300 and using the Rectangle Marquee tool make a copy of the search bar between 300 and 375. Now that you have the copy it’s time to blend it in with the bar so it does not look so harsh. First an Inner Shadow, set the opacity to 75%, the distance and choke to 0, and the size to 5. Next a Gradient Overlay startig with #FF6B38 and ending in #FF291B and set to linear burn. And finally add a 1 pixel inner gradient stroke in the same colors as the main bar.

Then grab your text tool and set the font size to 18px with a 20 tracking and type out “search” inside the red button.

Now we need to create the keyword search area. So drag out 4 new guides the first three will be 5 pixels from the top, bottom, and left of the edges on the main search bar. The last will be 2 pixels from the left edge of the search button. Now add an Inner Shadow, set the opacity to 25%, the distance and choke to 0, and the size to 5. Then add a copy of the gradient from the main serch bar and reverse it.

Lastly add the Mock up Search Text. This font size is 14 px.

Next we need to create the main software content area. Make sure to leave a 10 pixel area between the main content and the side bars. Now add on new horizontal guide at 395. Set your Foreground color to White. Then select your Rounded Rectangle Tool and set the radius to 10 px and draw out a shape from guide 260 to 395 and leave 10 pixels as space between the side bars. set your layer opacity to 15% and ad these Blending options. The Drop Shadow first, set the opacity to 30%, the distance and spread to 0, and the size to 16. Then add a Gradient overlay, set the starting color to #CCCCCC and the ending color to #FFFFFF.

Thien we add two line gradients like we did on the header. only this time one will go on the bottom.

And the other on the top.

Now we are going to add a bottom glow the exact same way we did the main menu’s top glow.

Now drag out four new guide at vertical 560 and 565 and two horizontal at 270 and 275. Then select your Elipse Tool and make a circle in those guides. Now we are going to add 6 blending options. The Drop Shadow first, set the opacity to 30%, the distance and spread to 0, and the size to 32. And Inner Shadow, set the opacity to 100%, the color set to #0B4C6D the distance and choke to 0, and the size to 4. Then and Outer Glow in color #5ED2EB. Next a Bevel and Emboss Set to smooth, with a 100% depth, the direction set to up, the size to 24, and the soften to 0. Then add a Gradient overlay, set the starting color to #00A8FF and the ending color to #FFFFFF. And lastly a Stroke set to 1 pixel width, outside, at 56% opacity, and and the color set to white.

Then we add our sample description. Start the text on the 560 guide and 15 pixels below the glowing circle. Now type out “Calme is a straight-forward application that can help you create and print monthly and yearly planners as well as picture calendars.” Make sure the text stays 20 pixels away from the right edge. Set the font color to white and the size to 14 px.

Now we need to add the software title the will be place 10 pixels to the right of the glowing circle. Set the font color to white and the size to 16 px and type out “Calme”.

Now that we have our content text area we need to add a devider. Drap out a vertical guide at 545. Then make a once pixel vertical line like you did with the top and bottom of the box. But this time use the Single Column Marguee

Next make a new layer and make a box with a 10 pixel padding from the top and left of the main content area, 10 pixels from the devider, and 20 pixles from the bottom.

Make a new layer and make a box inside the white box. Allow 3px padding on all sides. Then we are going to add an Inner Shadow. Set the opacity to 40%, the color set to #000000 the distance and choke to 0, and the size to 25.

Next add a mock up box image.

Hit CTRL+G with all the sections of the software container. This will put them in a group folder and make it easir to duplicate and move. Now higlight the group and copy it. Now select the new group and add a 15 pixel padding from the first.

Follow the same step again.

Follow the same step again.

Follow the same step again.

Follow the same step again.

Follow the same step again.

Now Using the same technique as we did on the base of the software container create a new box under the search bar. Add a 45 pixel space between the shearch bar and the new box. Make the box 350 pixels tall.

Now make an identical box 45 pixels below the one you just mad. The easiest way would be to make a group of the new box copy and move it into place.

Next we are going to copy the white software box into our top side container.

Then add the inner shadow like before.

Then Using your Rounded Rectangle Tool set to Pathes and a 4 pixel radius make a white text tab inside the software box. Then hit CTRL+Click on on the large white main box and go to Select > Inverse. And delete the excess.

Then add our mock up software text. Set the font color to #707070, the size to 12px, Bolded, and a 20 pixel tracking. Then type out “RegCleaner” in the text tab.

Lastly add a mock up image inside the remaining box area.

Copy This group. Now select the new group and add a 30 pixel padding on the right from the first.

Copy This new group. Now select the new group and add a 15 pixel padding from the bottom first of the first set.

Follow the same step again.

Follow the same step again.

Follow the same step again.

Now we are going to add our category text. This new text will be placed 15 pixels below the search bar. Set the Font size to 18 px and the color to white. Then type out “Top Downloads:”

Now we are going to add our category text. This new text will be placed 15 pixels below the tops side category box. Set the Font size to 18 px and the color to white. Then type out “Categories:”

Now set your text size to 16px with a 40 pixel tracking. Now type out “Browser Tools Communication Tools Database Tools Download Apps Email Tools Image Tools Media Tools Office Tools Search Tools Security-Privacy Server Tools System Utilities TCP/IP Networking Web Authoring Tools Misc. Categories”. Like below.

Now copy the circle from the software container and make it 25% larger and use it as the bullet on the categories.

Then copy the menu bar and make it the the footer bar. place it 25px below the last software container.

Then copy the text and set the color to #000000.

Lastly add the legal info 5 pixels under the footer bar. Set the font color to white and the size to 11px.

Lastly add the top glow from the top menu bar. And you are finished with your new updated site redesign.

Here is the Original and New side by side.