Photoshop website workflow diagram

Aside from a few questions, this tutorial was found on the Internet. In order to find his diagram, I found at least 10 websites, the reposted articles and images of more than 10 websites are all leeching. The source website has changed the image address, so that the pictures of more than 10 websites cannot be displayed, speechless .... leeching is already so serious. fortunately, some websites have uploaded images to their own space, and they have finally been found. The author of the tutorial has no idea. If you know, please contact me.
Image Attachment: [1] 2017142_550699506_mnejg.jpg (, 26.54 K)

1. Planning: we should consider two issues, whether it is Qiao KE or Yiyi or fengxun:
A. The layout should be divided into three parts: Beginning, center, and bottom.
B. Two conditions should be taken into account in the middle part. One is the two columns (left narrow and right wide, and the other is the left wide and right narrow), and the other is the one column. The two cases cannot be deformed. Some friends may think that the headers of each section are different. You can also write articles in the program code. This is a programming problem. Press the table.
If I see someone else's layout and want to take it down, create a photoshop file and put it at the bottom layer as the initial sketch.
2. Production.
A. Even if you don't need someone else's layout, you 'd better find a website of the same type of system to cut a picture and put it at the bottom. Pull three vertical guides: Left, middle, and right.
B. Create three layers: Header, center, and bottom. Some people do not like to set up layer groups in photoshop. This is not a good habit. There are dozens of layers and hundreds of layers in a layout. It is messy to manage layers without separating them, which affects work efficiency, it also affects cooperation among multiple people.
Image Attachment: [2] 102038_2431101__lmrfd.jpg (, 11.47 K)

C. It is best to put the text content as much as possible during creation so that it can be closer to the actual effect and hide these layers when you cut the image.
D. Title style. In addition to the header and bottom, a layout must be specially crafted. In the middle part, three title styles should be created: the left column, the right column, and the entire column. The style can also be unified. We also need to consider the header background, some commonly used borders, and so on. I made a style package with js for many of my favorite border styles and called them at any time. I use flash as a style and call it with different parameters, you can have different styles and colors. During the revision, you can change a js file and a flash file to save some time for layout.
Image Attachment: [3] 3.jpg (, 46.05 K)

CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/11/7/3_eDnOsT1u1Qm6.jpg "width =" 716 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click to view full graph \ nCTRL + scroll wheel zoom in or out ';} "border =" 0 "resized =" true ">

E. Common button styles. Frequently Used buttons do not need to be made during layout creation. You can retrieve the original button images and modify them one by one.
F. Use of Special fonts. Whether it is link or content, I advocate using style sheets to control font styles as much as possible, but some places need to use less frequently used fonts, in order to make all viewers can see their original design intent, it is necessary to make the text into an image. This type of image should be used properly. Because the image is used, it is useless to access the search engine.
Image Attachment: [4] 4.jpg (, 35.84 K)

G. pixel chart. Try to use pixel processing, such as some borders and small icons, which will greatly reduce the number of bytes of the image, display fast, and easy to process transparently.
Image Attachment: [5] 5.jpg (, 8.34 K)

3. Cut the image to be completed in imageready. Save the finished file first. You 'd better back up the file and jump to imageready.
A. It is unnecessary to merge layers when a friend cut a graph. It is troublesome to modify and edit layers later. Sometimes, the cut graph must be positioned according to the size of some layers, for example, to cut out a 468x60 ad dashboard, you can load the dashboard layer into the selected area (load selection ), then select from the menu to convert the selected area to a slice (create slices from selection ).
B. Do not cut the entire layout at the same time. Generally, the color of the header is rich, but the color of the middle and bottom is relatively small. For example, for the slice of a layout head, the color palette may be 256 colors, and the middle and bottom are only 18 colors. If the slice is simultaneously sliced, it becomes the same color palette, the middle part also uses 256 colors, which will increase the file size. However, if the compromise is reached, reducing the first 256 colors to 128 or 32 colors will affect the effect. So we need to process them separately by selecting the header, middle (sometimes several sections can be separated in the middle), bottom, cropping, saving them as several different files, and then cutting the graph in ps.
C. Do you want to make it clear?
To locate or use
Location: different html images are separated. For example, if the gray boxes on both sides of the xinyangjiang website are used
To do this, you only need to split the background image with a height of 1 pixel and a width of 791 pixels.
The left background and the right background are cut out.
Image Attachment: [6] 6.jpg (, 22.31 K)

D, gif, and jpg. In a single file, photoshop allows different slices to use different file formats. However, when gif and jpg formats are combined, the color difference may be visible to the naked eye, therefore, it is best to use the same format for the cut graph of the same part. Images with less colors, simple images, text images, small icons converted from Vector images, border backgrounds, and other images are generally in gif format, with small files and no color distortion. The color three-dimensional text produced by photographic images and 3D software is generally in jpg format. If the slice is used for flash, the text part and the vector icon will not be used. The font and vector image used in flash are smaller than the byte occupied by the bitmap, And the animation effect is smoother. E. Images with links. There are many ways to process linked images. You can cut an image for each link, or you can cut a large image, and add a link hotspot when editing in the Web Editor. Now it is better to use text links to turn the image into a background.
Image Attachment: [7] 7.jpg (, 27.34 K)

The image link can also be made in flash, which can have a cool dynamic effect. You can split a large image into a flash file as the background layer and add a transparent button on it. It should be noted that the images in flash may have some differences with the color of other images on the page, and the position also has a pixel Shift, so be sure to handle it with caution.
Image Attachment: [8] 8.jpg (, 35.93 K)

Using images or flash as links does not provide good support for search engines. As a remedy, you can use text links to guide search engines to find these pages in other content on the page.

The author of the tutorial has no idea. If you know, please contact me.
This is the design of the worm's homepage!