Find all your DIY electronics in the MakerShed. 3D Printing, Kits, Arduino, Raspberry Pi, Books & more!

banner_design_photography.gif
step4b_arrange_menu.jpg
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!


step1_new_doc.jpg
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.
step2_draw_some_shapes.jpg
Step 2: Use the tablet set to the brush tool to draw some shapes. Let your inner artist flow, go crazy and have fun!
step3a_adjust_fills_and_strokes.jpg
step3b_control_windows.jpg
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.
step4a_draw_background_rectangle.jpg
step4b_arrange_menu.jpg
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.
step5a_type.jpg
step5b_done_with_layout.jpg
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!
step6_save.jpg
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.
step7_import.jpg
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.
step8_save_jpeg.jpg
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!


Related

Comments

  1. planetjune says:

    To speed up the process (and cut out the PDF and Photoshop step), you can go to ‘File’ > ‘Save for Web and Devices’ and save your banner as a high quality JPG or PNG directly from Illustrator.
    (I believe this function is only available in Illustrator versions CS3 or later.)

  2. Artndzne says:

    Just finished walking through the steps. Learning to do stuff in Illustrator has been on my to do list for quite some time. Your tutorial was perfect, I had no trouble following along. Now I have the confidence to learn more. Thanks!

  3. aminascats says:

    I don’t have Photoshop so after I went to the trouble of failing to download the Photoshop trial (which only comes in a Windows version- I have a Mac), then downloading Gimp and completely redoing my banner, I saw your comment, tried it out and it solved all my problems! I’m just starting up on Etsy and the banner issue was driving me crazyy. Great all-around post!
    Check out my banner: http://www.aminascats.etsy.com

  4. Sandra V. says:

    May be this site will be helpful for you: etsy banner generator. It’s fast and easy! And there is possibility to order a custom banner.

In the Maker Shed