When building a personal website, a well-designed and dynamic logo can always add a lot to the page. Maybe some friends have seen a thin dotted line around the Logo around the effect of slow creeping of the Logo. For those who have not seen it, please see here:
figure 1
1. Expand the size of the canvas.
After opening the Logo file, the image has only one background layer. Since we need its outline, we cannot directly extend the canvas on this layer. On the Layers panel, double-click the blank area to the right of the Background layer and click the OK button in the pop-up dialog box to convert the background layer to the normal layer Layer 0. Double-click the name of the layer and name it "Logo". Hold down the Ctrl key and click the New Layer button at the bottom of the panel to create a new layer Layer 1 under the "Logo" layer. Then select the menu command "Image → Canvas Size", change the length unit to Pixels in the dialog box, check the Relative check box, Width and Height are increased by 40 pixels, and Anchor keeps the default middle position (Figure 2).
figure 2
The result of this operation is to increase the canvas by 20 pixels in the four directions of up, down, left, and right, which opens up space for our next steps.
2. Make a pattern to fill the background.
Use the menu command “File → New†to create a new file with 8 × 8 pixels and a white pen color. In order to be able to see clearly, we can press the Ctrl + "+" key several times to enlarge the file view to an appropriate scale for easy operation. Select the rectangle selection tool (the shortcut key is M), draw a square marquee with a length of 4 pixels in the upper left corner, and then hold down the Shift key to add an identical marquee in the lower right corner. Confirm that the current foreground color is the default black, if not, you can press the D key to restore it to the default. Press Alt + BackSpace to fill the selection with the foreground color black, then press Ctrl + D to cancel the selection (see Figure 3).
image 3
Select the menu command "Edit → Define Pattern", name the new pattern "black and white square" in the dialog box, and then press the OK button to save the custom pattern.
3. Make a dotted frame.
Go back to the file where the Logo is located, on the Layers panel, select the Layer 1 layer below, then select the menu command "Edit → Fill", select Fill with Pattern in the dialog box, and select the custom we just customized in the drop-down list below The "black and white square" pattern, the remaining options remain the default (see Figure 4).
Figure 4
After confirmation, the Layer 1 layer will be filled with dense and regular black and white squares (as shown in Figure 5, the "Logo" layer is hidden in the figure).
Figure 5
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, the selection will expand outward by one pixel. Press Ctrl + Shift + I to reverse the selection. Confirm that the current layer is Layer 2, press Ctrl + BackSpace, and fill the selection with the background color white. Name Layer 2 "White Edge". Press Ctrl + D to cancel the selection, you can see a dotted frame around the Logo (see Figure 6).
Image 6
4. Make the dotted lines on each side independent of each other.
Readers and friends must have understood, yes, this dashed frame is fake. Here, a blinding method is used to expose the background pattern through a 1 pixel wide gap. It will be difficult if it is moved. . what can we do about it? We continue to use the blind eye method-use four backgrounds to correspond to the four sides. In the Layers panel, drag Layer 1 to the New Layer button at the bottom of the panel to create a new layer 1 copy. Repeat the copy operation two more times to get four identical layers covered with "black and white square" patterns. Select the single-column pixel selection tool, enlarge the image view to an appropriate scale, 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 1 and click the Add Layer Mask button at the bottom of the panel. The result will add an almost black mask to this layer, only on the straight line where the dotted line on the left side of the Logo The top is white, which means the layer Layer1 is only visible on that line. Next, using the same principle, use the single-row pixel selection tool and the single-column pixel selection tool to select the dotted lines above, right, and below the Logo, and add masks to the remaining three pattern layers in sequence. At this time, the Logo does not change from the surface. In fact, the dotted frame around it is already composed of four parts. You can hide a layer to see if this is the case. According to the corresponding parts of the four pattern layers, they are named "left", "upper", "right" and "lower" (Figure 7).
Picture 7
5. Move the dotted line in ImageReady.
Our preparations have been completed. Let's switch to ImageReady for animation. Press the jump button at the bottom of the toolbox, ImageReady will run automatically, and automatically load the file we just prepared, and all elements such as layers and masks will remain intact. On the Animation panel, you can see that the current image automatically becomes the first frame of the animation. Click the Copy Current Frame button to create the second frame that is the same as the first frame (see Figure 8).
Picture 8
Select the move tool, on the Layers panel, select the layer "Left" and press the arrow button to move it up one pixel. Then move the layer "up" one pixel to the right, the layer "right" one pixel down, and the layer "down" one pixel left. From the image, it looks like the dotted frame creeps clockwise. Then copy the second frame to the third frame on the Animation panel, and use the same method to make the dotted frame creep clockwise again. Repeat the above process until the 8th frame is completed. The basic unit of the pattern we made earlier is 8 pixels, and each frame moves by 1 pixel. Just after 8 frames, it can be repeated.
6. The final setting.
ImageReady's default setting is to stay at 0 seconds per frame of animation, we need to change this number. On the Animation panel, click frame 1 to select it, and then hold down the Shift key and click frame 8 to select all 8 frames of animation. Click the drop-down menu for the dwell time under any frame and select 0.1 seconds, so the dwell time for all frames is changed to 0.1 seconds (see Figure 9).
Picture 9
Our animation has been completed, let's set the output file below. On the Optimize panel, select Settings as the GIF Web Palette, and the specific settings can be kept as default (see Figure 10).
Picture 10
Through the menu command "File → Save Optimized", select the directory in the dialog box, name the file, select the save type as Image Only, and then save the file as a GIF animation. Open the GIF animation in the image viewing software, or insert it into a webpage and open it with a web browser, you can see that our Logo has a creepy dotted frame (Figure 11).
Picture 11
According to specific needs, we can also change the white border outside the dotted frame to other colors or cut out, in order to better meet the needs of web design and production.
Okay, the animation is done. Smart readers have seen that the entire process of this tutorial is to achieve a visual deception. As long as you understand the idea, the production process is extremely simple. As long as we develop our ideas, the same example can also create a dotted frame with multiple creeping methods.
The final result is this:
It should be noted that in step 5, you can copy the second frame and move each part directly by 7 pixels, and then select Tween in the function menu of the Animation panel. The software automatically generates the middle 6 frames-this may be easier. , But it ’s not as easy to understand as the frame-by-frame movement.
Egg Whisk ,Egg Mixer,Electric Egg Beater,Egg Beater Whisk
NINGBO HOZ TRADING CO.,LTD , https://www.howzkitchenware.com