Advanced Search
Keywords

How it Was Made – BoxedArt Website Design Tutorial

This entry was posted By Cubert on Sunday, September 27th, 2009 at 12:20 am and is filed under BoxedArt, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

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…

Tab



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.

Tab

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.

Tab


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.

channel
channel

 


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

channel

 

 


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:

Tab

 

 

 

 

 



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

Tab

 

 

 

 

 

 

 

 



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.

Tab

 

 

 

 


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.

Tab


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.

Tab


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.

Tab


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.

Tab


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.

Tab


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

Tab


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.

Tab


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.

Tab
Tab


And this is how it looks like finally.

Tab



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.

Tab


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.

Tab



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.

Tab


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:

Tab



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.

Tab
Tab



This is how it looks like when complete:

Tab



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

Tab


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.

Tab
Tab


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.

Tab


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

Tab



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.

Tab


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.

Tab


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

Tab



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.

Tab




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!


See the design live!

('DiggThis') StumbleDelicious

Comments

Just wanted to say I LOVE the new site design! Great job…

[...] 14. BoxedArt Website Design Tutorial [...]

Pretty cool. It’s rare to see a gungy yet elegant design.

One word… Awesome

It’s a beautiful design

… that’s gave me some ideas

Thanks and good work ;)

Caes

its is so amzing how youve done well on your site,,pretty cool info.?

This is really clever! haha im referring to you guys doing a tutorial on how your website is being built.

Not only this is helpful, but it reinforces the boxedart.com name!

nice move there!

Really nice design. I like it.

Another one added to my favourites!:)

7.) This really opened my eyes and answered my problem, thank you!

Leave a Reply


  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost