Creating Blog Post Feature Image Using Inkscape
- Installing Inkscape
- Starting the app
- Draw a rectangular region
- Choose color and gradient
- Add the images
- Add the text
- Add brand
- Export to png image
- The final blog feature image
- Resetting the inkscape
Inkscape is an SVG image editor. We utilize Inkscape to create SVG images and subsequently export them to the PNG format for inclusion in web pages. Let’s begin with generating a feature image for the blog using Inkscape.
Installing Inkscape
To install Inkscape on Debian/Ubuntu-based systems, execute the following command in the terminal:
sudo apt update && sudo apt install inkscape
Starting the app
Launch the Inkscape application from the Applications launcher. In the Quick Setup
tab, you’ll find three fields to configure. I prefer the Dark Canvas, so I’ve changed it to that and saved the configuration. Click on Thanks
in the Supported by You
tab. In the Time to Draw
tab, click the New Document
button to start drawing an SVG image.
Draw a rectangular region
The recommended dimensions for a blog post feature image are 1200x628 pixels. Let’s create a rectangular region with those dimensions. The steps are as follows:
Click on the images to expand the view.
- You’ll find the Width and Height parameters in the Tool Controls Bar. Manually enter the width as 1200 and the height as 628 as shown in the below picture.
- Resize the Canvas page to match the drawing. This ensures that when you save the image, it will have exact dimensions of the rectangle you’ve drawn. You can use the shortcut
Ctrl
+Shift
+R
to do it automatically or follow the below procedure. - Go to File -> Document Preperties… -> Resize page to drawing or selection (Ctrl+Shift+R)
Choose color and gradient
- I’ve chosen the green color, as you can see in the picture below. Let’s apply the Mesh gradient to the rectangle.
- Open the Fill and Stroke panel by pressing the shortcut
Ctrl
+Shift
+F
. Alternatively, you can open the same by clicking on Object -> Fill and Stroke… from the menu.
- As you can see the picture has turned out nicely. I’ve also adjusted the Blur effect to be 10%, as you can see in the bottom right.
Add the images
- Drag the images onto the canvas that you want to add to the feature image. Inkscape works seamlessly with SVG images. I imported ‘inkscape.svg’ onto the canvas, and during import, I selected the option ‘Include SVG Image as editable object(s) in the current file’.
- The image may be difficult to see if it’s small. However, you can adjust the dimensions of the image in the ‘Tool Controls Bar’. Use the ‘Select’ tool (Shortcut
S
) to drag and adjust the image’s position.
Add the text
- Click on the canvas where you want your blog post title to appear. Type the title. Pressing
Ctrl
+A
now selects the whole title. You can change the font properties, such as font type, font size, etc., from the Tool Controls bar. I’ve discovered a few fonts that I believe will look appealing for the titles. Chilanka font, Dyuthi, Liberation Serif, Noto Serif Display and Purisa.
- To move the text to the desired location on the canvas, employ the select tool, click on the title, and then drag it to the desired position.
- Let’s enhance the text now. In Inkscape, fonts have both a ‘Fill’ and ‘Stroke.’ We can change the ‘Fill’ color by clicking on a color (I used 50% grey) from the palette. To modify the ‘Stroke’ color, press and hold the
Shift
key and then click on a color (I used 80% grey). - Additionally, in the ‘Stroke style’ section of the ‘Fill and Stroke’ pane, we can fine-tune the ‘Width’ and ‘Dashes’ for further decoration.
Add brand
- You can also import PNG images onto the canvas, although SVG images are recommended. If you choose to import a PNG image, select Image DPI: as From file and set the Image Rendering Mode to None (auto).
- I have my blog address as a PNG image, which represents my brand. I’ve positioned it in one corner of the canvas.
Export to png image
The final blog feature image
Resetting the inkscape
Navigate to Edit -> Preferences -> System -> Click on Reset Preferences