Evomind

Design si Dezvoltare Web cu GNU Linux

  • Linux
    • Elementary OS
    • Manjaro OS
  • Web Development
    • AngularJS
    • PHP & MySQL
    • XAMPP
    • Editoare Web
      • Bluefish
      • Sublime Text 2
  • Grafica & DTP
    • Inkscape
    • Gimp
    • Agave
    • Scribus
  • Resurse
  • Contact
You are here: Home / Grafica & DTP / Inkscape / How to create a custom Wordpress header image with Inkscape

How to create a custom WordPress header image with Inkscape

18/06/2014 by razvan Leave a Comment

featured-image-web-design

[gss-content-box color=”red”]88x31Article 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

2014-theme

For Twenty Fourteen theme we can find the exact recommended size for the header by going to Appearance -> Header -> Custom Header Page.

2014-header-settings-wordpress

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.

2014-document-properties-inkscape

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

2014-rectangle-inkscape-size

2. Remove the stroke

2014-rectangle-inkscape-remove-stroke

3. Align against the page

2014-rectangle-inkscap-align-to-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.

2014-image-stock

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.

2014-rectangle-inkscape-stock-image2

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.

2014-rectangle-inkscape-final-composition

Here is the final output of the header image the way I see it for the Twenty Fourteen theme.

2014-header-final-export

Here is the final result in WordPress.

2014-header-final

2nd Theme – Twenty Thirteen

2013-theme

Next WordPress theme, up for creating a custom header is the Twenty Thirteen WordPress theme.

The recommended size is 1600 pixels by 230 pixels.

2013-header-size

By replicating the steps described for Twenty Fourteen we get the following result:

2013-header-final-result

Final result in WordPress.

2013-header-final

3rd Theme – Twenty Twelve

2012-theme

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.

2012-header-size-wordpress

2012-header-final-result

Final result in WordPress.

2012-header-final

Filed Under: Inkscape, Web Design

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2018 · Evomind · Marca Inregistrata · Genesis Framework