This course takes you from a finished design to a constructed website through KarmaWizard.com. You will learn to do the following:
If you'd like to follow along, download the following .zip file which contains the .psd, the sliced and prepared images, and font.
We've just designed a website mock-up in photoshop that is 750px wide + 10px border on each side. It looks like a blackboard that a child or teacher might write on with a photo stuck on the top corner and pieces of pink paper as the teasers.
We're going to create a fixed width site since it is much simpler to do and takes a lot less consideration. Once you conquer this one you can move on to the fixed width advanced design and the liquid ones once I have those available.
As you can see here we'll need to create the slice for the repeating background image to the exact dimensions of the tile itself. If you hide all the layers except the bottom "bg" layer with the pattern overlay, you will see roughly where the image stops and starts. As long as you are close you probably won't have any problems with it repeating noticably.
Here's how to save for the web in Photoshop CS:
For the other two background images, paper and arrow, you'll need to unhide the hidden layers and hide the backgrounds. Make a small slice in the paper big enough to contain one blue line then down to just before the next blue line. You can make it as wide as you want. Double click and name this "paper".
For the arrow, create a slice just big enough to hold it and name it "arrow". From the file menu choose "save for web...", select transparent .gif, with a black matte.
I like to start with the very background of the site. In this case it is the image that is furthest away from everything. The body is unique in that what image you place on the body will go all the way to the sides, top, and bottom no matter how much content you have or don't have on any given page.
The body is also the only thing that is consistant in every page including splash, intro, pop-up, etc. So what you set for the background color and text color are also very important since that is what those pages will default to minus that background image.
Here's what I want to set:
The default settings for position and repeat will be fine. Click [Apply Changes].
This site definitely calls for fixed width. We'll need to do that, put a border around the wrapper, and make the background black.
In the Primary Wrapper section, place the following:
[Apply Changes]
In the dropdown box select "header" from the options. The header is the very top of your site that contains your site title. It lets your readers know who you are. There we'll need to upload a background image and set the graphic font. Here's how:
Apply Changes
The main links are the navigation area of your site. We're going to give it a background color, a bottom border and padding on the wrapper, left and right borders on the individual links, and a graphic font.
In the "Main Links - Wrapper" section that controls the container, do the following:
In the "Main Links" section that control all the individual links at once, do the following:
Apply Changes
Next up I'd like to add some style to the page heading. The page heading is above the content and says "news" or "shows" or whatever you set in your CMS. We'll give it the same font as the site title and main links and place the arrow as it's background image, positioning it to the right hand side.
Apply Changes
The teasers are the small bits of content that go down one or both sides of your site. The teasers are set in the main preferences in your CMS. If you'd like to split them that can be done by adding the dashed line and depending on which layout you've chosen the second set will either be on the opposite side as the first set or they will appear at the bottom directly above the footer.
I want to give each teaser a pink background to simulate a piece of colored construction paper and seperate them slightly from each other. Here's how:
Apply Changes
I'd like to add a graphic font for the teaser headings but I also need to keep in mind that site owners can turn the graphic font off and on in their CMS. In that case we need to make sure that the font color is the same as the graphic color. Because we've set the general text color to #fff8B3 (shade of yellow) the text teaser heading will inherit it and display that color too unless we explicitly set it to something else.
We'll still need to set the graphic font color explicitly to that shade of yellow and the background color to the same shade of fuschia. In the Graphic Fonts section set the following:
Apply Changes
Now for some finishing touches, I'd like to set some stuff in the "Content Related" tab.
Apply Changes
Now for completeness' sake and to see what your design will look like with a photo uploaded go ahead and try one either with your own or with the one we provided.
Apply Changes
Now you'll need to save your file. Here's how:
Congratulations, you've done your first design! Be sure to move on to the "advanced" construction tutorial when you are ready. Have fun :-)
