PS and ImageReady do dynamic logo

Dynamic

When building a personal site, the design of a sophisticated, dynamic logo can always add a lot of color to the web. Maybe some friends have seen a circle around the logo with a thin dotted line around the logo slowly creeping effect. I'm going to talk to you about a way to make this creep-dotted box.

Run your Photoshop and open the logo file you made. What the? How to make a logo? This is not a few

Words can be said clearly, and not the content of this article, readers can refer to the relevant information. One point to emphasize is that the standard size of the logo is 88x31 pixels. In this article, in order to make people see more clearly, the author uses a larger size of the picture (see Figure 1).

1, enlarge the size of the canvas.

After opening the logo file, the image has only one background layer, and because we need its contour, we cannot extend the canvas directly on that layer. On the Layers panel, double-click the blank area to the right of the background layer, and then click the OK button in the pop-up dialog box to convert the background layer to normal layer layer 0. Double-click the name of the layer, and name it "Logo." Ctrl-click the new Layer button at the bottom of the panel to create a new layer under the Logo layer layer 1. Then select the menu command "Image→canvas Size", change the length unit to pixels in the dialog box, tick the relative check box, increase width and height by 40 pixels, and anchor to keep the default middle position (Figure 2).

The result of this operation is that the canvas increases by 20 pixels in all four directions up and down, which opens up the space for the steps below.

2. Make the pattern to fill the background.

Use the menu command "File→new" to create a new 8x8 pixel with a white pen color file. In order to be able to see, we can press CTRL + "+" key several times, the file view to enlarge to the appropriate proportions for easy operation. Select the Rectangle Selection Tool (the shortcut key is M), and in the upper-left corner, draw a 4-pixel square Marquee, and then hold down the SHIFT key and add a similar marquee to the lower-right corner. Confirm that the current foreground color is the default black, and if it is not, you can revert it to default by pressing the D key. Press the Alt+backspace key to fill the selection with the foreground color black, and then press the Ctrl+d key to deselect it (Figure 3).

Select menu command "Edit→define pattern", in the dialog box for the new pattern named "Black and White Square", and then press the OK button to save the custom design.

3, make the dotted box.

Return to the logo file, on the Layers panel, select the following Layer 1 layer, and then select the menu command "Edit→fill", in the dialog box to choose to use pattern fill, in the following drop-down list we just customize the "black and white square" patterns, The remaining options remain the default (Figure 4).

Once determined, the Layer 1 layer will be filled with dense, regular black-and-white squares (Figure 5, hidden by the Logo layer).

On the Layers panel, click the New Layer button at the bottom of the panel to create a blank layer Layer 2. Hold down the CTRL key and click the Logo layer to load its outline as a selection. Then select the menu command "Select→modify→expand", enter 1 in the dialog box, press the OK button, and the selection will expand one pixel outward. Press the Ctrl+shift+i key to reverse the selection. Confirm that the current layer is Layer 2, press the Ctrl+backspace key and fill the selection with the background color white. Name the layer Layer 2 as white edge. Press the Ctrl+d key to deselect, you can see a circle around the logo dotted box (Figure 6).

4, make each side of the dotted line independent of each other.

Reader friends must have seen, yes, this dotted box is false, here is a decoy, is to let the background pattern through a 1-pixel wide gap exposed to a part of it, if it can be difficult to move. What should we do? We continue to use the camouflage--four pieces of background to correspond to four edges respectively. On the Layers panel, drag layer layer 1 to the new Layer button at the bottom of the panel, and create a new copy layer Layer 1 copy of the layer. Repeat the two copy operation and get the four layers with the same black and white squares pattern. Select the single row pixel selection tool to enlarge the image view to the appropriate proportions, click on the dotted line on the left side of the logo, and select all the lines where the dotted line is located. On the Layers Panel, select Layer Layer 1, and then click the Add Layer Mask button at the bottom of the panel, and the result will add a nearly all-black mask to the layer, and only the line on the left side of the logo is white, meaning that the layer Layer1 is visible only on that line. Next, the same principle, using the single line pixel selection tool and the single row pixel selection tool Select the dotted line above, right, and below the logo, and then add a mask for the remaining three pattern layers. At this time, from the surface to see the logo does not change, actually around the dotted box around it is already made up of four parts. You can hide a layer to see if this is the case. The sections that correspond to the four pattern layers are named "left", "Top", "right", and "bottom" respectively (Figure 7).

5, in the ImageReady let the dotted line move up.

We're done with the preparation, so let's switch to ImageReady to make the animation. By pressing the jump button at the bottom of the toolbox, ImageReady will automatically run and automatically load the files that we have just prepared, and elements such as layers and masks remain the same. On the animation panel, you can see that the current image automatically becomes the 1th frame of the animation. Clicking the Copy Current frame button creates the same 2nd frame as frame 1th (Figure 8).

Select the Move tool, on the Layers panel, select the layer "left" and press the ↑ arrow button to move it up by one pixel. Then move the layer "up" one pixel to the right, the layer "right" moves down one pixel, and the layer "down" moves one pixel to the left. Viewed from the image, it is like a dashed frame wriggling clockwise. Again, copy frame 2nd to frame 3rd on the animation panel and use the same method to make the dotted box crawl clockwise again. Repeat the process until you have finished making frame 8th. We made in front of the design basic unit is 8 pixels, 1 pixels per frame, just after 8 frames can be repeated cycle.

6, the final settings.

ImageReady the default setting is to stay for 0 seconds per frame animation and we need to change that number. On the animation panel, click Frame 1th to select it, and then shift-click Frame 8th to select all 8 frame animations. Click the stay time drop-down menu below any frame to select 0.1seconds, so all the frames are changed to 0.1 seconds (Figure 9).

Our animation has been finished, the following to set the output file. On the Optimize panel, select Setting as the GIF Web Palette, and the settings remain the default (see Figure 10).

Through the menu command "File→save optimized", select the directory in the dialog box, name the file, save the type select Image only, save the file output to GIF animation. Open the GIF animation in the image viewing software, or insert it into a Web page and open it in a Web browser, and you can see that our logo has a wriggling dotted box (Figure 11).

According to the specific needs, we can also change the white edge of the dotted box to other colors or cut off, in order to more adapt to the needs of web design and production.

Well, the animation is finished. Smart readers have seen that the whole process of this tutorial is to achieve a visual deception, as long as the understanding of the idea, the production process is extremely simple. As long as we open up our ideas, the same example can also produce a variety of creeping style of the dotted box.

The final result is this:

What needs to be explained is that in step 5th, you can copy the 2nd frame and move the parts directly to 7 pixels, then select Tween in the Animation panel's function menu, and the software automatically generates 6 frames in the middle-which may be easier, but not as easy to understand as a frame-by-frame move. :)