|
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 (File > Place …).
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 Object > Clipping Mask > Make or use Cmd / Ctrl + 7 shortcuts. As you can see, extra pixels of the images have not been removed but just hidden using the Clipping Mask.
You can read full version of this tutorial on AstuteGraphics.com
| 
