Many designers work with bitmap images when creating web layouts in Adobe Illustrator. Rasterino is a new plugin that provides a set of tools and features making the whole processing of bitmap images far easier and quicker! These include Crop Image, Trim Image, Set Resolution, Re-link Embedded Images and In-line Edit Embedded Images. In today’s tutorial we’ll get acquainted with these main features and applications of Rasterino when creating a web design.
Step 1
When creating a web layout in Adobe Illustrator, the grid system is extremely useful in helping to place elements of design correctly. I used free templates for Illustrator from 960 grid system. These templates represent a set of guides and rectangles that serve as a layout of your artboard.
Flat design is the trend at the moment so that’s why I’ve created my web design in this style. The design blocks were created using the Rectangle and Rounded Rectangle Tools and for the text I used the Type Tool.
Step 2
For the slider I used the Planet London image from Shutterstock. Insert it into your document .
I need to use only the upper part of this image, let’s take a look at how to limit the visibility of the image with the help of standard tools of Adobe Illustrator.
Step 3
First, resize the image so that its width corresponds to the size of the artboard (in my case it is 960px). You can set the exact size using the Control panel or the Transform panel.
Now create a rectangle, the size of which corresponds to the size of the slider.
Select the image and the rectangle, then go to or use shortcuts. As you can see, extra pixels of the images have not been removed but just hidden using the Clipping Mask.
Step 4
This image has too high a resolution (375ppi) for the web.
Extra pixels and high resolution, of course, increase the size of the file and eventually affect the page loading speed. To reduce the resolution, go to , then set the Screen Resolution (72ppi). This action will reduce the resolution but extra pixels will remain. They can be white or transparent depending on which option you choose for the background.
Step 5
I think it’s time to get to know the Rasterino features that will completely simplify this workflow. Open its panel ( panel). Now, to remove extra white or transparent areas we just need to press the Trim Image, then choose the command options in the dialog box and click on OK.
By the way, it’s not just the rasterizing of the Clipping Mask group that leads to these extra pixels. Rasterizing of any bitmap effects and application of the Expand Appearance command to bitmap effects will lead to the formation of empty white or transparent areas. Now you can easily remove unnecessary information with the help of Rasterino’s Trim Image function. Before using the Trim Image function, the image should be embedded in the current document. This function can be applied to multiple images at the same time.
Step 6
When using Rasterino in your design you will no longer need to use the Clipping Mask to hide parts of the image. You can simply remove the unwanted part of the image using the Crop Image Tool. Let’s see how this is done: Once we put the image in the current document, press the Embed button in the Control panel.
Take the Crop Image Tool, which is in the same group as the Eraser Tool in the Tools panel.
Move the handles of the appeared bounding box to select the cropping area. Now simply click on the tick icon in the annotation system or press on the Return / Enter key.
As you can see the image was cropped directly in Adobe Illustrator.
An alternative method of image cropping with the help of Rasterino is using the Crop Image button in the Rasterino panel. After you press this button a dialog box opens in which you can key in the Absolute size or Reduce size of the cropping area.
Step 7
Often the images we work with need to be edited or added with effects. Rasterino gives us the ability to edit the embedded image, opening it directly in Photoshop, as a temporary file. To do so, select the image and click on the Edit Image button in the Rasterino panel.
Now you can edit the image as you want. For example, I used the Mosaic filter () to the edges of the image.
Save the file in Photoshop , then go back to Illustrator and click on the Update Image button in the Rasterino panel.
As you can see, all the changes are updated automatically.
Step 8
With the help of Rasterino we can re-link embedded Images. To do so, select one or more images, then click on the Link Image button in the Rasterino panel.
In the open dialog box we can rename the image and change location. The image is saved in PSD format. Here we can also find the Image Information such as Color Mode, Image Size, Resolution and the presence of Alpha Channel.
When working with multiple images, use the Next button to move to the next image, the Skip button to cancel the re-link of the current image and Link All button to re-link all the selected images.
Step 9
If you import an image (especially TIFF and PSD) into Adobe Illustrator it can contain a strange resolution which would needs correcting. Now you can change the resolution of the image by entering the desired value in a numeric field in the Rasterino panel, or by choosing one of the standard values from the drop-down menu. This feature works with both Linked and Embedded images.
I hope you are convinced that Rasterino gives full control over the Linked and Embedded images directly in Adobe Illustrator! You can also watch all the Rasterino HD-ready movies for more information about the plug-in and don’t forget to download the 14 day trial version!
Download the artwork
Click here for Illustrator CS4 and above…
The post How to use Rasterino and Illustrator in web design appeared first on Astute Graphics.
