As a UI designer, it’s hard to do at work, a type of work to do in the end, such as just doing web development, such as mobile client development and so on, just do when faced with such a situation, what you are doing the use effect of the picture can’t see, but to the developers need to be compiled to use, namely, see not, How do we test the effects of the design process? Delphi development is the case mentioned above. So, this article to one thousand have requirement of UI designers, because unless the company is doing this kind of is the development of the “old”, this requirement is met in the little chance, but you can still get this article backup, because once met this kind of situation, to read it can greatly save your time, prevent do something useless, I spent a considerable amount of trouble to sum up the following experience, I hope to be helpful to every designer child who was hurt by Delphi.

When I was seconded to another team for an interface redesign, I saw the first version and it crashed at first. I will illustrate the reason for the crash below, because I encountered a situation where the original developer — no! Original design document – None! The developers handed me an image folder containing all the image elements from our original interface, but were told that these images would need to be compiled by the developers, which means that if I wanted to see the interface, I would have to go through the following steps:

As can be seen from the flow chart, the process in the yellow circle is beyond our control.

At that time, I was too naive to know that we designers could replace images more directly and conduct design self-testing. After being told the steps of picture replacement, my first reaction was: it was too much work for the developers, and I admired the siege lions developed by Delphi. Because I’ve been doing a lot of Web development for a long time, and I know a lot about the front end of the Web, but for things beyond my knowledge, I just say, “Please take my knees!”

When I saw the first version of the redrawn interface (or rather, the first version of any other UI), it looked something like this :(for the sake of project confidentiality, I only took some of the irrelevant interfaces here) what a beep!

A brief explanation, because the CS structure product interface needs to be changed, there are only two parts that need to be modified, background and button picture. The button image is so distorted that the only good news in despair is that the background image is normal. First of all, I thought it was a compilation problem. After all, the program executed a *.dll file. When I consulted with the siege Lion, his expression told me that I had to solve the problem by myself. Think it’s the size of the picture → modify it according to the original size of the original picture → abnormal → think it’s the problem of the drawing software → use the drawing tool to do a few map tests → abnormal → think it’s the problem of the operating system (mine is 64-bit, suspect to compile under the 32-bit operating system) → Abnormal →… → abnormal. The almighty Google tells us that there is no reason not to. After my repeated access to information and try, finally have the following results, friends please enjoy the benefits, take away thank you.

1. Delphi on the compilation of picture files

Here for Delphi don’t do too much explanation, as a designer friend, just need to know this is a kind of language development is good, after all, this is far beyond the confines of our work, but when we meet this kind of project, you need to know, first of all, we must let developers to install a local test environment to us, in order to see our drawing effect at any time. And in the program folder, there will be the corresponding interface DLL file, let the developer to point out to you. Because as a program extension file, there will be a lot of existing in the program, developers tell you the corresponding interface DLL file, you can use the following artifact, decompile software.

In addition, if possible, it is best to get the original image file, after all, if the original interface is not deformed, the original image file size can be provided for your reference. Of course, if not, don’t panic, our versatile decompiler will help.

There is an exception here, that is your company that the very irresponsible designer of the product (assuming resigned) did not process the picture, the decompression software to see the picture is garbled, and the name is not standard, then you only have to give the picture to the program ape this way feasible.

UI designers should not be intimidated by programs that need to be compiled to use image elements. Understanding how it works, while not helpful for interface design, will help you pinpoint your search for answers.

2. Use of decompiler Resource Hacker

At the beginning of my career, no developer told me that I could use a decompiler to view DLLS. Fortunately, I’m a person who likes to learn and try new things, so when I found Resource Hacker (or any other software that I use because I didn’t test it personally), I was overjoyed. This means THAT I can edit and replace my images, see the effects, and make corrections in complete control, eliminating the number of steps each time I hand them over to the developer to compile, return them to me, and replace and see the effects. When the software is opened, the interface looks like this:

What I want to modify is all the images in the JPEG folder. Expand the tree further to see:

