Introduction: Make the Most of Logodust
While this tutorial is as harmless as they come, computers are delicate, finicky machines and something can always go wrong. I am not responsible for any damage to your computer, work, website or Twitter profile caused by or happening while following this tutorial.
When you start a website or a small business, having a nice logo helps. Logos library Logodust can get you started with that : each week, new designs pop up on this gallery by design group Fairpixels pop up. Where do these designs come from? Quoting Logodust's homepage:
With many unused logo design proposals piling up on our hard drives, we decided to make them available for FREE.
Today, we're going to see how to customize one of these logos with free, open source software and adapt it for your Wordpress website and Twitter profile.
Time: Between 1 and 2 hours, depending on how long you like to fiddle with things
Budget: If you already have a computer and an Internet connection, $0!
The things we'll need
- a (reasonably recent) computer
- an Internet connection
Step 1: Downloading a Logo From Logodust
The first thing to do, of course, is to open website Logodust in your browser at http://www.logodust.com and go through their library of logos to find one you like!
Each of the logos is set up on a different background of different
colors, to suggest a type of product or theme that would be a good fit for it. Once you've found one you like:
- Click on the logo you've chosen: you will be prompted to download a compressed file logo.zip. Confirm the download by clicking OK.
- Find the compressed file where you downloaded it and right click on it to bring up a contextual menu, then choose to extract the contents of this file in an easily accessible folder.
- Open the folder where you extracted the contents: there should be several files in there, inclusing your logo with a filename like free_logo_1.ai.
Now that you have downloaded the logo files on your computer, we're going to set it aside for a moment and get the program you'll need to customize your logo: free, open source vector editing software Inkscape.
Step 2: Downloading and Installing Inkscape
Inkscape is a free, open source alternative vector editing program Adobe Illustrator. It first started in 2003 and has had a happy career since, and you can download the latest version (0.91 at the time of this writing) from http://www.inkscape.org.
Click on the DOWNLOAD tab and choose the version you need depending on your computer, or just click on the link to the latest version of the program when you arrive on the homepage. Just like we did earlier for the compressed archive of your logo, confirm the download and save the installer file in a folder you can easily access.
Once the download is over, find your download and double-click it: the installer will take it from here. It's usually a safe bet to go with the default options suggested and after the installation process is over, you can start Inkscape from your computer's Start menu.
Now that we have the logo we wanted and the software we need to edit it, take a break, you deserve it! Stretch your back, walk around a bit, go warm up or top up that cup of tea or coffee and see you at the next step – where we make this logo your own!
Step 3: Logos, Colors and Shapes in Inkscape
Start Inkscape and open the File menu: in order to bring the logo we downloaded into Inkscape, click on Import and browse to the folder where you extracted your logo. Even if Inkscape has a preference for .svg (initials for Scalable Vector Graphics) files, it can still import Adobe Illustrator's .ai files. After starting the import, Inkscape will open a menu with a few more options for you but for now, we can skip that and just click OK to start working and…It looks very different from the picture on the Logodust gallery!
Don't panic, it makes sense: while Logodust provides you with suggestions to use the free logos, they also provide you with as blank a slate as possible so you can make it yours, which is why the logo looks so different.
Even if you're just discovering Inkscape, there's still at least two easy ways to customize our download into a new logo: change its color, and change its shape.
Changing the general color of the logo is the easiest, so we'll start with that. For that:
- select your logo
- pick a color from the color picker
- and that's it!
I wish I could tell you there is more to it, but the hardest time you're likely to have a harder time picking a color than anything else! I've used that logo for a recent project and changed the color to a shade of blue I've used in other projects, that I really like, and that's close to the blue of my tattoos. You always gotta put a little bit of yourself in a design - even if it's just adapting a pre-made logo!
Changing the shape of the logo is the other way we can customize it for ourselves. You can do this one of two ways: modifying the lines and points that compose the logo by hand (aka the complex way), or using another shape as a « cookie cutter » (aka the easy way – and my favorite). In this example, we're going to turn this square shape into a circle.
- Create a circle with the Circle tool
- Cut and paste your circle on top of your logo, and
- use the sizing tools bar at the top of your Inkscape window to give your circle the right size. You can just type in the values you want - just make sure to click on that little padlock icon to switch it to an open , otherwise you won't be able to give your width and height different values!
- align your circle and logo with each other using the horizontal alignment and vertical alignment tools).
- Make sure both objects are selected – either by dragging the cursor over both of them, or using Shift+Left click one after the other, and
- without de-selecting the objects, open the Object menu, then choose Clip > Set.
If all went well, your square logo is now circle-shaped! I used a circle, but you can basically do this with just about any other shape as long as your “cookie-cutter” is on top of the object you want to alter.
There are many other ways to customize your logo, but this is enough to get us started. Keep fiddling with the logo, try other shapes or colors and once you're happy with it, we're going to put it to work on a Wordpress website and a Twitter profile.
Step 4: On Your Wordpress Blog
Like many bloggers out there, I use Wordpress to power my website but in case you're not familiar with it, let me give you a little bit of context!
Initially released in 2003, Wordpress recently got an in-depth revamp with one of its recent versions, Clifford. Automattic – one of the larger contributors to the Wordpress blogging engine – also runs the Wordpress.com hosting service at https://wordpress.com/, including a free hosting plan: these blogs can be customized with themes, many of which feature a header – the illustration that sets the tone for your website - and now we're going to make a header image using our customized logo. Phew!
Lately I've been using the Argent theme – it's free both for the Wordpress-hosted and self-hosted versions of Wordpress, and you can find at https://wordpress.com/themes/argent/.
We're going to give our header image the recommended size of 2000x380px:
- Use the Rectangle tool to create a rectangle, and once again,
- use the sizing tools bar to give your header image the right size. Just like last time, make sure to click on that little padlock icon is switched open with a click!
- Finally, copy and paste your logo on top of the rectangle you just created, and adjust it in size the way you like.
After a little experimenting on my blog, I set things up so that the logo sits under the title of my website but you might like it differently – whether it's growing entirely out of the header image, or to either side of it. Once you're happy with the result, we're going to select and to export your header background and logo as a whole group in an image format Wordpress can use as a header.
- Shift+click on your logo and the background to select them, then group them;
- open the File menu and choose Export as PNG, or use CTRL+Shift+E to open the Export menu – it'll be on the right side of your Inkscape window.
- Choose the Selection option to export only the group we have selected at the moment.
- Choose a folder for your new header using the Export As... button – make sure the file extension of your file is .png – and…
- Click Export to save your new header!
After this, all you need to do is follow Wordpress.com's tutorial on uploading a Custom Header Image at https://en.support.wordpress.com/custom-header-image/.
Step 5: Using Your Logo on Your Twitter Profile
The Twitter support center page at https://support.twitter.com/articles/317813# tells us there are two graphical elements on a Twitter profile page we can customize using our logo:
- the header photo – the wide picture that decorates our Twitter page. The Twitter support center recommends a size of 1500x500 pixels;
- the profile photo – the picture that represents us on Twitter. The Twitter support center recommends a size of 400x400 pixels.
This is all pretty straightforward: you've seen pretty much all the tools we need for this when we were making the header for our website! This time, we're going to use the profile photo as our example:
- create a 400x400 pixels square using Inkscape's square tool and the sizing toolbar;
- select, cut and paste your logo on top of it;
- align the logo with the square using the alignment tools, and
- finally, group and export the square and logo just like we did for the Wordpress header.
All done! All you need to do now is use your new avatar on Twitter: follow the instructions at https://support.twitter.com/articles/127871 and you'll be set in no time.
Step 6: What Next?
You've already learnt a lot today, but if you want to keep going, here are a few more things you could do:
If you want to learn more about Inkscape and vectors editing in general, the Inkscape development group and the users community have written a large amount of tutorials that'll help you build on what you've seen today at https://inkscape.org/en/learn/tutorials/. The tutorials are listed by theme as well as skill level, and if learning with a video tutorial is more your thing, you can find these at https://inkscape.org/en/learn/videos/.
If you want to learn about advanced Wordpress customization – including customizing navigation menus, text and link colors, there is a detailed documentation about CSS in Wordpress at https://codex.wordpress.org/CSS. It's a little more on the programming side of things, but programming and design often go hand in hand these days so it's definitely worth reading.
If you want to learn about customizing graphics for other social media services, YouTube has a very detailed section on creating or editing channel art to display correctly on smartphones, tablets, computers and even televisions. It's great training with sizes and alignment in Inkscape and it's at https://support.google.com/youtube/answer/2972003?hl=en.
Blogs and Twitter accounts are fine, but how about printing some business cards? If you want to learn more about digital design for print, including resolution, cropping and readability, online printing service Moo has very detailed design guidelines for customers who want to design their own cards at https://support.moo.com/hc/en-gb/sections/200572484-Using-my-own-designs – and you can definitely use Inkscape to design your own!
Step 7: Support Me!
If you liked this guide and want to help me make more, there are several ways you can help!
- Commission me for a Creative Technology or Technical Writing project – http://twc.tommaillioux.net/
- Buy something on my store – http://store.tommaillioux.net
- Follow me on Twitter - https://twitter.com/tomwrcr
- Like my Facebook page - https://www.facebook.com/tomwritesandcreates/
- Follow me on Instructables - https://www.instructables.com/member/Deslivres/