[gss-content-box color=”red”]Article License | Level: Medium | Category: Web Design[/gss-content-box]
WordPress is the world’s blogging platform and this reflects in its usage but also in the amount of themes available for the platform. It is also an excellent CMS (something that its creators most likely didn’t intend to become) thus making it suitable for large & complex websites. I am using WordPress from both perspectives; today I want to share with you the “blogging perspective” of WordPress. If you are familiar with WordPress, you know that for any blog having featured images has become an important part of any blogging theme. I will show case how I am doing my featured images for my Linux blog with Inkscape & Shutter.
Install Linux, Inkscape & Shutter – 🙂 Inkscape it is a Vector graphic application and Shutter is one of the most advanced screenshot-capturing type applications in the Linux world. You can get them from your distribution repository or if you are using another OS than Linux and want to check out their websites, go here:
Research graphics & brainstorm about the final composition
Another important step is to research and get the graphics that I will use for the image; it is not a fixed thing or something, I am usually taking inspiration from other blogs on the net. Because my Linux blog is about the “art of customizing” Linux, the “featured image” needs to show-case the screenshot of the particular desktop setup that I want to show. It can also contain a title text and a custom background image. I got the final result by testing several versions so this is the best way of getting the result you want.
Reasons for choosing Inkscape over Gimp to do this particular task:
Inkscape makes it easy to work with multiple images in the same time; you don’t need to use layers and you can move the images freely;
Inkscape allows for easier document setup & change on the fly compared with Gimp’s way via layers and stuff;
Inkscape in my tests has a better resize algorithm for pixel images than Gimp it self;
I can use SVG graphics that can be combined easily with pixel graphics by using the grouping function;
I can create compositions very quickly and than have them exported as PNG;
I can save the SVG file with all the files in it and than come back to customize it again very easily;
I just feel more confortable by using the Inkscape interface if I compare the same workflow done via Gimp.
Analyze my WordPress theme
Second step is to analyze your WordPress theme. This means check the “demo” version and see what kind of images are used as “featured” in the blog section. Usually by just looking at the image in the browser you can see what best dimension should be for the “featured image”.
In my case I am using the Genesis Framework with a simple child theme and I know from the framework settings what is the best size of the “featured image”. Off-course I can implement a custom size but this would require a little more advanced WordPress knowledge. The idea is to use what the WordPress theme is offering or in this case what Genesis framework is offering.
So the expected size of the “featured image” in my WordPress theme is 300×300 pixels. I can use a bigger size like 1024×1024 but this doesn’t fit well with my theme and I actually like how it looks with the 300 px size.
Action !! -> Inkscape
Now that I know the size of the image, I can create a new document with Inkscape with the size of 300×300 px and start adding the graphics.
Because this is all about Linux desktop screenshots, I am using 2 graphic elements for my “featured image” – a monitor and a laptop aka “crapbook”. They are both SVG, can be very easily modified/adapted to my preference and I got them from Deviantart. I am always looking for SVG graphics because they can be easily modified by Inkscape as this is it’s native file format.
It is important to note that Inkscape can also open AI or EPS files.
This is particular useful for graphics collections that contain such file types. I got several of them from Mighty Deals and I already used such resources in my projects. But about this stuff in a later post 😉
At this stage I am carefull to check the license of the image and the conditions set by its creator. It is a matter of respect for somebody’s else work.
Ready to go..
Now that I have the image dimensions and the document created in Inkscape, it is time to start Shutter and start taking the screenshots that will be incorporated in the 2 stock graphics.
I will start by grabbing the whole desktop with Shutter and than I will integrate the screenshot in the Inkscape document by using a simple re-sizing.
Also I need to resize the stock graphics to the 300×300 px size, again by using the useful re-sizing feature in Inkscape – CTRL + Left Mouse on the move handles or by using the command
By just dragging and dropping the screenshot from Shutter to Inkscape, I will get a dialog asking me to choose between:
This has an effect on the final SVG file in terms of size but in this case this is not important; I will choose the first option because I want my SVG file to keep all the files – so “Embed image” it is.
By using the re-sizing function both on the stock monitor and on the screenshot I get a perfect integration.
Next add custom background & title text
I will insert my custom background for the “featured image” and I will add the title with a font I chose specifically for this type of graphic.
Adding the custom background is just of matter of dragging & dropping the graphic file on the Inkscape document; by re-sizing it and change its opacity (via Fill and stroke dialog – SHIFT+Ctrl+F) I can choose the best position for my “featured image”.
Finally I can add my title text of choice and apply a drop shadow to the text.
The settings of the Drop Shadow Filter are very easy to change and I can see in real-time the results on the text; my preferences are pretty standard as you can see from the screenshot below.
Export the final image
The last step is to change the opacity for the background image to 100%.
After that I use the Export Bitmap function in Inkscape (Shift+Ctrl+E or File->Export Bitmap) to export the final document as PNG at the desired size.
I am checking to have the Page as an export area because this is the dimension of my WordPress blog “featured image”; add a custom name and choose Export.
This is the final export image from Inkscape:
Final result in WordPress
The final step is to upload the image to my WordPress blog and select it as featured image.
This is the final result in WordPress:
Or by using the laptop stock graphic:
In conclusion from my perspective whenever I want to create a “featured image” for WordPress I am using Inkscape for the reasons explained at the begining of the article; the workflow based on Inkscape is fast, reliable and has good looking outputs 🙂
I hope you will find this post interesting and feel free to come up with your own approach and outputs..