We’re proud of our new website design that has been painstakingly developed for BoxedArt.com. We’ve poured months into the design, content, and programming in order to re-launch the best possible service, and now we’re showing the secrets of how all of the eye candy was made. So without further ado, here is a step by step guide on how our shiny new layout was developed in Photoshop.

Alright, let’s start with design…

THE BACKGROUND

Step 1: Create a Palette
First, open up Photoshop and start a new project. You can do this by clicking File>New or by pressing CTRL-N. We’ve chosen a normal canvas size for the web, 1000×900, however, this setting can be increased at a later time.

Step 2: Apply a Gradient
Now that the canvas in set up, it’s time to start the background of the design. To do this, make a new layer on the “layer palette” or press CTRL+SHIFT+N. Then fill the layer with the gradient from right to left with foreground color #edd8af and background color #ede4c9. This color is used to represent the color of the box.

Step 3: Add a Texture

The BoxedArt background is designed to look like a cardboard box. To make this box texture effect, make another new layer and fill it with the color #bcb6a9. Next, apply a film grain filter following the setting below. Then, to make a rougher look, apply a Gaussian blur to the texture.

This is how the background image looks once the above effects have been applied:

THE HEADER

Step 4: Tape Effect Navigation Bar
For the top navigation section we placed a piece of tape across the top. We have seen tape used on many websites, however we used it a bit differently here. Rather than have the tape holding something in place on the website, (which is also done later on), this piece of tape is holding the cardboard package closed. Because the BoxedArt design was developed to look like a box that has been sent through the mail, this was the perfect effect to use for a navigation bar. To create this navigation bar, we started with a photo of a piece of tape, downloaded from bigstockphotos.com, and stretched it across the top area by using the transform tool, Edit > Transform or CTRL-T. Next, to make the transparent effect, weset the layer properties to linear burn. Below are the results:

Step 5 – Old Worn Stamp Navigation Buttons
Staying with the box theme, we made the navigation buttons look like old, worn-out, mailed stamps. To do this, we started with an old stamp photo (also downloaded from bigstockphoto) as a guide. After the photo is downloaded, the first step is to path out the stamp, extract it out from the background, and duplicate the stamp layer to a new layer. After the stamp is pathed out without the background, there is still an existing image on the face of the stamp. To cover the image on the face of the stamp, we took an image of old yellowed paper and pasted it, which also added a nice texture.

Next, we wanted to add some color to the navigation buttons to make them pop and to separate the various categories of the website. To do this, we placed color boxes on each stamp, with a decorative border around each box. After you have created the color box, we set the properties of the layer to linear burn so that the color blends in to the old stamp. Then, we added another new layer with a black and white background from top to bottom. After that, we added the film grain to the layer with the below settings. Finally, we again changed the layer properties to overlay, set and the opacity to 60%.

Note: You can see the number of layers used to create the stamp in the above screen shot.

Step 6 – Apply the Navigation Buttons to the Navigation Bar

Now that we have created the stamp buttons in various colors, it is time complete some final preparations and finally to apply these buttons to the top website navigation. We gave each navigation button some hand drawn character by applying an icon set called Sketchy icons by ~mathilde. They are applied by placing the icon on top of the colored box layer, and aligning the icon on the center. The same processs is used to apply each icon to each stamp.

Next, use transform (CTRL-T) on each of the stamps and turn them in different direction to give them a “slapped on” look. After that, switch to the text tool and use a handwritten font for the text next to each category. Here, we used the font of “Loved by the King”. Finally the top navigation bar is done.

Step 7 – Starting the Top Introduction Area
Blocking out the top of the introduction area is one of the simplier steps. First, create a new layer (CTRL+SHIFT+N), and then select with the Rectangular Marquee Tool in the tool box. Now, create a rectangle box across the page, and use the fill tool to fill the box with white color. This area will serve as a white piece of paper that is taped up onto the design.

Now that you have the white paper done, make another new layer below the white paper layer and fill it with black; this is to make the shadow of the paper. once you have done so, go to filter>blur>Gaussian blur with a radius of 6.5. After this, set the opacity of the layer to 20% and move it right by 5 pixels. Then, add the main text, in this case, the phrase “Simplify and Save” was used, on the top area above the paper.

Now you can see there’s a shadow behind the paper, but the paper don’t just stick there, so to hold it up we add some scotch tape on one side, as shown earlier on the tutorial, and on the other side, we will use a post it note for balance. Once you have the paper done, fill it up with some text in a handwritten font, so it looks as though a note has been taped onto the package. Finally, highlight all layers and click CTRL-T to turn it to -1.5 degrees, to give it a more realistic taped on look like the shipping label on a box.

