So last time we should have ended up with, a nice sand textured background, and a finished cactus, leaving just the sign posts to do. These are arguably the hardest part of this tutorial, so i have made this as easy and painless as i possibly can.

Open up photoshop, start a new canvas at about 600px in width, and 450px in height. In your colour palette, go for colours similar to these pictured below. The lighter colour is: cebe98, and the darker one being 7f6d3f.

As you can see from the picture, using the marquee tool, make a box shape, and fill it with one of the colours. You may want to start a new layer to do this, much unlike i did on this screen shot.

Next, go filter > render > fibers. Play with the settings and the live preview will show you the effect that this will give – toggle with this for a while until you have the colour and texture that you feel is required. With this layer now starting to look more like wood, using the marquee tool, draw a box to the shape of what the leg should look like.

Copy and paste this onto a new layer. To make the second leg, you can either duplicate the pasted layer, or duplicate when the final leg is complete. To make the leg look 3d and have some depth. Mask an area with the pen tool similar to this:

You will also need to do something similar to the top, much like this:

To make the top of the leg look right, using the circular marquee tool, mask an area relative to the curve, then go into hue/saturation and set the brightness to about 10. The top of the leg needs to look like this:

Once complete, duplicate and we can then go on to the next step. As you may have noticed in my layers, i have hidden the original wood effect box we made. This was because i didn’t want to delete it as i will use it to make the slats in the sign post too.

Using the pen tool, or by drawing free hand with the lasso tool make a selection to achieve the below effect. Make them quite thin, but add in small details like the curves at each end. I made two different slats, then duplicated the layers and toggled with the positioning. As these will be behind our canvas, the depth of detail doesn’t need to be that high, just believable.

So, after duplicating the layers, hopefully you have something like this:

Using the marquee tool again, make a rectangle, and fill it with an almost white colour. As you can see, we are then going to press cmd+t, right click and then select “warp”. Warp the corners, to give the impression that the canvas is being stretched towards to the posts of the signpost.

Then, selecting the pen tool, draw a path similar to the image below. Make sure you have a dark brown colour as your primary colour. Also, the brush needs to be set to around 2px in size, and 100% in harshness.

With the pen tool still selected, right click and select “stroke path” and make sure it is on brush. Then, erase part of the rope as we want to give the impression that the rope is going around the leg. Repeat this process for all 4 corners to get this result.

So we are nearing the end of this tutorial. There are a few more bits we can do however. Firstly, as this material would be stretched, there would be marks on the material to give that impression, so. Either using the pen tool, or lasso tool, mask an area similar to this:

Start a new layer, select quite a dark brown color and make sure your brush is around 25-35px in size, and around 30%-50% in harshness. Draw faintly along the top, and right lines to get this effect:

Also, our canvas could do with some texture. Go filter > texture > texturizer. Then change the texture type to canvas. I have used scaling of 50% and relief of 1px. As you can see it is quite prominent, so it may be work playing with the options, or using a different layer and toggling with the opacity.

So we should be left with this, which you can paste into your desert scene .psd and resize to ensure it is in proportion with other things in your footer.

The final part of this tutorial will cover the text effects, as well as the smaller signpost, pictured on the final image at the start of the tutorial.

However there are also interesting effects which can be achieved by combining real text and images. This gives you the ability to create great looking text, whilst also maintaing the qualities bought to you by not using images.

Today I am going to show you a CSS3 image mask technique which allows you to overlay text with an image you create. When done well it really brings text to life and can be extremely eye catching.

Click here to view the demo.

The first step is to set up your new HTML5 document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Tristar Web Design London - CSS3 Text</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<h1>Tristar Web Design</h1>
</header>
</body>
</html>

This is an extremely basic page as I’m sure you’re aware and will simply display the text; Tristar Web Design‘ on the page. Now to add some CSS to the file referenced in the head;

body {
        background-color: #29aade;
        color: #fff;
        font: 2em sans-serif;
        text-align: center;
}

header {
        margin: 15% auto;
        width: 765px;
}

Here we are just setting the basic styles and giving the document some colours. Just to spice it up a little we are going to give the H1 a nice font and add a few extra styles to make it more interesting.

Add this to the head to reference the new font;

<link href='http://fonts.googleapis.com/css?family=Magra:700' rel='stylesheet' type='text/css'>

And then add in some new styles to the CSS for your H1;

h1 {
		font-family: 'Magra', sans-serif;
		font-size: 3em;
		border: 40px solid #fff;
		padding: 20px 0;
		border-right: none;
		border-left: none;
}

Adding the Texture

