Flex landing Interface development experience sharing five: Flex Landing Box Landscaping

In the previous Flex landing interface development experience to share four, Jackson has the landing interface of some of the layout methods and simple CSS application methods are shared, but also added to the background tile code for everyone to learn. This time Jackson continues to change the flex login box to make it more aesthetically pleasing. It may be difficult for programmers who have no design experience to work with a picture even if it is a small icon. So Jackson here will try to simply introduce some Photoshop to deal with the image of the method, hoping to give a friend of the programming to learn some reference.

We continue to transform this flex login box, now the Flex landing box is still relatively monotonous, Jackson in the transformation of the time, if you can in the Landing box panel title to add a company logo image should make title more eye-catching. In addition, the landing box on the account and password input box at the end if you can increase the image of the relevant images, let the customer input guidance more clearly at the same time will make the customer experience better. But for the icon to be accurate display, but not because of the scale of the picture sawtooth, it is best to first in Photoshop (hereinafter referred to as PS) on the need to show the location of the same size picture. In order to be relatively accurate, Jackson will often use this method, the current Flex landing window first Print down (everyone has this function on the keyboard function Oh, click the "Print Screen" function button on the OK), in this example print In the Flex Landing box before the title text and button text, with full-width Chinese space out of the icon need to place the position, such as the Figure 1Flex Landing box text changes shown.

Figure 1 Flex Landing Box Text modification

Then of course it turns on the Photoshop software. Create a new PS file, if you previously print successfully, the function panel preset should automatically select the Clipboard, directly determine the line, and then "Ctrl" + "V" will you print the Flex landing box to paste in. OK, this PS file will be your "drafts" page. Put the image elements you want to express here, adjust the size of each picture and then handle each of the pictures you need to use separately. The advantage is that when you finish a picture you need to sketch out a rough outline and layout, and try to express your design as accurately as possible (Jackson's long-winded).

First of all, put the company logo on this "draft" (the general company's logo will be white or layered source files, pull the map of Jackson is not known), through the Zoom function to adjust the picture to the size you need. Jackson here in the example, the logo and background color difference is not obvious, so you can set a luminous effect to make the logo a little more obvious. (The Photoshop software version used in this example is CS2, please note how different versions of features are used.) Select "Blending Options" in the Select menu that appears in the logo layer right click. Select "Glow" as shown in Figure 2 Photoshop blending options, and then set parameters like Figure 3 Photoshop Outer Glow tab parameter settings (other parameters friends can try it on their own until you reach the desired effect). Then will represent the account of the villain and the small lock on behalf of the password dragged to your "draft" file and adjust the size to the appropriate size (in PS to open the icon file you want, then drag the open picture file directly onto your draft file, and if you open the picture in a GIF format, Then you should change the index color mode of the picture to RGB color mode before you can drag, set figure 4 Photoshop indexed color mode to convert to RGB color mode, and finally adjust the effect as shown in Figure 5 PS draft file. You can see the effect of the figure, the small icon and the little lock icon has a right-to-left shadow, this setting and the method of setting out the glow, in the "mixed options" in the choice of "projection", your friends set up a look at it, Jackson is not known to say ^ ^. Similarly, the login and cancel (reset) buttons are also designed with icons.

Figure 2 Blending options for Photoshop