Creating Water In Photoshop

Hey

This is going to be a quick tutorial on how to create a water effect in Photoshop. This tutorial doesn't take long and you can get a really awesome effect, that does surprisingly look like water. Hopefully by the end you should end up with something like this.


For this tutorial you will need the following.

Photoshop or similar.

If you are ready lets begin.

Step 1)

The first step is to create your canvas. You can make it any size you want. I've chosen 500px x 500px. Although you can pick any size you want.


Step 2)

The next step is to pick a colour foe one of the pallet swatches. Select A dark blue. If you move your eyes to the image below i've used these colour values.


Step 3)

The next step is to use the Clouds filter. Go Filter > Render > Clouds and you will get a similar effect to this. You can re-do the filter (Ctrl + F) if you don't like the way the colours have come out. You want an even distribution of blue and white.


Step 4)

The next step is to use the ripple effect in Photoshop. This will be done twice. Go Filter > Distort > Ripple. Set the amount to 999 and size to large.


Step 5)

At the moment it doesn't look like water. The trick to this is to reapply the filter, but set the size to medium.


Step 6)

From the image below it doesn't look like water, but zoomed into 100% it does look effective. You can apply this effect to any size canvas.


Not bad, you can see the calm water that Photoshop has created. I've added some text "Steiner" . You can find it at DaFonts.


Please leave a comment with what you think.

Creating a Sunlight Burst - Photoshop Tutorial

Hey

This tutorial is going to be about creating a very cool and slick looking sun burst effect using Photoshop. The tutorial will incorporate different layer styles and image effects to create an image that will look like the sun is bursting out. This tutorial will take quite a while. Through out this tutorial you don't have to make it look like my image. Create a design that will look good for you.

We should be aiming for something that will look like this, except in wont be square.


For this tutorial you will need the following:

A rendition of Photoshop or similar.
GraphicXtra's Custom Shape Pack 28 Embelish priced at £4, or similar.
Steiner font from DaFont
A cool sunset or sunrise image. I found the original image here, his page is here.

Step 1) The first step is to find a suitable image. It should have a good foreground with something going on. A little bit of shadow and silhouette and importantly a sun. You can find your own in Google images or click the image below for the full version.


Step 2) This is probably one of the easiest steps. Import/open your image in photoshop. Set the layer (if not already) to a normal layer and not a background layer. If is done by double clicking on the layer. It shouldn't say background as shown in the image below.


Step 3) What I want from the image is more purple/red tones. This is easily done. Create a new layer and using the paint brush select a pink colour and colour in bits of the sky, clouds. Do what you feel.


Step 4) Use the layer blending options to change the blending option to colour. Set the opactiy down. I've gone for around 16%. This is supposed to be subtle, so don't over do it. If you compare the image below with the original, there isn't a lot of difference. This is exactly what were are looking for.


Step 5) Do the same with some purple i've added less in this time. Again change the blending options of the layer to colour and reduce the opacity. You can do this as many times as you want with different colours, just set the blend option to colour and reduce.


This is the final colouring I have ended up with. You can sort of see the purple and pink layers mixed into the image.


Step 6) This next step is kind of complicated. The plan is to create some light beams using the original layer. First duplicate the original image onto a new layer. We are now going to use the Glowing edges filter. This is located in Filter > Stylize > Glowing edges. Set the options as 1 and then about 11 and 15 for the next to sliders. Press OK, when you are done.


Step 7) The next step is to change the light beams from the shape they are to a point from which they source. This is done through the radial blur function. Go Filter > Blur > Radial Blur. A dialog box should pop up. Change the source from spin to zoom. This step involves a lot of guess work and undoing / redoing this blur. Move the little diagram in the Blur box to roughly where the sun is. It doesn't have to be dead on, just there abouts. Once you think you have it increase the amount of radial blur. Press OK.


Step 8) One final step is to change the blending option to Multiply. This removes all of the black in the image within a certain range and leaves only the white values.
This is a great tool for nearly any type of effect. You can do the same but the other way around using the screen option. This removes all of the white and leaves the black parts of the image.


Step 9) This is really an optional step. The idea here is to just change the colour of the rays of light to better match in with the image. Sometimes they look a bit strange and need to be toned down or coloured more appropriately. To change the colour select the layer and go Image > Adjustments > Hue/Saturation. Adjust all the values so the rays of light are more purple blue. Use all 3 sliders to get this effect.


Step 10) Repeat the process of Glowing Edges > Radial blur for a second time. Increase the last two values in the glowing edges window for a lighter stronger rays. I have not re-coloured the layers for a second time and just left them as normal.


Step 11) This step involves making the sun bigger and brighter. On a new layer again apply some large white soft brush strokes to where the sun is. Either double click on the layer or go Layer > Layer Properties and add an outer glow. This wants to be a creamy white glow. It doesn't want to be too harsh.


Step 12) Use the smudge tool to smudge and drag out parts of the suns image. This should be subtle and added only a little bit. Do this until you get a satisfactory finish.


Step 13) This step is the first stage in adding the wispy parts of the sun light. I recommend you purchase the Embellish pack from Graphic Xtras' as this is perfect for what we want. You can find the purchase page here, product information can be found when you scroll down.
On a new layers again, apply the wispy shapes it doesn't matter which colour you chose.


Step 14) Arrange the layers and shapes so they are coming from one point. Don't add to many because it can look over done.


