Flex login interface development experience sharing 5: Flex login box beautification

First four articles Flex login interface development experience sharing (-)(2) (3) (4) log on to jackson's blog at the Baiyang Software Research Lab.
In the previous article Flex login interface development experience 4In, Jackson has shared some layout methods and simple CSS Application Methods on the login interface, and added background tiled code for everyone to learn. This time Jackson continued to change the Flex login box to make it more aesthetic. It may be difficult for programmers who have no design experience to process images even with a small icon. So Jackson will try to briefly introduce some Photoshop image processing methods here, hoping to give some learning references to programming friends.

We will continue to rebuild this Flex login box. The current Flex login box is still monotonous, Jackson thought during the transformation, if you can add a company logo image to the title of the panel in the login box, it will make the title more eye-catching. In addition, if you can add images at the end of the account and password input box in the login box, the customer's input guide will be clearer and the customer experience will be better. However, if you want to make the icon display accurately, and the image is not distorted due to the ratio, you 'd better first go to Photoshop (hereinafter referred to as Ps) process the image with the same size as the position to be displayed. To be relatively accurate, Jackson often uses this method to Print the current Flex login window first (each person's keyboard has this function, click the "Print Screen" function key.) In the title text and button text in the Flex login box before the Print example, the position of the icon to be placed is blank with spaces in the full-width Chinese characters, as shown in figure 1Flex login box text modification.

Figure 1 Flex login box text Modification

Then, of course, open the Photoshop software. Create a new Ps file. If Print is successful, the clipboard is automatically selected on the function panel. Just click OK, then, press Ctrl + v to paste your Print Flex login box. Okay, this Ps file will become your "draft" page. Put all the image elements you want to express here, adjust the size of each image, and then process each image you need separately. The advantage of this is that when you finish a picture, you need to first draft a rough outline and layout, try to express your design as accurately as possible (Jackson said ^-^ ).

First, put the company logo on this "draft" (generally, the company's logo image will be a white background or hierarchical source file, and Jackson will not elaborate on it ), resize the image to the desired size. In Jackson's example, the color difference between the logo and the background is relatively small, so you can set a luminous effect for the logo to make it more obvious. (The Photoshop software version used in this example is CS2. Pay attention to the usage of different versions of functions .) In the logo layer, right-click the option that appears, select "hybrid options", and select "external light", as shown in Figure 2 "Photoshop" hybrid options, then, set the parameters as shown in Figure 3. Parameters on the Photoshop outshine tab (other parameters can be tried by yourself until the desired effect is reached ). Then drag the account and password lock to your "draft" file and adjust the size to the appropriate size (open the icon file you want in Ps, then drag the opened image file to your draft file. If the format of the opened image is gif, then, you should first change the index color mode of the image to the RGB color mode before you can drag, set figure 4 Photoshop index color mode to convert to the RGB color mode ), the final adjustment effect is shown in Figure 5 Ps draft file. You can see that both the villain icon and the lock icon have a shadow from the right to the left. This setting is the same as the method for setting the out-of-box light. Select "projection" in "mixed options ", let's take a look at your settings. Jackson won't go into detail ^-^. Similarly, the login and cancel (reset) buttons are designed with icons.

Figure 2 mixed options of Photoshop

Figure 3 parameter settings of Photoshop outshine options

Figure 4 converting Photoshop index color mode to RGB color mode

Figure 5 in the Ps draft File

Next, separate the icons to form Icon files of different sizes. In addition to the logo icon, the size of other icons should be between 14*14-18 * 18px (if you are not clear, you can use the Ps measurement tool for measurement ), the icons in this example are basically within 16*16 PX. Therefore, we create a new Ps file named iocn_pic, and set the height and width to 16*16 PX. Then click "OK. OK. Now, drag all the icons except the logo icon to the Ps file to overlap the center of the icon. You close the "eyes" in each layer on the layers tab in Ps, leaving only the icon you want to output. Figure 6 Photoshop icon output shows the processing file.

Figure 6 Photoshop icon output processing file

Now, you need to output these icons one by one as the icon files used in the Flex login box, click "file" on the top menu bar and select "format for Web storage", as shown in figure 7 Photoshop "format for Web storage". In the displayed tab, select "PNG-24 ", click the "save" button to save it to the folder where your project file is saved as an image to be used. For shadow icons in Flex to transparent background and make the edge natural, you must output "PNG-24" format of image files, Flex for the image format is very good support. Other images and icons are output one by one based on the above method. Jackson assumes that you have processed these icons. Go back to the Flex development interface of Eclipse and copy the processed icon to "assets" in the project for use.

Figure 7 "Save As Web format" function in Photoshop

If you are interested in the Photoshop source file, you can go to the File Download Area Below the article to obtain the Photoshop source file and the compressed package of the output icon file.

Next, we will embed the sharing icon into the Flex login box and add the encoding Design for content verification in the input box. I hope you can correct the shortcomings in this Flex3.0 development and learning article. Jackson is very willing to discuss issues related to Flex3.0 development and beautification and share his experiences with you. Hope you can find your valuable message on Jackson's blog at the Baiyang Software Research Lab. Thank you! (For more experience, stay tuned for the Flex system login interface development experience. 6)