Archive

Posts Tagged ‘design’

blog network design updates

July 28th, 2009 Simon Voggeneder No comments

Good evening, dear readers!

On the second day of my endeavour I had to resign to the forgotten knowledge of Adobe Photoshop I had once acquired. I found myself unable to create graphics which were good enough to use them.

State-of-the-art design has a lot of aspects to satisfy, at least for some people. For me, design has a lot to do with the art of simplicity – a reason why I love the wordpress design. Everyone who knows the wordpress administration panel knows that it is very minimalistic yet artistic – I simply love this kind of design.

As for the blog design I decided to go with a simplistic theme – iNove to name it. The default header – however – was not satisfactory. It did not tell anything about the upcoming site’s contents and was therefore of little use (although very good-looking). I then went on to design a new one.

Amongst the things that are fancy these days are glossy buttons and I admit I like them – so I had to find out how to create them. Thankfully, YouTube is overflowing with help on these topics. This tutorial helped me out, finally, to create glossy buttons for my header.

The first attempt, however, was looking quite okay but very off, compared to the general design of the blog theme. Here is it:

The first header attempt for naturaltraining.ishina.infoThe first header attempt for naturaltraining.ishina.info

You will inevitably notice the thick strokes and the bright colors distracting the eye. I liked the glossy effect of the elements but they did not fit together well with the general look of the blog theme – the whole header just seemed very ‘off’. So I trashed the whole effort and started anew – already a few hours invested in researching the right design elements – to assure the right and flexible design, a clean layer design had to be established and took some time to be implemented.

For the new attempt, I sticked to the original colors of the blog’s theme. I pasted the grey borders for the header’s border and went on creating a skeleton for the elements on new layers to be independent of the actual element design. The total number of layers is just below 10, including text layers. I created layers for:

  • the general border
  • the border framework of the colored buttons
  • the button background colors
  • the button background overlay
  • the body background color
  • the body background raster
  • the body pictures’ border framework
  • the body pictures
  • the body pictures’ overlay
  • text blocks

The final result, after some hours of more or less hard work is this:

The header file of the blog naturaltraining.ishina.infoThe header file of the blog naturaltraining.ishina.info

From my perspective, the work paid off. I learned how to created glossy elements in Adobe Photoshop and created a simplistic yet good-looking header file which is easily adaptable for all of my upcoming sub-blogs. See how the “training” shines bright? It is the indicator of which section you are visiting at the moment – in addition to the blog title, which is self-explanatory.

I hope you like the design tweaks – I am looking forward to any kind of commentary to it!

Warm regards

Simon

Click on pen to Use a Highlighter on this page