Tag Archives: advertising

Website Production – Needle Exchange

Standard

My prototype website, “Needle Exchange” is complete.

 

HOME

My Home Page has links to YouTube videos. I wanted to put the videos on the home page as this is unusual and it creates a lively, dynamic site right from the first landing.

My navigation buttons are at the bottom and I spent a long time making them animate nicely when pressed.

The page also has three blocks at the top, which do not currently link anywhere, but do have the potential to link to other parts of the site, as it grown.

I used cheeky phrases, coupled with cute pastel colouring to provide interest and irony.

 

Alternative Knitting Resource How To Knit

PATTERNS

The next page I created is the pattern page.

I needed to produce an anchor and back to top links, so I was forced to set out the page differently to how I would prefer.

I wanted to make the section boxes on the patterns page link to new pages, each featuring patterns for that section, but this would not provide me with the need for an anchor link and back to top link, so I put everything on the same page, floated the navigation at the bottom of the page (which I do not like) and back to top links at each section.

As a result, the page does not look as I would prefer it, but it does meet the brief set in the project.

patterns1 patterns3 patterns2

At the top. I made a slider showing books. These link to Amazon.

 

CONTACT

The final page I created is the contact page.

This is a working contact page, which will send straight to my email. I have added an option to attach a file, so that users could submit content for the page.

I realize there are security issues with this, but I have not at this point addressed them.

 

Submit Alternative Knitting Patterns Comment and Contact

 

I have added meta tags to the page, describing the content and created a favicon using online software:

favicon

 

There is room to expand the site to include a “forum” and “projects” page, which I will do with the next project.

Advertisements

Water Project – Banner Ads

Standard

Banner Ads

As part of my project “Water: The Source of Life” I have created two banner ads for the website.

For the first, I was supplied with the text and the dimensions.

I made a gradient background, added the text and logo and added drop shadow around the text to give depth and texture. I think it gives the impression of clouds, although this was not my intention.

The second banner came straight from my imagination:

I was given the dimensions and used a photograph of a water droplet as the background. I created the text and centred it all on the page. The text, read downwards, is intended to mirror the drop of water.

In both banner ads, I made a “call to action” button. Although the whole ad would probably be ‘live’ (ie: you click anywhere on it and it takes you to the link,) it is psychologically inticing to press something that looks like a 3D button. We instinctively are drawn to such objects, so it is a good idea to add one, to let the viewer know that this (the ad)  is something clickable.

To make it, I simply drew a ’rounded rectangle’ with the draw tool, gave it a slight drop shadow and bevel, then added text on top, which I also gave a slight shadow, to make it all stand out a bit.

I am particularly pleased with my Saving Water ad, but I prefer the button on the Blue Planet ad.

 

Photo Reference:

Water Droplet

 

Photoshop CS6 – Adding Texture or Image to Text

Standard

Texturizing Text

It’s easy in CS6 to add a texture or image to text. It used to be a rather complicated process is former versions but those nice people at Adobe have simplified the process for those of us who like our interesting text.

Here’s what to do in easy steps.

1) Open a Photoshop document and use the text tool to write your text. Choose a chunky font so that the image/texture will show up well.

2) Choose your texture and place this on top of your text.

3) Go to the Layers panel and hover the mouse between the image and text layers. Hold down the Alt/Opt key.

4) An angled arrow will appear (not like the one in the picture – I’m just showing where it will be.) This is when you click… and presto! The image and text meld together!

You can move the image around to get it just right.

The layers pallette looks like this:

And there you have it – no complicated masking etc. Remember to hold the Alt/opt key down though, or it will not work!