Also, make ‘rectangle 1’ layer invisible by clicking the little eye icon to its left.Ģ6. Under Layers panel, right click the background layer and delete it. Do this for all four corners and hit enter. Hold one corner of the rectangle and make it coincide with one corner of the ipad’s screen. Again, open edit menu > transform > select ‘distort’.Ģ4. Then, go to edit menu > choose ‘Free transform’. Under Layers panel located at right side, select ‘Rectabgle 1’, right click it and choose ‘convert to smart object’.Ģ3. Inside this, put W=1024px and H=768px and make sure the chain icon is not selected.Ģ1. Select rectangle tool and create a rectangle of any size inside the canvas (don’t worry about its fill color). Also, if you can’t find libraries panel (or any other panel), just go to Window menu > select Libraries.Ģ0. To switch between zoom and selection tools, hit ‘Z’ and ‘V’ keys on your keyboard. NOTE: You might want to use the zoom tool. Hold shift key and increase its size by dragging the corners and adjust it inside the canvas as shown below. From Libraries panel (located at right hand side), select ipad mini mockup that we downloaded and drag it onto the canvas.ġ9. Put the name as ‘ecommerce_design’, W=619px and H=310px.ġ8. Then, inside the ‘Opacity’ field (located at the top), put 87% and hit enter.ġ6. Click, hold and drag the middle gradient slider to extreme left.ġ5. With the rectangle still selected, go to gradient tab located at right hand side of the application window. Select earthtone 30 as indicated in the screenshot below and close this panel.ġ4. In this list, go to ‘Gradients’ and choose ‘Earthtones’.ġ3. With this rectangle selected, go to fill drop-down, select swatch libraries menu located at its bottom left corner. Then, drag this rectangle onto the placed image.ġ2. Create a rectangle and transform it to W=1400, H=750px. Select rectangle tool from the tool box located at the left hand side of application window. TIP: Hit ‘Z’ on your keyboard, hold alt key and click on the canvas a couple times to zoom out a little so that everything is visible at once.ġ1. Click on the canvas to place it and adjust it inside the canvas. Go to File > Place and browse for the image that we downloaded from. Now, create a new document of size 1400 x 750 pixels and name it as header_image. After that, optimize the down arrow icon (color: white, document W= 30px, H=20px) and save it for web as PNG-24.ĩ. Now, you have 10 icons – 5 grey and 5 white colored.Ĩ. To do this, select the icon, go to Fill drop-down located at top left underneath the application menu, select white color and save for web. Similarly, optimize these five icons for header image. NOTE: We’ve chosen png format because they have great transparency, comparatively lower size and are best for icons and vectors.ħ. Repeat steps 2 to 5 for twitter, google plus, LinkedIn and Behance icons and save them for web. Also, save the illustrator file (Ctrl+S)Ħ. Click save and save it at desired location. Choose PNG-24 from the drop-down list located at top right. Go to File > choose ‘save for web’ (Alt+Shift+Ctrl+S). Press Ctrl+V to paste the facebook icon and align it properly.ĥ. Make sure that pixels is selected from the units drop-down list. In this new document dialogue box, put ‘static_facebook_icon’ under Name field, W=20 and H=20. Then, go to transform panel located at the top and put W=19.5, H=19.5 and hit enter.ģ. Click outside the canvas and select the facebook icon again. Select the facebook icon (square version) and press Ctrl+Shift+G to ungroup these icons.Ģ. Open social icons ‘eps’ file in illustrator. STEP #1: HOW TO OPTIMIZE GRAPHICS FOR WEB IN ADOBE ILLUSTRATOR:ġ. They’ll automatically be added to your Photoshop library. Open creative cloud desktop application and download iPhone and iPad mini mockups as shown below.Go to and download this iMac 27” screen vector which will be used for displaying ‘website design’ project.Logos used in this tutorial can be downloaded here (hyperlink – ‘assets.rar’ file is attached with the email).Go to and and download social media icon pack and down arrow icon.Put this size in custom size boxes and download it. Its dimensions must be 1400 x 750 pixels. Go to and download this image for the header.However, you can still follow along without these. For proper understanding and creating exactly what’s shown in this tutorial, you’ll need to download certain assets from various free resources.
0 Comments
Leave a Reply. |