You are currently browsing the category archive for the ‘graphics’ category.
Whether you are developing an ADF Mobile application or a classic ADF Server application, it is becoming more and more important to support HiDPI screens (high resolution or “retina” displays). There is no easier way to make your application look out-dated than to use grainy, unprofessional image assets or use them improperly.
In HTML, the “px” unit corresponds to the same amount of space regardless of the DPI of your device (however, the number of device pixels may vary). The original iPhone models did not have HiDPI displays. Each point of color on those screens corresponds to one HTML CSS “px” unit. Newer iPhone models introduced a HiDPI (or “retina”) display that has 4 device pixels in the same amount of space that 1 device pixel used to take up (2 device pixels wide by 2 device pixels tall); on these new devices, the width and height “px” values use twice the amount of device pixels.
Why is this a common problem? Since ADF Mobile uses HTML, displaying an image is not as simple as just specifying the source path and magically hoping the browser will know that you are using a high resolution image. You must specify dimensions to go along with the source path.
Let’s work with an example. You have an image named “image-64.png”. This image has a size of 64 by 64 individual dots of color (individual points of color information). If you coded your page like the following, the image will be shown with a width of 64px and a height of 64px (one color dot per “px”):
<amx:image id="i1" source="images/image-64.png"/>
This would look just fine on a classic low-DPI display. However, on a HiDPI display, it still takes up the same space but since there are more device pixels, the image will look very grainy.
In order to look crisp and professional, you need to set a size so that each dot of color corresponds to at least one device pixel. For a HiDPI display, this means your image needs a width and a height specified such that you use 2 dots of image color information per HTML CSS “px” unit (e.g. a 64 by 64 sized image should be specified to use a width of 32px and a height of 32px. In code, your page should look like this:
<amx:image id="i1" inlineStyle="width:32px;height:32px" source="images/image-64.png"/>
Even if you still want to support legacy devices for your application, this same image (with the same specified width and height) will look beautiful on low-DPI screens because of how images are processed modern browsers.
If for some reason you really needed or wanted to specify alternate images for each kind of device, you have the option to use a device properties EL variable to toggle the rendered state of alternate amx:image components or simply use that EL to alter the inlineStyle and the source path as desired.
Adobe Illustrator CS4 has a very frustrating object gradient editing tool. Chances are that you already have the colors of your gradient somewhere in your artwork but not necessarily have spent the time to create a swatch for it. It would be much easier if Illustrator actually let you choose your color stop colors with an eye dropper tool. Actually it does–but it isn’t very obvious. Here are the steps:
Step 1 – Select your shape with the selection tool.
Step 2 – Open the gradient palette and select the color stop whose color you wish to change (notice the triangle above the color has a black fill).
Step 3 – Change to the eye dropper tool (or press “i”)
Step 4 – It is very important that you hold down the shift key when you click to pick up a color or else the gradient will be replaced with a solid color but now the color stop is using your newly-chosen color!
Adobe Illustrator CS4 does not let you directly apply special styling such as a gradient on the stroke of a shape but there is a workaround. This post walks you through the process to get it done.
Step 2 – Add a stroke to the shape by choosing Effect – Path – Outline Stroke.
Step 3 – The stroke appears with a solid color.
Step 4 – Convert the solid stroke into a separate object by choosing Object – Path – Outline Stroke.
Step 5 – You now have separate objects so you can select the stroke separately to make changes.
Step 6 – Finally, you can apply a gradient style on the separated stroke object and can apply other effects like a drop shadow. Rearrange the order of the 2 objects so that the drop shadow of the stroke does not cover up the inner shape.