Sometimes crafting is just the beginning. The urge to create is the spark, then comes the making of objects- lots and lots of crafty objects. For many, the natural next step is sharing on the internet. Yet, for those inclined to knit, sew, or sculpt, diving into the world of web design can be intimidating. Luckily there are powerful tools that even a novice can use to translate their creative vision into the brightly lit pixels on a computer monitor.
I used my Wacom Tablet and Adobe Illustrator to create an Etsy banner, and you can too! These steps can easily apply to any graphic you’d like to make for the web, just plug in your own dimensions and you are good to go. Oh, and as soon as you are done, I’d say, try to get off Etsy and get back to work!
Step 1: Open illustrator, make a new document and give it a name. Set the units to pixels, 760 wide by 100 high, RGB color mode, and 72 ppi. These dimensions are for Etsy specifically, but you can change them to whatever dimensions you want to create.
Step 2: Use the tablet set to the brush tool to draw some shapes. Let your inner artist flow, go crazy and have fun!
Step 3: Select each shape with the selection tool (arrow) and use the color and stroke window to adjust the color and outline of the art you drew. If you can’t find a control window, go to the window menu, and select the control window from the list.
Step 4: Select the rectangle tool and then draw a rectangle that completely covers the artboard (the black line that represents the edge of the document). This will be the background of the banner. Adjust the color as you did with the doodles. After it looks the the way you like, we’ve got to get it out of the way, and into the background. With the rectangle selected, go to Object > Arrange > Send to Back. This will put the rectangle behind all of your doodles. You can use these commands to move your doodles up and down too, to stack them on top of each other as you see fit.
But to keep the background from getting in the way while you are arranging your doodles, you’ll want to lock the rectangle. With the object selected, go to Object > Lock > Selection. This will make the rectangle un-selectable, so that as you grab your other artwork and move it around, you won’t accidentally move the rectangle in the process. If you want to readjust the rectangle later, you can go to the same menu and select Unlock All.
Step 5: Use the selection tool to drag your doodles around and arrange them as you like, leaving room for your text. Once you are ready, select the type tool, and click on the document where you want you text to go. Type at the blinking cursor, and when you are done, click on the selection tool to exit type mode. Now you can select your font from the Type control window, and also adjust the point size. Adjust the color of your text object in the color window just like your doodles. Keep adjusting your doodles, text and background until they are perfect, and then you’re done with your layout!
Step 6: Now save the document. Select Save As from the file menu, and save the document as you normally would; the only critical detail here is that you select “Create PDF Compatible File” in the optionmenu while saving. This will make the file ready for Photoshop.
Step 7: Now we’ll open the pdf compatible illustrator file (or basic pdf) in Photoshop. Select your file in the Open file dialog within Photoshop, and you will get the Import PDF window. Adjust the settings here to match the example. The important thing here is that the crop is set to “Media Box”, resolution is 72 pixels/inch, and that the width and height in pixels matches your target dimensions. Hit Ok and Photoshop will create a perfect bitmap image which is cropped and sized perfectly. This ensures that your banner won’t be rejected or distorted for being the wrong dimensions or proportions.
Step 8: Now just save the image as a jpeg, like you normally would. you may need to adjust the quality setting if the hosting service has a limit on file size. Otherwise set it to the highest quality for the best image. Voila!
ADVERTISEMENT
