Illustrator is an awesome software app and powerful. It has taken me several times to understand it even after I have worked in Photoshop. So, I thought once I figured something out I'd share it because I've heard from students they'd love to learn how to make a logo in Illustrator. This is a step by step guide. This is how I make the logos for my website in Adobe Illustrator and at the end is an additional helpful tip on how make a favicon from the same logo. If you know easier ways then share in the comments below. We'd love to know.
-plenty of and heavy enough white paper that can support oil or watercolor paint
-a medium sized round brush so the lines are thick enough to digitize visibly
-daylight lighting outside is best for photographing the signature
-small amount of Gamsol/mineral spirits/turp for oil or water for acrylic and watercolor
-a dime sized dollop of black or very dark paint on a palette
-Adobe Illustrator, “AI” (a free 7 day trial is well, free! Otherwise it is $20 a month for a Creative Cloud "CC" subscription. There is also Inkscape that create vector based graphics and is free)
-a desktop or a laptop computer
-a mobile phone with a camera (and blue tooth, google docs or email to transfer your file to your computer)
-a website and domain (I use Squarespace and have additional instructions on how to upload to Squarespace at the end)
How to Make a Logo in Adobe Illustrator and Upload it to Squarespace:
- Make a folder (on a desktop or laptop an easy place to see it while working) to store all of your logo files in it
- Dilute the paint and practice writing your signature onto the white paper until you have a name that is attractive and with thick enough lines to be clearly visible so readers can read it. Leave plenty of white space around your signature and work on clean paper with no to few drippings around the signature.
3. When you’re ready take a picture of your signature using quality daylight (lighting 5000k bulbs is great but not necessary, go outside, just don’t use poor quality yellow indoor lighting. It will probably work okay with poor lighting but its not ideal).
4. Transfer your phone pics to your computer desktop or laptop and put them into your logo folder. Email, bluetooth air drop or google docs or any method works.
5. On the desktop or laptop, preview the picture of the signature by opening the photos s to double check their quality (white paper should look white and not dark). Look for enough contrast against the dark letters. Start over if the lighting was much too dark. Close the pics.
6. Download free 7 day trial version of AI or if you already have it, open Adobe illustrator and go to File, Open to find your logo photo you just previewed.
7. Save your photo from its current .jpeg file status to an Adobe Illustrator ai file: go to File and “save as” and save into the same folder.
8. It will look too large and that's okay. Go to the bottom right corner and choose to view it at 25% or until you can see all the letters in the signature.
9. Next choose the “image trace” at the top center and select “black and white logo”
10. Then click on “expand” and the signature will be outlined in blue. The full signature is now selected.
11. Go to Select at the top and choose Inverse. Select is to the right of File, Edit... and before Help.
12. In the tools area choose, click on the Magic Wand (click once) tool.
13. Click on a letter in the signature. The letters turned blue and are outlined, selected. Its possible only a few letters were selected and you may need to select each letter.
14. Go to Edit at the top and then choose copy.
15. Go to File, New. Choose a new document that is the 800x600 pixels in landscape dimensions made for web, with RGB color mode. Give the file a new name such as “NameLogo”. Next step 16, paste the signature into a new Adobe Illustrator file by opening a new file.
16. Go to Edit and Paste name into the new ai file. FYI, when you paste it, it will be so large you can't see the whole thing and this is okay.
17. Need to scale it down because it will look large. Go to Object, choose transform and then scale. Next choose around 37% to scale it down between 40 and 30%. You can always undo (edit, undo) your last scaling and scale again.
18. Next go to Select and choose Deselect
19. Save the new AI file to the same folder and click “ok”
20. Next is to export this logo and change it into a transparent “.png’ file. Go to File, Export and “save for web” and check the settings: choose “PNG-24”. PNG makes a transparent logo which is great so you can choose the background colors of each website page separately depending on whether its a blog or a regular page or if you want to make additional products from it such as business cards.
21. I use Squarespace and each template is different with differing requirements but it is not that big of a deal. Here is an example, I used pixels dimensions of 800x600 for a logo using the Hayden template. Create logo that can be used time and again for different projects such as business cards, stationery or flyers. *Squarespace suggests logos that are between 1500 and 2500 in pixel dimensions and says larger dimensions are better than smaller. However always consider the bigger factors such as loading speed and image quality. Keep the file size to less than 500KB and 60MB resolution. Also make sure it is in RGB color mode and has sRGB color profile which Illustrator does perfectly.
This is a transparent .png-24 logo while exporting it from AI.
22. Next click “Save” and change the file name… name_logo
23. Let’s hide Illustrator momentarily to check out the file. Go to “Illustrator CC” and choose “hide” and go to your folder on the desktop to check the file size, etc.. Mine is 13KB and yay, its a .png
24. Upload the file to your website to check out how it looks, loads and view it on multiple devices from the desktop to a phone and in different browsers.
25. I use Squarespace and for Squarespace users you may upload it by logging into the backend of your site and going to Design and choosing Logo and Title. Make sure you do have a page title (need it for SEO) and click the circular button “Add a logo”, find and upload by locating your name_logo.png file and opening it. Then Save it. Then see it on the preview mode on the right. Yay!!!
Thank you for reading and I hope you find this helpful. If you have questions feel free to ask in the comment section and I'll follow up.
Tip: Don't Stop Now... Create a Favicon by going back into your AI logo file and select using the magic wand, copy and paste some (or one of the) letters and do the same process exporting to web except create a 100x100 image in pixel dimensions and create a .png-24 file and upload it to Squarespace using the favicon upload which is just under where you uploaded the logo.