Step 8 – Sticking on a Post-it Note

We used a post it note on the design to separate the space with the description of our website’s benefits from the sign up information. It also went great with the box theme, as if the note was applied by the post office upon delivery of the package. To design the post-it note, make another new layer (CTRL+SHIFT+N) and then pick up the pen tool. Using the pen tool, draw a square with curve corners similar to the below screen shot.

Once you are done drawing it, go to the path palette, hold ctrl, and click on the word path layer. Then you can see the box that you drew turn into the selection. After this, just fill it with the foreground color #fffb78 and background #fffcd1, and pull it from the top left corner to bottom right corner. You will be left with a familar yellow colored post-it looking shape

Step 9
Now, we again need to add a shadow to add depth to the paper. Therefore, another new layer (CTRL+SHIFT+N) is needed below the yellow post-it-note. The process is the same as used on the white paper, but set the opacity to 40%. You will also need to transfom the shadow to create a skew, and pull it out slightly just like the diagram below.

Step 10 – Filling in the Post-it Note
Next, add in the text you want on the post-it-note. On our note, we added a few join now/shop now buttons. To make similar buttons, you first draw a box and fill it with a green border. Then, add a mask on it, and use the grudge brushes. Next, mask out part of the box to make the line look broken up, which is how we achieved out stamp effect.

And this is how it looks like finally.

THE BODY

Step 11 – Curled Masking Tape Header Bars
Now, let’s move to the content area of the body. In this design, we have 2 columns of content, and a lot of little icons. We used several existing icon sources because we liked the hand drawn look of them, including Handy Icons and Sketchy icons. At the start of the body section, we have a header bar, which lists the name of a section of the website. To stay with the box theme, we made this header bar look like a strip of curled masking tape. As with the scotch tape, the masking tape also starts with a stock photo from bigstockphoto. We then increased the length of the tape using the Rectangular Marquee Tool by selecting part of the tape and duplicating it to the left to make I longer. To do this, simply select the area to duplicate, select up the Move tool, click on the selection by holding the ALT+SHIFT keys without letting go, and then pull it to the right to make longer. To avoid the seams, just use the stamping tool to touch up the seam. Check out the preview below.

Step 12 – Little Buttons Beneath the Previews

The content area of BoxedArt contains several previews of website templates with little buttons beneath them. For the buttons below the previews, just pick up the Rectangular Marquee Tool and make a small rectangle, and fill it with color #123057. For the lighter buttons, just duplicate the first layer, move it under the first button, and set the layer opacity lighter; here it is set to 40%. Repeat the same process for additional buttons.

Step 13 – Using Dashed Seams to Separate the sections

To separate the main categories, a simple effect was used to give the look of seams imprinted across the box. To create these, just draw dashed lines using the text tool and turn it 90 degree. Then, set the layer properties to Overlay. To make it darker look, just duplicate the layer; use 2 to 3 layers depending on how dark you would like the seams.

Step 14 – Filling in Additional Content

Adding the rest of the content was pretty easy. We simply used the line tool to draw lines to separate each category and added in the text and icons as necessary. We also used a nice clean font, Helvetica Condensed, for the category titles. Below is a view of how the body looks as a whole:

Step 15 – Bottom Ad Placement

