If you are following along, unzip the Liquid Waves Pack and open liquid-waves.psd in Photoshop. As you can see I've made heavy use of vector masks for the curves. The curves and the gradients make this design potentially difficult to construct.
The slices themselves are quite simple to do, it's deciding where to slice that is the tricky part. Complex liquid dynamic designs take some serious consideraton and are not for the faint of heart. On top of that, there are only so many div's available for use since we always work with the same HTML structure. Due to this you will sometimes have to be a little clever to figure out where to slice. Many times I've sat staring at a design until the right idea hits me. Sometimes even after I've constructed one I'll think of a better way I could have done it. So, the point is this is all an art. If you figure out a more effecient way, more power to you. I'll outline the best way I've found for this particular design.
For this particular liquid design I've cut the mock-up into 6 slices. There's one each for the primary and secondary wrappers, header, body, and one for the teaser headings. The photo also has an overlay that I had to prepare, but we'll get to that later.
Free Training Courses
We have step my step intructions here explaining how to construct a design with the wizard where you can actually "do" as you read along as well.
INTERMEDIATE - LIQUID
In this course you will learn how to construct a moderately difficult liquid dynamic design and the following:
- Creating graphic slices.
- Uploading background images.
- Uploading fonts.
- Applying colors, margins, and padding.
If you'd like to follow along, download the following .zip file which contains the .psd, the sliced and prepared images, and font used.
The Mock-up
Slicing
From the very beginning we'll need to keep the layout in mind and how it will behave if a photo is uploaded and if it's not. Where to slice? As you can see we have a nice curve going on in this design that goes from left to right. When creating a liquid layout - dynamic or not - you need to keep the horizontal movement in mind. What happens when the browser is stretched? What will you see more of? In this case I'd like to keep the curve on the right all the way on the right at all times and the left column and curves at the same place at all times.
If the browser is stretched past 750px wide which are the mock-up dimensions, what will you see? I want to see the header to continue seemlessly in the straight line from the curve and I'd like the gradient to continue. Since the header doesn't stretch vertically, we can slice a small piece from the top all the way down to the bottom that will be perfect to repeat horizontally seemlessly and blend into the background color.
Here are the slices I've chosen to create, not including the photo overlay which we'll get to next:
-
Body - bg.gif
In the psd file it's slice #3 named "bg" because I intend to use this as the body background image because I'd like it all the way to the back at all times.
-
Primary Wrapper - leftcol.gif
Slice #14 called "column" will be for the faux coumn effect on the left hand side and will be on the primary wrapper laying directly on top of the body layer.
-
Secondary Wraper - secondary.gif
I've also created a slice that contains all of the unique parts of the curve in the upper left corner where the photo will go. This is slice #1 named "secondary" since I plan to put it on the secondary wrapper but you can name it whatever you'd like.
-
Header - top-right.gif
I've now sliced the header curve that appears in the right hand corner. It needs to contain everything unique about the corner and meet horizontally at slice #3 just as it will on the site. This slice is numbered #4 and named "top right".
-
Teaser Headings - teaser-heading.gif
Slice #8 called "teaser-heading" is for the teaser headings.
Be sure to hide the faux content in the .psd file before exporting the slices for the web. I've chosen to use .gif's for most of the slices since there aren't many colors involved and you usually end up with smaller files. The goal here always is to stike a balance between file size and appearance.
Creating The Photo Overlay
The photo overlay is needed to create the illusion that whatever photo the site owner uploads into the main photo area, it integrates seamlessly into the design. If you've created and uploaded an overlay with your design, it will be placed on top of the uploaded photo, merged together, and displayed as a single photo.
In the photoshop file I've created a folder called "photo" that has a vector mask on it. I've done this so I can place any photo or texture under it to quickly see what it will look like.
To create the overlay we'll need to do something a little clever and it will involve masks.
- First, create another folder and in it place the photo folder and everything else that will appear underneath it such as the background files.
- Copy the vector mask that is on the photo folder to this new folder you've created.
- Convert the vector mask on the new folder to a raster mask and invert the colors (black to white and vice-versa).
Now if you hide the photo layer you'll see that you have something that you can save for the photo overlay. When you export this, be sure to do so as an alpha PNG (PNG-24 in ImageReady). Since it's getting merged with a photo and converted into a .jpg, don't worry that IE can't natively display the file format.
Launching The Wizard Control Panel
Now we're ready to start constructing our design! To launch the design wizard control panel click the swirling graphic on the side of the page. When you do this the current design will be erased, and you'll be left with a very minimal temporary layout to start with. You will also be assigned a unique skin number that you can refer to again if you want to pick back up where you left off without reloading your saved design.
Layout Selection
Now we're ready to put this thing together. I can either do this one as one column - B-4, or 2 columns - H-3. I think I'll construct it with the 2 column layout, B-4, then when I'm finished I'll switch to the other layout and save a version for the 3 column, H-3.
So, First thing to do is find B-4 on the list of layouts, select it, and hit "apply changes" to see the result.
So, First thing to do is find B-4 on the list of layouts, select it, and hit "apply changes" to see the result.
Body
Now I'll switch to the "body" tab and enter the basic background image, background color, text color, and link color as follows:
- Text:
- for Color: enter white
- for Size: select 80% from the dropdown box
- Links:
- for Color: enter #E8D481
- Background:
- for Color: enter #478CA6
- for Image: click "browse" and select the file named bg.gif from the image pack you downloaded.
- for Repeat: select Horizontal
Click [Apply Changes]
Unless you specify otherwise, these color choices will continue to be the default everywhere . The text color is white, the link color is a shade of tan, and the background color is an aqua that matches the very bottom of the image I've repeated horizontally so it appears to go on forever.
Since all text is white including the header, "The Karma Wizard" title appears to be invisible since the background is also white.
Wrappers
Now let's move on to the wrappers by selecting "Wrappers" from the top dropdown box entering the following:
Primary Wrapper Section:
- Background:
- Image: click "browse" and select the image named column.gif
- Repeat: select Vertical
This will accomplish the "faux column" technique which is really just having an image the width of the column repeating vertically. With this method an image has to be used even if you just want a solid color.
Select the "wrappers" tab and work in the "primary" section. Upload the column.gif image the the background image and make it repeat vertically. Remember, the brower default will position it to the top left so we don't need to specify that again.
Secondary Wrapper Section
- Background:
- Image: click "browse" and select the image named secondary.gif
- Repeat: select None
This layer always lies on top of the primary wrapper and we want to use it for the curve in the upper left. The default positioning of top left is fine but we don't want this to repeat so set it to "none".
Click [Apply Changes]
Now you should see what's pictured here with a column down the left hand side and a curve in the top left.
Header
Now for the header. Select "Header" from the top dropdown box
Background
We want that lovely curve that we sliced to always be in the upper right corner no matter how wide the browser window. Here's how:
- Image: click "browse" and select the image named top-right
- Position: select "Top Right"
- Repeat: select "None"
Dimensions
- Height: enter 148px
I'll also set a height for the header to 148px, the same as the photo height. The default is 150px, but I like to be exact.
Padding
There is a 50px default top padding on the site title on this particular layout so I'm going to override it by setting it to 20px instead. Also, I'd rather that the site title doesn't move into the right hand curve too much when the browser window is smaller. That calls for some padding. I think about 100px of right padding will do. Enter the following:
- Top: 20px
- Right: 100px
Graphic Fonts
While we're here, we should take care of the graphic font for the site title. As you can see it looks invisible right now but if you take your mouse and highlight where it would be you can see it. Site titles support graphic fonts to increase the attractiveness potential of a design. Here's what to do:
- File: click "browse" and select GRIFFNL.TTF or another font of your choice.
- Font Size: enter 41
- Color: enter #1C5064
- BG Color: enter white
Click [Apply Changes]
Now you should see what's pictured here. Try dragging your browser window from big to small to see how everything moves and falls in place.
Main Photo
Now I want to move on to the photo to make sure the overlay is working properly. Select "Main Photo" from the top dropdown box and enter the following:
- Sample File: select "Browse..." and find any photo you might have in your computer.
Dimensions
Because of the nature of a layout with vertical links I need to at least constrict the height of the photo. If I only constrict the height, the overlay will stretch to fit the variable width but that's not what we want. The curve needs to fit exactly in one place in the design, so I'll need to constrict the width as well.
When the height AND width are constricted you'll need to consider what will happen if a user uploads a pic that is not the ideal dimensions. The photo I've created will take a standard 3 to 4 dimensioned horizontal photo. This is what your digital camera produces by default.
- Width: enter 221
- Height: enter 148
Effects
What if the site owner uploads a vertical photo or a photo that has odd dimensions? In this case you'll need to consider the "matte" color and alignment of the uploaded photo in relation to the overlay. The default alignment is center center and I've chosen not to change it. The default matte color is black and I'd rather it be white.
We'll upload the overlay, and set the "matte" to white. Since we are specifying and height AND width for the photo, someone may not upload a photo with the ideal dimensions. In that case we'll need to make sure it still looks good so we'll make those empty spaces filled in with white. Here you have to enter the hexcode, #ffffff, not just the word as you can elsewhere.
- Matte Color: enter #ffffff
- Overlay: clice "Browse..." and select overlay.png from the downloaded pack.
If you'd like more detail regarding the main photo options, read this.
Click [Apply Changes]
Now you should see what's pictured here. There will be a photo in your upper left corner that appears to blend in the site's design. You'll notice too that the site title, "The Karma Wizard" moved over automatically to the right to accomodate the photo and still be centered.
Page Headings
Now let's see what we can do about prettying up the page title for each page so to the tab called "page heading". We want to upload the graphic font, but a bottom border on it, and some left and bottom padding so make it look like it's kind of curving with the design.
To show all the border options such as top, left, right, and bottom, click the plus sign to the left of the word "Border:".
To show all the border options such as top, left, right, and bottom, click the plus sign to the left of the word "Border:".
Main Links
OK. Now it's time to figure out what we can do with the main links. Select "All Links" from the top dropdown box.
The main links will need to be aligned to the left and given a graphic font. We will also need some top padding and adjust the width of the links. I do want to curve the links but will do that next. For right now enter the following:
Main Links - Wrapper Section
- Text:
- select "left" from the dropdown box
- Padding:
- Top: enter 15px
- Margin:
- Left: enter 10px
Main Links Section
To upload a graphic font for the main links, enter the following in the section of the Main Links called "Graphic Fonts":
- File: click "Browse..." and find font GRIFFNL.TTF or another font of your choice.
- Font Size: enter 16
- Color: white
- BG Color: #2E6980
- Mouseover Color: #E8D4B1
- Selected Color: #E8D4B1
I like to keep the mouseover color and the selected color the same, but that is entirely up to you. Keep in mind the BG color is the background color that the transparent .gif's will be matted to.
I also want the main links to also appear as if they are curving with the background. The problem is, you are never going to know which link is going to come first because the client can change it at any time. Luckily we have solved that issue and each link has it's own class by which we can identify it and give it special instructions.
Now to make the curve. We only want the first few to curve and hopefully the site owner will figure out that placing the dashed line in his main links only messes up this design :-) Place the following in the custom css tab:
ul#main_link_group_1 li.n1 { padding-left: 75px; }
ul#main_link_group_1 li.n2 { padding-left: 50px; }
ul#main_link_group_1 li.n3 { padding-left: 30px; }
ul#main_link_group_1 li.n4 { padding-left: 15px; }
ul#main_link_group_1 li.n5 { padding-left: 5px; }
Now to make the curve. We only want the first few to curve and hopefully the site owner will figure out that placing the dashed line in his main links only messes up this design :-) Place the following in the custom css tab:
ul#main_link_group_1 li.n1 { padding-left: 75px; }
ul#main_link_group_1 li.n2 { padding-left: 50px; }
ul#main_link_group_1 li.n3 { padding-left: 30px; }
ul#main_link_group_1 li.n4 { padding-left: 15px; }
ul#main_link_group_1 li.n5 { padding-left: 5px; }
Content Adjustment
Looks good to me. I'd like the content to start up just a little bit. In order to do that I'll have to write some custom code. I'll need to put a negative top margin on the content wrapper. I think 30 pixels will be enough. So, select the custom css tab, and in the general CSS section put this:
div#content_wrapper { margin-top: -30px }
div#content_wrapper { margin-top: -30px }
more coming soon...
