[gss-content-box color=”red”]
Article License. | Level: Medium | Category: Web Design[/gss-content-box]
One, quick way to customize any standard WordPress site is to apply a customized header image. Depending on the WordPress theme capabilities, usually there is an option to set up a custom header image directly from the WordPress admin interface. The size of the header differs from one theme to another.
I will take as an example 3 standard well-known WordPress themes, to show you how can you quickly setup a header image with the help of Inkscape, a vector graphic application.
1rst Theme – Twenty Fourteen
For Twenty Fourteen theme we can find the exact recommended size for the header by going to Appearance -> Header -> Custom Header Page.
Twenty Fourteen allows for a header image of 1260 pixels in width and 240 pixels in height.
We start Inkscape with an empty document and we need to change the size of the document; we do this by accesing from the main menu – File -> Document Properties and fill in the size of the image in the respective section.
Next step – we create an rectangle with the same size as the main document; we align it against the main page and we remove the stroke on it.
1. Create the rectangle
2. Remove the stroke
3. Align against the page
At this stage we just need to start the creative process and implement an idea for the header; it can be a flat color, a simple gradient or we can use an existing image and cut out a part of it to match the size of our header.
I choose the latter – so using an existing image and cut-out a part of it that would match the header. Here is how I have done it.
I have standard stock images that I bought – e.g. blurred images, gradients, people, nature etc.
I choose one and bring it in the Inkscape document. Next I bring the rectangle on top of the image by selecting the right order option.
After that I move the rectangle in place and select what area I want to choose from the image; in order to do that I select both the image and the rectangle and go to the main menu – Object -> Clip -> Set.
The final rectangle will reflect only the portion of the image that we initially wanted.
Next I want to add our graphical logo on the header. I am using a black version of it and I am using the blur & opacity function to change its appearance and integrate it in the final header image.I am also adding the name of our website to the header.
Here is the final output of the header image the way I see it for the Twenty Fourteen theme.
Here is the final result in WordPress.
2nd Theme – Twenty Thirteen
Next WordPress theme, up for creating a custom header is the Twenty Thirteen WordPress theme.
The recommended size is 1600 pixels by 230 pixels.
By replicating the steps described for Twenty Fourteen we get the following result:
Final result in WordPress.
3rd Theme – Twenty Twelve
Finally the last theme is Twenty Twelve. We apply same steps but this time for a recommended header size of 960 pixels with 250 pixels.
Final result in WordPress.
Leave a Reply