Step 15) Colour the layers white and then merge the layers together, and add an outer glow of a very white yellow. Again make it very soft. Make the outer glow your image looks good.


Step 16) This is an optional step. Create a new layer again and add only one or two shapes. Colour these pink. Set the blending option to Overlay and reduce the opacity.


Step 17) Add some cool sans-serif text. I've used Steiner from Da fonts. You can add your name or any other piece of text. The final step is to export the image as a .jpg and you are done.

For a full size click the image below.


If you like it please show off your creations in the comments.

Mistakes Made In Website Design

Hey

Websites are a big part of my life. I spend a lot of time using them, so a good design is a must. I know i'm not the master of web design but I do know what is good and what is bad. This post will be about the common mistakes that I personally think are made in web design and possible a reason why.

1) The Website Takes To Long To Load

There is a general consensus that websites have about three to fours seconds to load on a broadband internet connection before a user gets bored and visits another website. This mistake is usually caused by designers putting large images in there layout or flashy graphical elements. They do look sweet but if it loads slowly I can find my content else where. For extra reading check out this BBC news article about website shopping and the four second cut off point. The same principle applies to nearly any website. The only pages I do let load are ones with video, where the video is the last thing to appear.

2) The Navigation Changes.

A website where the navigation bar changes depending on which part of the website you are on is great in theory but it doesn't really work. For example small changes such as if the page you are on is "Tutorials" and the tutorial link is diminished, this is fine. But if the whole navigation bar changes it confuses new users and people begin to find it difficult to find particular parts of your website.

3) Broken Links

When I come across a website and I click a link and it comes up with a 404 error or similar, this really annoys me. If you design a website and I can't get to the page why both putting it in there. It doesn't take long if you, or a group of you, to check your site for anything that is broken.

4) None Standard Links

This mistake sort of blends in with number 3. A link on a website should be a colour, preferably blue, and have a small underline. The biggest mistake is when designers change the colours or blend the link in so much that I don't no its a link. This is confusing. Links which are images are not to bad as long as the image relates to the link. A check out link should be a little shopping basket, this is good design. A bad mistake is when, say for example, a fruit website uses a banana to link to the check out, or an apple to link to contact information. Its confusing and bad design.

5) No Target Audience / Doing To Many Things

A website should be ideally focused on one or a couple of topics. This way a user knows exactly what the website is about. Bad design comes manly when a designer or client wants the website to do everything. Nothing gets done well and it is all a bit glossy. A well designed websites wants to have a specific purpose and target audience.

6) Crazy Colour Schemes

Mixing green and black may look good on paper but it usually doesn't on the web. How many times have you seen a Myspace page or kids website having green text and black background. Not all web designers use such drastic colours but i've seen some colour schemes that are best left alone. "My EYE'S!"

7) Best Viewed In / Doesn't Work In Other Browsers

You see in some website design a small piece or text or image that says "Best Viewed in Internet Explorer 7 and 1024 x 720 Resolution." This is really bad. I don't personally care if you website is best viewed in 1024 x 720 resolution I want to view it on my 30 inch wide screen monitor and I want it to look good. If it doesn't work in any other browser, this should have been checked. On the internet people view websites in hundreds of different ways. It should work on all. I know there is a gripe that some websites only work in IE and not Firefox. I think this is the worst kind of web design when a site is browser specific.

8) Too Many Pages To Click Through

Some websites do need users to click through a couple of websites, such as when you are purchasing a product. But I should not be there all day. If a website is designed that I have to click on 50 links to get what I want, its not well designed. For example check out this post, about the 16 steps to buying / transferring a product from Godaddy. It may seem good on paper but it doesn't work in reality. It should be as quick and painless as possible. To many pages to do something simple. Bad Design.

9) Crazy Amount Of Adverts

I know websites need to use some sort of advertising based income to subsidies the site, but it doesn't need to be crazy. For example I personally think a website should have only a couple of adverts. I'm not a bigger fan of adverts to start with and use Adblock frequently. But if a website does have adverts they shouldn't clutter the page. Over use is; pop-ups and pop unders, a column dedicated to just adverts, at the top and bottom of the page, in every fourth line of your post. Over use takes the user away from the content and pisses them off. I know I have adverts but I don't think there intrusive. I also don't earn very much from them.

10) Splash Pages

Nearly all of the time, splash pages are a website of time and space. There are off course places to put such pages. For example gambling and pr0n, where I think it is required by law but now where else. The reason splash pages are of bad design is people just look for the skip button and don't look or use the splash page. They are not needed.

Bonus

#1) Spelling Errors

Although this is not a big mistake, spelling errors are annoying. I don't mind the odd error, I seem to make them all the time. But if a website contains hundreds of spelling and/or grammar errors it tells me that you are not interesting in your site. This is gives me a bad impression and I will probably not return.

#2) No Contact Information

Although this isn't a major error in website design it does become a little annoying if I want to contact you about your product, service or to suggest something. Having no contact information says to me that you can't be bothered. A little bit of information goes a long way. For example I've been contacted numerous times and i'm happy to respond and talk to people.

I think i'll stop there. I could go on for a long while explaining the millions of mistakes that appear in web design. But 10 is a good number, plus bonus. If you have any more please leave them in the comments. And remember to have a good website design.

Wallpaper Wednesday - Fractal

Hey

Its time it spruce up your wallpaper. This week its the turn of a fractal. A fractal is a mathematical shape generated on a computer to create a really interesting image. I really like this one. You can click the image below for the full version.