Produce eCommerce sites with genuine style

16 Vector pattern swatch

Two of the dresses’ patterns were created with a vector pattern swatch in Illustrator. First, we drew a square – this is the dimension of the swatch and any design of the pattern should be contained within. Then we drew a wavy pattern for one of them and a polka dot for the other.

17 More swatching

Drag your swatch into the Swatches window. Then select the dress object and apply the swatch by clicking it from the window. To resize the pattern, select the patterned dress, hit S then Enter and resize it in the dialog box with only the Patterns option checked.

18 Shopping cart

Create the shopping-cart icon so the user can understand that the clothing can be purchased right from the website. For the icon, omit unnecessary information and include only the defining elements, as there is not enough room for detail. Draw a simple shopping cart with the Pen tool.

19 Cart sidebar

The shopping-cart section should be secondary to the product section. Create a smaller section for it so the user can see what they’ve bought but not be distracted by it. They should see what they’ve added to their cart and price easily, so the body copy format remains the same.

20 Footer bar

With the Pen tool, draw an organic shape and apply a gradient similar to the banner to be consistent. Add floral elements on top by creating four different flowers. Then using Cmd/Ctrl+Opt/Alt, drag and duplicate the flowers, adjusting, resizing and rotating for variety.

21 Workflow

When managing your project, follow the format ‘clientname_projectname_description_version.app’ and put files of the same application into the same folder, titling it ‘Illustrator’ or ‘Photoshop’. Having separate folders for scans, linked images and roughs makes things simpler.

22 Linked images

In Illustrator, an image can be embedded once imported. But if further revisions are made, it won’t automatically update. For the patterns, we placed but didn’t embed them until the final stage. Thus, they can be automatically updated if we need to revise them outside of Illustrator.

23 Crop Area (in Illustrator)

Crop Area is a handy function. It makes crop marks around the art board and cuts off anything beyond it when the file is exported for JPEG, TIFF, etc. This is great for eliminating unwanted and extra artwork and miscellaneous images bleeding off the page.

Pages: 1 2 3