Now we have reached the part where the ads are. Here, tape was again used for the background, using a pre-existing image as a starting point. Next, the Rounded Rectangular Tool is selected with the foreground set to white and a the radius of 5px. We then draw along rounded rectangle across the tape, and after that, another few more rounded small rectangles inside the white rounded retangle with a light grey background (color #f8f7f3), and with a darker grey border. You can set the border under the layer properties, just double click on the layer and set it accordingly.

This is how it looks like when complete:

Now let’s add the title and the ads in to each boxes. And here’s the final result of the partner row:

Step 16 – The Announcement Section

The announcement section uses the familar masking tape header bar, as well as a section for newsletter subscriptions that looks like a sticky piece of paper. First, we added thick tape for the title using he same steps for the tape header bar in the body section. As for the content, it is pretty easy, just add in the lines to separate the columns. Next, for the subscription area, pick up the rectangular marquee tool and draw a small box at the right hand corner, then fill it with color #f9e5a6. Once you have done that, press CTRL-D to deselect the selection, and pick up the burn tool, set the brush size to 35 pixels and burn the corner of the brown box just like the below example.

Finally, set the opacity of the layer to 60% and add in the drop shadow by double clicking on the layer with the brown box, and alter the setting as below. Later on, just add in the content in the area.

Here’s the final result after all content is in. Pretty cool huh?

THE FOOTER

Step 17 – The Footer
Here, we are reaching the last part of the design, the footer. Designing a nice clean footer is also easier than it appears. Firstly again we use the rectangular marquee tool, and select a long rectanle across the page, filling it with color #462d0f. Then, take the line tool and draw a line with the color #a05d18.

For the footer category part, again we draw a big rectangle, fill it with color #472a0b, and set the layer properties to 78%. Then, create another new layer and create another rectangle the same size as the layer, fill it with color #fffcd1. Next, add some film grain effect matching the settings below. Finally, set the opacity of the layer to 30%, and the properties to multiply.

After you are done with all the setting, this is what it looks like:

Lastly, for the final colored strip on the bottom of the footer, repeat the above steps that were used for the top footer, or just duplicate the layer and move it to the bottom. Then you can just add in the content for the footer. Look at this preview to get an idea of the above. Enjoy learning.

Congratulations! You have completed the tutorial and have successfully learned the effects used in creating the feel of the new BoxedArt design. Remember that you can use the color/fonts of your prefrence to match your web page design.

Enjoy!

We all use Photoshop on a daily basis, but I bet there’s at least one tip in this post that will give you the old ‘Why didn’t I know of this before’ moment! It’s tips like these that make the most common of tasks quicker and easier than ever to help speed up your Photoshop workflow.

Hold Spacebar to move a selection

Drag a selection with the Marquee tool, but before releasing the mouse button, press and hold the Spacebar to relocate the selection.

Display larger font previews

Go to Photoshop’s preferences and head down to the Type section. Change the Font Preview Size option to Extra Large to display legible preview on the font drop down menu.

Change values with the cursor keys

Rather than typing in an exact figure, simply nudge the numeric value up and down sequentially with the cursor keys.

Quickly zoom back to 100%

Double click the Zoom icon’s magnifying glass to jump back to 100%.

Toggle visibility of multiply layers

Click the ‘eye’ icon next to a layer to toggle the visibility on or off, then drag the selection down the palette to repeat the command on multiple layers.

Hide or show all other layers

Press the ALT key while clicking the ‘eye’ icon next to a layer to toggle the visibility of all other layers.

Load the selection of a layer

Press CMD while clicking the layer thumbnail to load a selection of the layer contents.

Quickly toggle between blending modes

Windows users can simply toggle using the cursor keys, Mac users however can use the Shift key along with the plus and minus keys while the direct selection tool is active. Using this command while another tool is selected will change the blending mode option for that specific tool.

Toggle palette visibility

Increase the size of your work area by toggling off the palettes using the Tab key. Hover over the edges of the screen to bring back palettes, which will then disappear again when the mouse is moved away.

Fit to full screen

Another handy tip for Mac users. Cycle through various full screen modes by pressing the F key.

Switch to precision cursor mode

Press Caps Lock to turn on the precision cursor, useful for creating accurate selections. This also toggles off the brush outline, which can be handy for some occasions.

Increase and decrease brush size

With the Brush tool selected, press the [ and ] keys to increase or decrease the brush size.

Rotate a Photoshop brush

Head into the Brush setting, under Brush Tip Shape adjust the circular icon to rotate the angle of the brush.

Quickly adjust layer opacity

Select a preset opacity value by pressing the numeric keys from 1-10. Number one equals 10%, five equals 50% and so on.

Auto select layers or groups

Select and adjust the selection settings to automatically select a layer, or a group. Or turn the option off to avoid accidental layer selection.

Automatically load files into layers

Go to File > Scripts > Load files into stack to open up a bunch of images and automatically place them onto individual layers.

Easily create new guides

Click and drag a guide from the document rulers, or go to View > New Guide to drop a guide at a specific placement.

Change layer palette thumbnail sizes

Click the small options arrow in the corner of the Layers Palette, then change the Layers Panel Options to alter the thumbnail size.

Copy multiple layers

Draw a selection, then use the shortcut Shit+CMD+C to Copy Merged. This takes every layer into the clipping, rather than just the current layer selection.

Move items with super nudge

The cursor keys will nudge an object by 1px by default. Hold Shift while nudging to increase this to 10px. Especially handy when designing web layouts for consistent spacing.

Step 1:

As with pretty much every tutorial I’ve ever written, we begin with a radial gradient. This one is pretty harsh and goes from a reddish brown color to black. Here are the exact color codes:

Foreground color – #922f00

Background color – #000000

Step 2:

In this tutorial, we actually need a pretty intense center, so what we’ll do is duplicate the layer we just made and set the one above to a blending mode of Color Dodge. There are a few types of blending modes, darkening ones, lightening ones, colorizing ones and inverting ones. Color Dodge is probably the strongest of the lightening ones. As you can see in the screenshot, it produces a pretty full-on center.

Step 3:

Now in our glow effect, it helps to have a nice textured background. So we are going to create a sort of smoky haze. To do this, create a new layer, then make sure you have white, #ffffff, and black, #000000, selected as your background and foreground colors.

Then go to Filter > Render > Clouds. This will give you the same random cloud pattern as above.

Step 4:

Now set the opacity of your layer to Overlay and 30% transparency. In some instances this would be enough, but for our needs we want it even smokier looking!

So go to Filter > Sketch > Chrome and use default settings of 4 and 7 for detail and smoothness respectively. Actually you can probably mess around with those if you want, but the defaults seem to be fine.

When you’re done, the result should look a lot smokier (once its overlayed at 30% transparency that is). You can see the result in the background of the next screenshot.

Step 5:

Now before we can start making glows, we need to have something to glow. Here’s where we break out the pen tool. If you have used the pen tool much I suggest playing around with it a little. There are some tricky things you can do with shortcuts, but for this tutorial you don’t need those.

In fact all we want to achieve are some nice curves. Fortunately this isn’t too hard. I find the trick is not to use too many points. Instead rely on the Pen Tool’s natural curving and drag the mouse out for each point so you get a big angle. In this S-curve shown above, I’ve only used three points, the starting point, the end point and one in between to give it the bend.

Step 6:

Once you have a nice curve, create a new layer. Then click on the Paintbrush Tool (B) and choose a very thin, hard brush. As you know, soft brushes are the blurry ones and hard brushes are more solid. In this case I suggest using a thickness of 3.

Note that you can have any color selected as your brush color because we’ll go over it with a layer style shortly.

Step 7:

Now switch back to the Pen Tool. You must switch tools in order to do this next bit.

Then right-click and select Stroke Path. A little dialog box will appear as in the screenshot. Choose Brush and make sure there is a tick next to Simulate Pressure. This is important as it will give your curve tapered ends which will make it rock!

Next right click again and select Delete Path.

Step 8:

You should now have something like the above. Just a thin, cool swishy thing.

Step 9:

Now we add some glows. The easiest way to make our glows is to use layer styles. And the best way to tell you what layer styles to use is to tell you to download the sample Photoshop PSD from the bottom of this page and then open it up and look through them there.

In a nutshell, I’ve added two sets of glows. To do this I first use Outer Glow and then because I want a second glow, I change the Drop Shadow settings so that it becomes a glow (you can do this by reducing the Distance and changing the blend mode to something like Color Dodge)

Oh and also I’ve used a Color Overlay to make the item white so that its like the center of an intense glow.

Step 10:

So now you have the same line but with a cool glow coming off it. The beauty of using a layer style is that you can copy and paste it to other layers. To do this you just right-click the layer and select Copy Layer Style then create a new layer and right-click and choose Paste Layer Style.

Step 11:

So now repeat the same process a couple of times to make more squiggly lines.

In this instance, I made one a little thicker by changing the paint brush size before I did the Stroke Path bit of the process. I also made a third line and erased part of it and sorta made it join the other two to look like a cool triangular shape.

Step 12:

Here I’ve added some text in and applied the same layer style to the text layers.

It’s important to pay lots of care and attention to your text. When you’re first starting out, use simple fonts and play with spacing between letters, words and sizes. You can achieve a lot with just some small tricks. Here I’ve contrasted the three words by making Glow a lot larger and in regular casing, then made Advanced and FX much smaller, with greater space between the letters and all caps.

You can control spacing with text using the Character window. If it isn’t already open go to Window > Character and it should appear. Mess about with the different settings until you learn what each controls.

Step 13:

Now we add some particles. To do this, create a new layer then select a tiny paint brush – size 3 – and just paint some dots on. It helps if they are clustered towards the center of the glow so that it looks like they are emanating from there.

You can make some of the central ones larger by doubling over on them with a second paint brush dab.

Then paste our Glow layer style on to that layer too!

Step 14:

Now that’s looking pretty cool, but it will look even cooler if we give it some subtle coloring instead of this super gaudy red.

So create a new layer, and using a radial gradient, draw a blue to white gradient as shown.

Step 15:

Then set that layer to a blending mode of Color and change the opacity to 50%.

You’ll see that it turns the image kind of bluish. I think that’s looking much cooler already, but just to go that extra step I also created a couple of extra layers, one with some faint yellow and one with faint purple. You can see them in the screenshot above.

I set each layer to blending mode of Color and thin opacities so that they all fade together.

Step 16:

And there you have it: advanced glow effects with a cool color blend and subtle smoky background combined make for a pretty great effect.

Just remember to experiment with settings and try applying the glow to different things to see how it turns out. And try different color combinations, some surprising combinations turn out really beautiful. Good luck!