Photoshop Production site Flowchart Solution _photoshop

To say Han, this tutorial is a web search, in order to find his map, I have at least found more than 10 web sites, the more than 10 sites reproduced other people's article pictures are all used hotlinking, the source of the site to change the image address, resulting in more than 10 sites can not display pictures, no language .... Hotlinking has been so serious. Fortunately, some of the stations to upload the picture to their own space, finally gathered these pictures. The author of the tutorial is out of the way, if you know, please contact me.
Photo accessories: [1] 104142_550699506_mnejg.jpg (2006-11-7 11:04, 26.54 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>
1. Planning: Whether it is Joek, or the use of dynamic, wind, we should consider two issues:
A, the layout should be divided into the head, middle and bottom three parts.
B, the middle part to consider two situations, one is two columns (Joek left narrow right wide, moving easy to Zoquan right narrow), two is a column, both situations show can not deformation. Some friends want the head of each plate is different, this is also OK, you can make a fuss in the program code, that is programming problem, press not table.
If I see someone else's page want to take down, then make a screenshot, create a Photoshop file, put the screenshot at the bottom, as the original sketch.
2, production.
A, even without the layout of others, it is best to find a similar system of the site cut a map, placed at the bottom. Pull three vertical guides: The left line, the middle dotted line, and the right.
b, establish the head, middle and bottom three layer groups. Some people use Photoshop do not like to set up layer groups, this is not a good habit, a layout, less than dozens of, a number of hundreds of layers, do not separate layer group management is very messy, affect the efficiency, more affect the cooperation of many people.
Photo accessories: [2] 102038_243110116_lmrfd.jpg (2006-11-7 11:10, 11.47 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>
C, when making the best possible to the text content also put up, can be closer to the actual effect, and so on when the map to hide these layers.
D, heading style. A layout In addition to the head, the end to special production, the middle part should consider making three kinds of heading styles: left column, right column, banner, can also be unified style. Also consider the header background, some commonly used borders, and so on. I have a lot of my favorite border style with JS as a style package, call at any time, and the title style I was using flash to do a style, using different parameters to call, you can have different styles and colors, the revision of the time to change a JS file and Flash files, when the layout will save some time.
Photo accessories: [3] 3.jpg (2006-11-7 11:11, 46.05 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0 resized= "true" >

E, commonly used button styles. Commonly used buttons do not have to do in the layout, you can retrieve the original button picture a change.
F, the use of special fonts. Whether it's a link or a content, I advocate using style sheets to control font styles as much as possible, but in some places to use the font is not commonly used, in order to enable all visitors to see their own design intent, it is necessary to make the text into pictures, this category of pictures to be used properly, because the use of the image, the search engine access is useless.
Photo accessories: [4] 4.jpg (2006-11-7 11:12, 35.84 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>
g, pixel map. Try to use pixel processing, such as some borders, small icons, will make the image of the number of bytes greatly reduced, display fast, easy to transparent processing.
Photo accessories: [5] 5.jpg (2006-11-7 11:12, 8.34 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>

3, Cetucetu to be completed in ImageReady, the first to save the finished works, it is best to do a backup, and then jump to imageready work.
A, when you have friends Chettu to merge layers, this is not necessary, the layer is merged, later modify and edit all trouble, and sometimes Chettu also to the size of some layer positioning to do, for example, to cut out a 468x60 ad banner, you can load this banner layer into the selected area (load Selection), and then converts the selected area from the menu select to slices (create slices from selection).
B, do not cut the entire layout at the same time map. Generally speaking, the head color is very rich, but the middle and the bottom color is relatively few. For example, a section of the head of the slice, the color palette may be 256 of colors, and the middle and bottom as long as 18 colors can be done, if the same slice, it becomes the same color palette, the middle part also uses 256 colors, will make the file size increase, but if the compromise, let the head 256 color reduced to 128 or 32 colors, will also affect the effect. So to separate treatment, the method is in PS, respectively, select the head, the middle (sometimes also can be divided into several plates), the bottom, cut, save as several different files, and then cut the map.
C, Chettu to consider clearly, you are prepared to make?
To locate or use the
Positioning, different HTML image segmentation is different. For example, the gray boxes on both sides of the new Yangjiang Web site, if used
To do this, the background image just cuts a 1-pixel-wide 791-pixel background, and if you use
, you should cut out the left and right backgrounds.
Photo accessories: [6] 6.jpg (2006-11-7 11:14, 22.31 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>

D, GIF, and JPG. In the same file, Photoshop is to allow different slices to use different file formats, but the GIF format and JPG combination of places, sometimes the naked eye can see the color difference, so the same part of the Chettu best use the same format. Less color, more simple pictures, text pictures, from the vector map to turn over the small icon, border background and other pictures, generally in GIF format better, file small, color without losing true. Photographic pictures, three-dimensional software to make the color stereo text, usually in JPG format. If the slices are ready to do flash use, text and vector icons, etc., in flash using fonts and vector graphics compared to make bitmaps occupy less bytes, animation effect smoother. E, pictures with links. There are many links to the image processing methods, you can cut a picture per link, you can also cut a large picture, in the Web editor inside the editor when the link Hot zone added. The better thing now is to use text links to turn the picture into a background.
Photo accessories: [7] 7.jpg (2006-11-7 11:14, 27.34 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>

Picture links can also be done with flash, you can have a cool dynamic effect, cut a large image, into the Flash file as the background layer, the above add a transparent button on it. Note that the flash inside the picture, may be different from the other pictures of the page, there are some differences in the position, there is a pixel displacement, must be handled with care.
Photo accessories: [8] 8.jpg (2006-11-7 11:15, 35.93 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>

Use a picture or flash as a link to search engine support is not good, as a remedy, you can use some text links on the page to guide the search engine to find these pages.

The author of the tutorial is out of the way, if you know, please contact me.
Bug design, my homepage is made of this!