Chunky category headers

I have decided to have chunky ‘stamp’ effect category headers on the site.  Here are some initial sketches for what I planned to create:


I found a font that would fit the bill perfectly at – it’s called “Press Feeling Eroded”.

In photoshop I composed a header for each category using this new font.  Here is an example:


I have added a green background to help when composing and editing the images, but I remove this when being saved for web as the background is to be transparent on the web-page allowing the green background of the site to show through.

Here one of the category headers in situ:


I decided to see if I could optimize the file size of these category headers by inputting the headers directly into HTML, positioning as required using transform etc as separate divs within a containing div, and have the font imported to the site via font-face tool.  However, before I even got to experimenting with positioning, I realised that the font file that the browser would have to load was very big (1.21MB) and was causing a delay even when opening locally – this would be even worse when online.  I did some research into the feasibility of have the font file only containing the specific characters that I require to get the size down, but it the end decided to just stick with PNG files.  For some reason, loading the fonts straight into the browser also lost a considerable amount of clarity, which is strange:




Banner creation

This evening, I used the Youtube tutorial to create a banner to tag onto the aeroplane which will move across the screen from left to right.

Here is my banner (not quite finished, as it needs a Red Star before the text):



I created this little aeroplane in Illustrator during the lesson a couple of weeks ago:


I put the two images together in photoshop in a wide canvas:


I now just need to add a connecting rope, then add to the site with a transform translatex function.

CSS3 border-image : My new best friend

I have been playing around with various techniques for getting a wooden effect border around my main container on the site.  I was conscious that I didn’t want to use a big full length image that the viewer would have to download.  After some google research I found out that there is an intriguing CSS3 function called border-image which will create a border from, well – an image!

First of all I created a section of wood using the Illustrator techniques learned from Youtube (see previous post).  Here are my results:

With knots (using distort-transform>roughen for knots):


Without knots: (which will be used for container border on site):


This I lightened and reduced down to a small image that would be repeated on the page to create a border:


This small image will only be called by the browser once and will be repeated to the length of the page to create a border around the .container using border-image:

border-left:40px solid transparent;
border-right:40px solid transparent;
-webkit-border-image:url(images/wood_border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/wood_border.png) 30 30 round; /* Opera */
border-image:url(images/wood_border.png) 30 30 round;

Another version of this small wood image to be used for the background body:


So here is the latest look of the page so far…..




Illustrator techniques

New techniques learnt from the Youtube tutorial on creating a wood effect (

  • Add new colours to colour swatch
  • Colours in swatch can be dragged to gradient stops
  • Add an additonal ‘stop’ to gradient bar – dark either end, light in middle for 3D rounded effect
  • For wood effect: Effects Gallery > Texture > Grain > Horizontal (or Vertical) – note, this created a rasterized effect.
  • To create a random shape (good for knots in wood etc): Effect > Distort & Transform > Roughen
  • Recolor Artwork tool (on toolbar above main content) – change color properties of the selection
  • Opacity tool (on toolbar above main content) – add opacity to selected element

Layered background approach abandoned

I spent a few hours this afternoon creating separate Divs for each of the layered background elements, each with a different z-index assigned, and could not find a way to have the sun appear in front of the sky but behind the hills if the hills and sky were both set as background images.  I liked the idea of having the hills as a background image so that I could easily repeat them on the y-axis, but in the end decided that I would have to create an image the length of the containing div (1300px).


Whilst copying these Vector images into Photoshop for use on the web page, I learned that the files needed to be saved as PNG-24 format.  PNG-8 did show the transparency OK, but leaves a white pixelated border around the image,

Once I had done this, I was able to have the sun rise up from behind the hills, and some clouds that move slowly from right to left.

I have one cloud image which I use a few times varying the position, width, height and speed.  I’d be interested to know if the browser only needs to call the image from the server once (and is therefore a more efficient way of displaying various clouds as opposed to calling three seperate clouds of varying sizes).

While on the subject of creating a site that is as ‘size-efficient’ as possible, I have now realized that I do not need to have an image for the sky, I can just use a background:linear gradient on the container div instead.

Next up – to create a wooden frame for the site.  At this stage I have no idea how I will achieve this or whether it will look effective.  I’ll start by checking out some Youtube tutorials on creating a wood effect on Illustrator.

Layered Background header

Now to create the layered background header.

Initially I created all of the elements of header as separate layers:


The 2 images for bg_hills_back look identical, but one is the full height of the header image, and the other is only the height of the element.  I wanted to see if an increase in the empty transparent area created a bigger file, as it would make positioning much easier if all layers were identically sized.  I found that it did indeed slightly increase the file size (4.02kb to 4.76kb) so I decided to keep the size of the layers as the size of the image they each contain and positon them accordingly.

When I started to compose the montage in Dreamweaver I soon realise that my plan as it stood was flawed.  It was all very well creating individual layers, but I would never be able to place the sun behind a background-image.

My next plan is to create a single flat layer for the background, but position an additional hill over the area where the sun rises from.  My concern is that this may be tricky to position to accommodate all screen sizes.

First I brought the non-layered into the header of the site.  I noticed that the hills were still not lining up properly so went back to the illustrator image to correct.  At fist, I added grids to the background which I initially though was really useful for zooming in on and lining up left > right precisely, then I realised that by recording the y-axis point that the left hill transects the border, I can use the Direct Selection Tool on the anchor point on the right hand side hill > border transect, and punch in the measurement to the y-position box at the top – it should now be pixel-perfect!




Creating a header from the Illustrator image

Having transferred the Vector landscape image to Photoshop, and used as an image on a prototype webpage, I noticed that an adjustment was required to allw the image to be seamless when repeated on the x-axis:



I need to ensure that the hills meet the Y axis at exactly the same level left and right.  I did this by using the “Convert Anchor Point” tool: