Splitting up your Mock up Photoshop file - Templates Lesson
What is the easiest way to create the unique images that are placed on each second level page? You may think the answer is to use the mock up document we have used all semester and just add many more layers to it, in my experience this can cause more problems than it is worth.Although the mock up file is great for creating the overall layout for the entire page, it will be cumbersome and confusing if we place layers required to make all the images for the entire site. A file can easily grow to 100 layers when all images are placed in a single file. My recommendation is that you create additional PSD files which are used to generate the names of each section and the sub-navigational images for each major portion of the site.
I plan to create one PSD document which will generate all my section name images and 6 PSD files which will generate the 6 sets of site sub-navigation. These small files load quickly and are easy to work with. Since adding or changing sub-navigational items is a common maintenance issue, having separate files makes it easy to access the layers required to make the change.
Another reason for creating separate files is to overcome the frustrating way ImageReady saves files. When I created a image named "admissions-title.gif" I named that slice "admissions-title". I add a new layer to the file which displays the words "student services" instead of admission. However when I re-save the slice ImageReady will name the graphic "admissions-title.gif" even though the graphic displays the words "student services".
To force ImageReady to name the file correctly, I must rename the slice from "admissions-title" to "services-title". This step must be repeated every time I add a new section name. If I have 6 section names to create, I must rename the slice 6 times. This can drive you nuts. By creating the images in another file and simply saving the files with the names you select (instead of having ImageReady do it for you) the process will go much more smoothly.
Lets create a PSD file which is only used to create the site section names. I begin by opening the original "admissions-title.gif" file created when I sliced my mock up document. First I need to convert the file from a gif to an RGB file. Image > Mode > RGB
Next I add 6 text layers which each contains one of the section titles. As I type in the words "STUDENT SERVICES" I make sure that the upper left corner of the letter "S" lines up with the letter "A" in ADMISSION. Here is the text before and after the alignment.
I also need to adjust the background layer which currently has
the word admission flattened onto it. By selecting Shift / Alt / Delete (Win) or Shift / Option / Delete (Mac) and placing
white in the foreground, I can instantly fill the background layer with a solid white fill.
I now have a total of 6 text layers and a background layer of white. Here is what my PSD document looks like at this point.
This PSD file is much easier to deal with, I have only 7 layers and the file loads quickly. To create the unique titles for each page
I simply turn on one of the text layers and then access File > Save Optimized As > and then name the file "services-title.gif"
"admissions-title.gif", or "faculty-title.gif".
Before we move on I need to "fess up" to a mistake I made when creating this site.
When I originally sliced the
mock up I was using the word "ADMISSION" as the section name, once I added the words "STUDENT SERVICES" I found the slice was to
small to accommodate this longer title.
Here is how the text looked in the small slice.
To solve the problem I need to re-slice the file so that the slice which holds the title is moved to the
right. When that happens the slice below which holds the "admission" gold navigation button no longer lines up with the title slice.
To create the
admission cell the HTML code would need to change so this cell now spans 2 columns. This makes the top table a bit more complex
but is probably the best solution.
The reason for bringing this mistake to your attention is to emphasize that your design may need to change as you go from
a single page mock up to an entire site design.
When I created the mock up for the second level, I should have typed in the shortest section name "NEWS" and the longest "STUDENT SERVICES". This would have allowed me to immediately recognize my error and either change my text size so that the original cells would have worked, or to reposition my slices.
After you create a few sites you will develop work habits that avoid last minute redesign. For purposes of this class, you would not need to redesign the entire mock up file to accommodate your error, I just wanted to point out the problem as a "heads up" for the future.
Now lets discuss the sub-navigation for each second level page. Each page has a different set of sub-navigation and the size and shape of these cells vary from page to page. As you recall the admission page has indented text in the sub-navigation, while the student services section does not.
I decide to create 6 separate PSD files to handle the sub-navigation for each of the 6 sections at the
site. This makes each file small and easy to navigate and also allows me to reposition the text
and boxes which create the rollover effect without worrying about this affecting the other sub-navigation tables. Having separate files also
allows me to avoid renaming cells in ImageReady.
In the case of the campus site I will need to create these files.
- st-serv-sub.psd
- admiss-sub.psd
- progr-sub.psd
- faculty-sub.psd
- admin-sub.psd
- news-sub.psd
To assemble these files I can use many of the layers I created in my "campus-second.psd" file. I begin by moving over the layers which create the text for the admission sub-navigation, and the boxes which produce the rollover effect.
Before the layers are moved I need to address the issue of how large to make the file which will hold the images.
To determine the height and width
of this file I switch to ImageReady, make sure the rulers are showing, open the "campus-second.psd" file and view
slices. I see that the first slice begins at
120 pixels and the ending slice is at about 320 pixels. The admission sub-navigation requires about 200 pixels from top to bottom.
Since I may need to expand this list later on, I will assign a value of 250 pixels for the height of the new file.
Next I use the slice selector tool and select one of the sub-navigation slices, the slice window will tell me the width of the
slice which in this case is 105 pixels. I need to make the width of my new document EXACTLY 105 pixels.
Now that I have the dimensions for the new file I select the text
layer and then link all the admission boxes layers. Then using the move tool, I select the text from the main document
and move it to a the new PSD file. I save this file as "admiss-sub.psd".
Now that I have the text and boxes, I realize that I am missing an element. The blue line and dot are not included in this file. The placement for this is crucial. To ensure that I place the text and dot in just the right place I open the "apply-ol.gif" and drag this flattened layer over to the "admiss-sub.psd" file. This layer will serve as a alignment tool. I place the image at the top of the new file, and then move all the other linked layers so that the words "apply online" match the flattened gif exactly. Here is a close up of the apply online text as it becomes aligned
1. Text before the flattened gif has been added to the file
2. Text when the flattened gif layer has been added to the file, notice that the text does not match.
3. The text and boxes will
need to be moved, since they are all linked, once the words "apply online" are aligned, all the other words
should be in the correct place as well. Select the text layer which is linked to all the boxes and nudge the layers so that the words "apply online" match up
exactly.
4
One more little detail, the flattened gif has a portion of a dot (which I need) and a copy of the text "apply online"
(which I do not need since it makes the words seem darker than the other text). I want to save the text since it will allow me to
line up the first line of text for all my sub-navigation files. To solve the problem I make a copy of the flattened
gif and then erase the words just leaving the "dot". I rename this layer as dot, and then rename the flattened layer with the words "apply online" as "position".
Here is the "admis-sub.psd" file.
I turn off the position layer, and save the file.
Next I need to place guides where the slices will be created. After the guides are in place, I can turn off all the boxes which surround the navigational words. Then I switch to ImageReady and create slices from guides.
The layer structure of this file is set up in a way that all the text is on one layer, and the boxes that create the rollover are each placed on a separate layer. The text remains the same in the standard and rollover states, the individual boxes are turned on for each rollover effect.
I name the slices, create the rollover effects and then make a decision about what I want ImageReady to do next. I can ask ImageReady to create an HTML file which contains JavaScript code and the table which holds the admission sub-navigation images. Placing this in the admission page would require me to copy the JavaScript code and the table code into the admission.html page.
Another approach would be to use ImageReady to simply create the image slices and then build the admission page in Dreamweaver. For purposes of the class you can just use the original second level mock up we have been using all semester to generate the sliced page. The information in this lesson is only used if you are producing a real site.
Now I would like to make another PSD file for the student services sub-navigation. I access the File menu > Save As > and save the file as "st-serv-sub.psd". I alter the text file so that it now reflects the words for the student services sub-navigation. Once that text is in place I see that I cannot use the same boxes I used for the admission pages since the text lines up in a different place. There is one box which works for student services and admissions, the first box since the first navigational word is always in the same place. I need to remove the smaller boxes which surrounded the words "online" and "phone" and replace these layers with full size boxes.
In this file I assign the layers generic names (box 1, box 2, etc), since I hope to use these boxes again on other pages.
After adjusting the layer positions and drawing some new boxes I now have a file which looks like this. Again i can place guides
and slice up the images.
When creating the sub-navigation file for the faculty page the process is a breeze, because the position of the navigational words is exactly
the same as it is in the student services section.
With the "st-serv-sub.psd" file open I again access File > Save As and save the file as faculty-sub.psd. I begin by retying the words to reflect then sub-navigation for the faculty and staff pages. Since this section only has 5 links I turn off boxes 6-9. At this point you may be tempted to throw away the extra layers since they are not used in this document. I recommend you keep them in case you ever add additional pages to this section of the web site.
Here is how the faculty-sub.psd file looks
This process would be repeated to create programs-sub.psd, admin-sub.psd, and news-sub.psd files.
In conclusion, I hope this demonstration has helped you with file management. Here are the key points I hoped to make in this demonstration.
1. By creating separate files I make my mock up document simpler and easier to manage.
2. The individual files for each sub-navigation table and the file which holds all section names are small simple files which load quickly, are easy to move around in, and will not require you to rename slices. 3
3. A tremendous amount of work is still required after the mock up is approved by a client. The process of moving from a mock up to a template I fraught with unexpected problems. When I created the section names I discovered that I had made the slice to small to accommodate all the section names. Something like this happens on almost every site I have created. Be prepared to adjust your slicing as you move from design to production.
4. A minor deviation, like indenting the text for the online and phone registration buttons has major repercussions because shifts the location of the buttons for the sub-navigation on the admission page and forces you to draw a whole new set of boxes for the rollover. Consider this when you are estimating how long it will take to create a site. Clients see indenting 2 items in a list as a minor detail which takes 5 minutes, as a designer you realize it may take an extra hour or two to adjust the images and layout.