The folder on the left corresponds to the picture on the right. If just like me to redraw interface (personal feel of the UI work also can do this step), the software functions and other buttons are not, as long as the right to replace the resources, save, and then enter the program to check the effect is ok, that is to say, even without the original image format of the resources, we can be saved in this way (of course, Doesn’t seem to make much sense). Sounds simple, but what if the decompiler presented you with an image like this?

Don’t talk to me about hexadecimal, binary, Unicode, UTF, I! No! Understand! Anyway, I call it “garbled”. Is the sky dark again? Before we replace the image resource, we do the following two steps.

Decompiled image resources are “garbled” situation, in fact, does not affect the final interface effect, but will affect our work efficiency.

3. Set the drawing software (Take Photoshop as an example)

Why do you want to reset the photoshop, reason is very simple, rendering the code above is the cause of the picture too much additional information, usually right view photo attributes can see pictures of many of the “useless” information, as mapping software, ps need data in the preferences – export – yuan there choose “no”, my default is “copyright and contact information”, This is 2017CC version, there should be no difference in other versions.

4. Use of jhead command to clear picture information

After the previous ps Settings, the attribute information of the image is still not cleaned up. Here we recommend a command line tool for processing image information, jhead. Specific can search by yourself, a very simple command line, the folder for batch processing, simply can’t praise.

Ok, after the above image manipulation, the image file imported from Resource Hacker is now properly displayed.

5. Drawing principles of button pictures (most important information!!)

This is the most important thing, the above description is just how to use decompilation software correctly and how to display images correctly in the software, but it does nothing to solve the problem that the image display is not normal in the first place. Hold your horses. The dry stuff is coming. Delphi’s button components (including scroll bars, drop-down boxes and other related buttons) set the display mechanism of filtering image background, color reference point is the first pixel in the upper left corner. Ordinary background images are not affected. The first version of our UI had solid colored rectangles filled with buttons, which is why we had this weird display where the background was filtered out to be transparent (not completely transparent, which is maddening). Now that I know the reason, I’m going to block it, and as smart as you are, you can think of a solution, rounded rectangle! Background color left into the environment color, no problem!

What if you have to use rectangles for style? Let’s take a look at the picture below

The solution is to leave pixels in the upper left corner. When you see this, your designer friends may not be happy with it. I understand. Even if it’s only 1px, we can make a 1px height margin at the top of the image, or a 1px width margin on the left.

For button classes, a variety of rounded shapes are preferred and will not pose any problems. For rectangular backgrounds that require solid color padding, it is important to leave the upper left pixel.

Ok, to sum up, the process is as follows: Set up photoshop – Draw the image remember the effect of the top left pixel – clear the image attributes using Jhead – decompile.

Addendum: BMP files for transparent background

This is another problem encountered recently, because it is also Delphi development, so I put it in this article. About why the product development inside the button needs to use BMP bitmap format, I am also very confused, all know this format is simply big! Big! Big! But as the second development, I am the right without questioning, in short, the developer told me that this can only use BMP format, and then studious I checked myself, the official explanation is: BMP format and existing Windows procedures (especially the older procedures) widely compatible. All right, use it. It was a very simple task and the responsible developer gave me the original image as a reference. I looked at the original image and started to make it the same size. It was very simple. (Not a picture of the actual project, subject to confidentiality rules, but close)

But goose, after the development of the picture sent me the screen shot is the following.

What, a transparent background? Didn’t everything that needed transparent backgrounds used to be PNG? Where is the transparent background option when BMP format is saved? When I went to talk to the developers, I was told that the original images were designed by the industrial center, they just needed to add a feature, they just needed an icon (probably the easiest thing for developers to paint ICONS). Never mind, self-sufficiency. Then check, sure enough, there is a transparent background BMP format, all you need is to create an Alpha channel, as follows:

The channel should be familiar to the UI. Like a mask, it is “white through black”, so just fill the background that needs transparency with black. When saving again, the system will automatically check an Alpha channel option as follows:

Take a look at the final result:

Back to normal!

Delphi development needs to use BMP format files, be sure to establish a channel to achieve transparent background.

In fact, there are a lot of skills that can be acquired at work, and many projects can accumulate valuable experience as long as they are done once. In any case, designers must maintain their learning and problem-solving abilities, which is the king.