Putting our typography onto the website

When putting the typography onto our website we had encountered some problems recently, because we hadn't been able to save the text with a transparent background correctly.

First of all, I wanted to get to the bottom of our saving problem. I opened up the file, selected it, and the background was transparent. However the file was too big so I began by cropping it.

Here I de-selected the text, and decided to crop the image so it was just a line of text.

Here you can see I have cropped the text, so I then went to 'Save As..' and saved the file as a PNG file so that the background was transparent. I had no problems with this and then went onto putting it onto the website.

Because of the problems we had encountered last week, I wanted to check that we weren't placing the image on our website wrong, so I did a test by coding the image to be displayed. This worked, and I was able to bring up the image and it was successful because it had the transparent background. However, at this point I encountered another problem, the typography was black and therefore wouldn't show up on our website background.

In order to change the colour of the typography, I had to make it again from scratch, because once you have written the text you 'rasterize' it, meaning you can no longer change the font colour. It didn't take me too long and I applied the same effects as before making sure the text was white and the canvas was transparent.

I then cropped the image and here you can see me applying the 'wind' effect to our typography, demonstrating our typography manipulation. I then proceeded to save the image in the same way as before with a transparent background.

After testing placing the image using html code, I could just position the image on using Wix's built in feature,  I resized the tag line so that it would fit and then deleted the old, temporary one and positioned the new one.








For the title, I had a similar issue, because again it had been coloured black. I did a quick test and imported it onto the website, it was transparent but there were issues with the colours, it looked unprofessional and unclear.







I then went back into Photoshop and started work on trying to recolour this. I didn't have time to re start the typography from scratch, so I had to use the 'fill' tool and zoom in to recolour it to white. Before saving I cropped the image and again saved it with a transparent background.

Here you can see as I was positioning it on the website, I deleted the old title and resized the image so that it would fit in place. I think that together it works well and looks professional.








Here you can see the finished website, and on reflection I think that one of our next tasks should be changing the typography of the page font and review fonts.