Now for the fun part! Lets make some texture to add to the text. An important point I picked up here from .netmag is that you need to be cautious with the amount of texture you add here, as wherever there is transparency on the text, it will automatically be erased or knocked out as we are using an image mask. Therefore, keep it subtle else you wont be able to read it!

Create a new blank Photoshop document and get out your grunge brushes! Draw some texture onto a new layer until you get an effect you are happy with.

Double click on the layer to get the layer styles popup and on the blending options tab change the ‘Fill Opacity’ to 0% and the ‘Knockout’ to deep.

Now you need to export it for web. Ensure when you do this you save it as a PNG-24 with the transparency option ticked.

Now we need to add the new texture to the CSS. Go back to your styles.css and add the following;

-webkit-mask-image: url(/demo/css3-text/images/texture.png);
-o-mask-image: url(/demo/css3-text/images/texture.png);
-moz-mask-image: url(/demo/css3-text/images/texture.png);
-ms-mask-image: url(/demo/css3-text/images/texture.png);
mask-image: url(/demo/css3-text/images/texture.png);

The great thing about this method is that the image automatically repeats, so if the texture isn’t large enough to cover the whole section of text it will do so by itself.

And there it is, your old plain boring text has now been brought to life through the magic of CSS3!

Click here to view the demo.

Our next task is to start on the scenery into making this look like a realistic scene. Open up photoshop, and a new document at approximately 150px x 150px. It may be beneficial to have a quick look at some cactus’ for inspiration as an idea on how you should edit your drawing. Firstly. Select the Pen Tool (P) and outline a shape as the main part of the cactus. Like so…

After you have outlined your cactus, right click with the Pen Tool still selected, and on the drop down menu, choose make selection and fill, or simply use the fill path selection on the drop down menu. Select a colour on your palette, i went for something around #62d74b. As you can see its fairly basic, so lets add some “arms”.

One you have your filled shape, using the lasso tool, draw an area like this, and pressing CMD + (U) you will see Hue/Saturation pop up. Take the brightness down by around 20 and press enter, or OK.

Selecting the pen tool again, draw something around this sort of shape. At this point you will need to create a new layer for this as we need to add shadowing without affecting other layers.

After you have filled the path, we need to start masking area’s for shading to recreate the effect of sunlight. There are a few ways to do this really. I personally use the lasso tool and draw sections of the arm freehand. You can also do this by using the pen tool.

Firstly, lets decrease an area just under the right arm to create a shadow. Mask an area similar to the below photo. It may be worth hiding the base layer due to the similarity in colour of both layers.

After making your selection, go Select > Modify > Feather, or Shift + F6, and add around 2/3 pixels of feathering. Then, making sue the base layer is selected, go into Hue/Saturation by going Image > Adjustments, or by pressing CMD + (U). Toggle with the brightness to get a nice clean shadow, rather like this:

Repeat on the upper, inner part of the arm but this time increase the brightness to give the impression that the sun is shining on the top of the arm. The next step is to do one of two things. Firstly, you can either duplicate the first arm that we drew (by pressing CMD + (J) and transforming the layer to be the right arm. Alternatively, just use the pen tool again to create the second arm.

So, again. Lasso, or using the Marquee tool make a selection similar to this one, add between 3-8px of feathering, and decrease the hue and saturation to make the shadow. You also will need to make sure that the layer that the arm is on is behind the main part of the cactus.

So although we have our shadow and highlights, we still look a little bit flat. Double click on each layer of both arms, which will bring up Blending Options. Click Bevel & Emboss and toggle with the size to get something similar to below.

Once applied to both layers we have a few little details still to do. It may be beneficial at this time to refer to some pictures of cactus’ to get the idea. So we are going to add some downward white lines. We can do this best by using the pen tool.

Firstly, make sure you have a light green/almost white colour in your palette and make sure your brush is on 1px, and 100% harshness before going any further. Following a similar shape to the outer lines of the main part of the cactus, pen tool a line similar to this, right click and select stroke path, ensuring this is on a new layer as we will need to toggle with opacity later.

Draw between 8-15 lines, making sure they follow the general lines of the cactus. Now obviously they look too bright, but as we made these lines on a new layer, change the opacity to around 20%/25% and they will blend in nicely. Lets add some gentle shadowing. Double click on the layer and select Drop Shadow, i went for these settings;

Repeat this process for the arms, but again remember that these should be relative to the shape of the arm, and give the impression that the arm is curved.

So after adding the lines to the arms, play with the opacity to make sure they blend in without looking to harsh. Finally, we need to add the spikes. The best way to achieve this is to zoom right into your cactus. As we are working quite small, this does not have to be done with the best of accuracy.

So as you can see, with the pen tool, simply draw lines overlapping each other until you get an almost star like shape. Toggle with the opacity to make sure it blends into the cactus, i went for 40%. This may look a little bit untidy, but as you zoom out to 100%, you will see that it does add some minor detail. Duplicate this layer by pressing CMD+(J) and position along the white lines we drew earlier and we should be done.

Finally, and for extra points, we can add a shadow behind the cactus. Like this;

This was done by using the pen tool to mark the area, right click, make selection then adding around 5-10 pixels of feathering. Fill a near layer with a dark colour and toggle with the opacity.

So, zoom out to 100% and you should have something a little like this. As you can see zooming out shows how clear your drawing will be. Add this to your sand.psd that we made in the last tutorial.

If a company can generate a large following on one of these sites they will instantly become more widespread and people will start to notice them. With Twitter people can start a hashtag which can lead to creating a ‘trend’. This could be done to coincide with a product launch or a competition and will instantly generate more business.

For example, the American electronics retailer RadioShack pushed the hashtag ‘#kindofabigdeal’ to coincide with the launch of Verizon Wireless. The idea was that every time someone Tweeted the hashtag one of the Verizon phones set up would vibrate, whoever was responsible for the final Tweet got to keep the phone. This campaign led to over 80,000 mentions of RadioShack’s Twitter feed and instantly spread the base of the country and bought in more custom.

Including a Twitter feed on a website can be a great way of directing traffic from the site towards your social media feed, whilst also encouraging users to engage with the company. Today I am going to outline some great web design examples of Twitter feeds within websites.

Zoltan Hosszu

365PSD

Smashing Magazine

Chris Thurman

Photosheep

Yuna

Komodo Media

Creare Web Templates

All of the above sites are better viewed in their original context and this allows you to see the full site with an implemented Twitter feed. So click on the screenshots and take a look for yourself!

The final outcome will resemble this:

So, in this tutorial I will firstly show you how I achieved the sand dunes. Open up Photoshop and create a new document and make sure you have set the width to 1000 pixels and the height of around 350 pixels.

So firstly, we need to make the shape of our sand dunes, at this point it may be beneficial to look at some images of sand dunes to get some inspiration. As the sand dunes will need to repeat across the bottom of the page, you need to ensure that both sides match up. The easiest way of doing this is by setting a guide line like this:

Anyways, select the Pen Tool (P) and mask out this general shape. To get the curves, you need to click and pull the mouse to the right, or left and you will see the lines of the pen tool bend.

Once you are happy with the shape, right click and choose “make selection”. You will then see the lines turn into a selection, which you then need to choose #ddc997 as your colour, then select the paint bucket tool, or simply press (G) and click in the selection.

Once this stage is complete, to achieve a bit of depth, select the pen tool again and mask a similar shape and make sure the layer in placed behind the layer we have already completed.

The next stage is to create the grainy look to replicate the texture of the sand. This is done quite simply using the noise filter. Click Filter > Noise > Add Noise. Now you could do a bit of experimenting, but these setting are what I have used.

One this is done, add a similar style to your background sand dunes so they both have the same texture, you may want to vary the settings to add a bit more detail. So, now we have our sand dunes we want to make them look more natural. First however, I wasn’t totally happy with the positioning of the second sand dune, so I have moved the layer down by a few pixels. There are two methods that I would use to do this. First one, is by using the Marqee Tool (M) and mask off the top third. Go to Select > Modify > Feather (or Shift + F6) and add around 50 pixels. Open up Hue/Saturation by selecting Image > Adjustments > Hue/Saturation, or simply hold Ctrl + U. Tab down to the brightness and increase by around 20.

Repeat the process at the bottom of the image to give the impression of the sunlight hitting the top of the sand dunes first.

The second way of achieving this would be by double clicking on the layer you wish to adjust in the layers panel, on the bottom left of your screen. This will bring up Blending Options. Click on Gradient Overlay, and change the opacity to around 15-20%.

Excellent. So we’re looking good so far, however it is still looking slightly flat. Start a new layer, and selecting the pen tool again, draw an area that looks similar to this, and as before make this a selection.

Then, selet the brush tool, set a brush diameter of 30px, and a harshness of 0% and make sure its black. Then draw close to the selection, and you’ll see this give an effect of a mound. You may need a few goes to get this spot on, but do so at your own initiative. Once happy with the look, deselect, and toggle with the layers opacity to make it look realistic, kind of like this:

Finally, lets add a bird, it is important to also add a small shadow underneath to give that little more attention to details.

Easiest way to do this is by selecting the circular marquee tool, go Select > Modify > Feather, and go for between 1-3px, then fill a new layer with black. Position and scale until happy which should leave you with something like this:

So, we are done for this part, check back in a week for the next step into making our desert scene footer.

Many landing pages I have featured are for apps or other products, the main aim of these pages is to sell the product to the user, this can be difficult without actually having the ability to use the app itself, therefore it is extremely important to have an effective landing page which both gets the message across, as well as making the product look interesting enough for someone to immediately go and buy it.

Other landing pages are for things preparing to launch, these pages need to attract attention to the site to engage the audience and create some interest. Many of these sites are also requesting email addresses from users. It can be very difficult to get someone to sign up to a service which isn’t ready yet, therefore the landing page needs to excite the user. Some sites also use clever tactics such as giveaways to entice people into signing up.

I have scoured the web and put together a collection of my favourite landing pages, these come from both a web design point of view, but also a business point of view with regards to sites which will work to sell a product or get someone to sign up.

Themezilla

Creare Web Templates

Positionly

Guachy

FTW

Windward

Local Hero

Choicr

Happy Tables

My personal favourite is the Windward app landing page. I love the the usage of a video in the main body background. This is something I have never seen before and I think it fits the theme of the app perfectly. It also has a quick rundown of the features available in the app and a price of the app. Straight away when visiting this site you will know if you are interested and in my opinion this defines a good landing page.

Recently there has been a huge rise in sites offering free resources and some of these have a great selection of fonts. http://losttype.com/ is my personal favourite and as an added bonus all of their fonts are free. You can however pay if you choose.

CSS3 saw the introduction of @font-face and this along with other services such as Google Fonts has made it a whole lot easier to use more interesting fonts within web designs. I personally love to see a site which has created amazing bold headers using real text as opposed to images. This would never have been possible just a couple of years ago.

There are so many examples of great typography on the web and today I am going to outline some of my personal favourites.

Austin East Ciders

255 Creative

Kinetic

Henry Real Estate

Friendly Gents

Tokiolab

La Wine Agency

Austin Beerworks

Moody International

Just Dot

The Dark Interface

Adobe have worked very hard to create a new dark interface for Photoshop. This wasn’t simply a case of changing the background colours as they had to create almost 2000 new icons which worked on both light and dark backgrounds.

The idea of the new darker interface is that it allows you to focus more on the item you are working on as the dark background sharpens the image in the centre.

Of course, if you preferred the previous interface you can change back to a lighter one. There are four to choose from.

Layer Search

Photoshop now gives you the ability to search through the layers on your document. This is a great feature and I am surprised it hasn’t been brought in before. You can search by Kind, Name, Effect, Mode, Attribute, or Colour. This makes large documents with many layers much easier to navigate around. Its also great for web designers who might be working on one PSD with multiple people.

Dotted Edges

This feature is probably my favourite of the new additions. Before it became something of a hassle to create brushes with various dotted lines, especially if you were working from more than one computer as you would have to replicate these brushes on all of them. CS6 has brought in a new feature via ‘stroke options’ which allows you to apply dotted or dashed borders to shapes.

This will really speed up the design process and works great when resizing shapes.

Performance

I personally have been using CS6 for over a week now and have not encountered any issues with slowing down or crashing. I almost certainly would have had a problem with CS5, especially when running multiple programs at the same time which I regularly do.

CS6 seems much quicker and a lot more responsive.

These are just the first few things I have noticed personally, I am also aware of the many other features such as the new blur options and the content aware system which I have yet to try out.

I know that at the moment its only the beta version but to me it seems a whole lot better than CS5 and I personally would upgrade today if it was possible.

The Responsinator is a great little resource site which allows you to enter a URL at the top and then gives you a preview of that site in a number of different formats and screen sizes. They range from a portrait iPhone screen, all the way to a Kindle in landscape.

Its main purpose is to test responsive sites in order to see how users of these different platforms will view your site.

See it here.

Curtain.js

This is an awesome jQuery plugin which allows you to create a website with fixed panels that unroll with a really cool effect, similar to that of a curtain rising, hence the name.

You can navigate through the pages using either your scroll wheel or keyboard. Its also very flexibile and allows you to add extra fixed elements into it.

Best of all its completely free to use and is great for adding a quirky edge to a web design project.

See it here.

Turn.js

Turn.js is very similar to Curtain.js except this time to navigate between the pages there is a really nice page turn effect. It feels extremely realistic and the pages seem to work in exactly the same way a real piece of paper would.

Its lightweight and works off of HTML5. Its also easy to manipulate and completely free to use and would be great for a magazine or newspaper style website.

See it here.

Zoomooz.js

This is a jQuery plugin which allows you to zoom in on any element on a web page. Its very easy to use and could really bring to life a news site or something featuring lots of articles. Its also great for accessibility as it allows people to zoom in on content so its easier to read.

Once again its free to use and could work to present some really cool and interesting sites.

See it here.

Glisse.js

Glisse is a very stylish, responsive jQuery photo viewer. Transitions between images are created through CSS3 animations which makes them very clean. It is highly customisable and features keyboard navigation and fullscreen support.

Once again this plugin is free to use.

See it here.

Mockvault

Mockvault is an app which allows you to upload your designs and mockups to show your client for their approval. It allows them to comment on certain sections of the design and you can add annotations. There is also a button which allows the client to approve the design and is a great way of speeding up the design approval process.

It is available for a free 14 day trial online and then there are various levels of paid subscription.

See it here.

Font Awesome

This is a really cool icon based font. It is designed for Twitter bootstrap and features over 150 icons. It works off @font-face meaning it has a wide compatibility and each icon is vectorised allowing infinite scalability. You can also control its look with CSS so everything is customisable.

Best of all its completely free to download!

See it here.

Codiqa

Codiqa is a tool which allows quick, high quality prototyping for mobile designs. It is based on jQuery and has a really easy to use drag and drop method.

It is currently available with a 30 day free trial and from then on there are reasonably priced plans.

See it here.

Stage 1 – The Rectangle

Create a blank document with whatever presets you wish and use the rounded rectangle tool to draw a bar which will big enough to hold your navigation. Generally when creating a web design I like to make this the full width of the page.

My rectangle is filled with #be2425.

Stage 2 – Layer Styles

This is where we can bring the rectangle to life. Double click on the rectangle layer and bring up the layer styles box. We are going to be applying 4 layers to this to make it stand out. First of all add a gradient, I have stuck with the same red at the bottom of the nav, and made the top half slightly lighter, make sure this is only a subtle gradient as too much will make it look tacky.

Next add a one pixel stroke to the rectangle that is a darker colour than the darkest part of the gradient.

Now for the inner shadow which will really spice it up! Ensure the global light is on 90 and set the colour to a very light red. Make sure the blend mode is set to normal else you wont be able to see the shadow as it is a lighter colour. Set the shadow distance to 1px, and the size to 2px and we are nearly there!

Now head to the drop shadow section, this will help give your design some depth and bring the nav out from the other content. You basically need to play around with this section until you get something which suits your design. I have gone for 1px distance with a spread of 10px.

Stage 3 – Noise!

Texture is a sure-fire way of livening up your designs. Duplicate the rectangle layer and clear all the layer styles from it (do this by right clicking over it and selecting clear layer styles from the menu). Now head to filter in the top menu and select Noise > Add Noise. Select Uniform and tick Monochromatic and set the amount to around 80%. This will look like too much at the start, but thats OK because we can change the opacity of the layer.

Set the layers opacity to around 4%, play around with it to see what looks good for you.

Stage 5 – Text

Now we need to add some links. I have gone for standard white helvetica for the normal state, and my active state is a darker #421617. Add a drop shadow of distance 1px and size 2px to both of these layers. For the normal state make the drop shadow black. And for the active state set the blend mode to normal and make it a much lighter colour to give it an embossed effect.

I have also added an outer-glow to my active state and you can see the options for that below;

Stage 6 – The Dividers

To create the effect that divides each nav item up is really simple. Draw a 1px horizontal line from the top of the nav to the bottom. Duplicate this layer and move it 1px to the right. Add a colour overlay to each of these layers. One which is a much darker colour to the rectangle, and one that is much lighter. Play around with these until they look realistic.

Stage 7 – The Active State

Now for the active ‘pressed’ state. I have cheated a little bit with this and gone for the easy option, but hey who will know the difference at the end!? Duplicate the original rectangle layer and then right click on it and select ‘rasterize layer’. We now have two rectangles on top of each other. With the top rasterized layer selected, cut out a section around the ‘Home’ tab. You wont notice any change in it until we apply some alternative styles to the bottom rectangle. Because we already have a drop shadow on the top layer, it has created a nice indented effect. Select the bottom rectangle and change the gradient overlay on it to two darker colours.

And there we have it! This is a really simple way to create a really simple navigation, however the techniques can be applied to create thousands of different styles.