Category Archives: Development

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!

Advertisements

Water – The Source Of Life

Standard

Project

I am working on a web project for college.

My brief is to design 6 digital images to be placed on the National Geographic website to help promote the programme “Water – The Source of Life”

The programme is to be based on our misuse of water.

I am only required to design the graphics for this project – not the web pages.

My original idea is centred around the melting of the polar ice caps and flooding of mainland areas.

In the developed world we largely manage any sea encroachment onto land, but in the developing world, especially in parts of Asia, flooding is a big problem, as the Japanese Tsunami showed us a couple of years back.

With this environmental thought in mind I considered what some of the major cities in Eruope and the US would look like underwater, as though the sea had indeed swallowed them up.

The Sea

I started with a couple of images of bolow the sea:

My first underwater image.

I liked the circular effect of the rocks and the coral at the bottom. I thought it would look good with a city nestled onto it.

My second image.

Although this is darker in colour, I knew that I could alter the light in Photoshop. I particularly liked the way the light beams down onto the image from above.

The Cities

Now I needed images of the cities. I started with Paris.

I liked this image because it shows a number of famous monuments and who could fail to recognise the Tour Eiffel?

Then I chose Rome, which is another iconic European city:

I loved the colours in this image and thought I could get some very interesting effects by playing with the light.

Then I turned my attention to America and chose images of New York and San Francisco:

And finally I found an image of Sydney, Australia, to complete my collection:

The light is amazing in all these images.

Layers

The next job was to put the city images together with underwater images and using layer blends, create an underwater-city image.

After some work, I have come up with the following images:

Paris Underwater

Rome Underwater

New York Underwater

San Francisco Underwater

Sydney Underwater

All I need to do now is decide which two images I’m going to submit for my project.

I have to add some text, so I will see which images look best with the text added.

Image References

Underwater 1

Underwater 2

Paris

New York

San Francisco

Sydney

Rome

Typography – Graphics and Web

Standard

Typography

There are 2 main classifications of typeface:

Serif and Sans Serif.

Traditionally, letters had a degree of ‘ornament’ at the edges of the letters. This is called a serif; hence serif fonts.

By contrast, fonts without serifs are called Sans Serif.

Here is an example:


A serif font tends to have a more traditional look, whilst sans-serif is usually considered more modern-looking, but it varies from font to font.

Readability is an important issue in web design and serif fonts have traditionally been considered easier to read. This is why serifs were created in the first place – to lead the eye from one letter to the next.

However, resent research has indicated that people with reading difficulties such as dyslexia often find sans-serif fonts easier to read.

X-Height

The x-height is, literally the height of the x in a given font. It determines the overall height of the bulk of all the letters and has a pivotal role in the readability of a font. X-heights vary considerably from font to font  and so it is important to ensure that a sufficient sized font is used when writing a website. (Usually point 16 is used, but sometimes this might need to be altered.)

Headings

A Heading will need a larger and bolder typeface in order to stand out on the page or screen.

This does not have to be the same font as the main body text, but instead can be a more interesting or creative font, as only a small amount is required.

 

Type Style

Web designers use Type Styles to create a synergy on the site. A family of fonts can be used to make the overall site look cohesive.

Another function of a type style is in writing the CSS sheet (the overall style of the pages) a ‘font family’ can be chosen. This way, if a computer does not have the desired font installed, the next on the list (a similar, related font) may be selected, so that the site still looks much as it has been designed. This is called a Web Stack.

There are some websites which enable developers to use fonts and they can be downloaded as the page opens.

Font Face      Google Web Fonts

 

Distortion

Typefaces can be easily distorted and this can be detrimental to their readability.

However, some distortion can be a good thing. In titles and headings, altering the Character Spacing (Tracking and Kerning) between individual letters can create a sophisticated look and tidy-up and uneven spacings generated by the plain text.

It is not advisable to do this with te body text as it will affect readability.

 

Designing for the Web

It is generally considered that a sans-serif font is easier to read on websites. Any font which is plain, has no ornament, but which has a large x-height, is probably a good choice for body text on websites.

 

Image References:

Serif/Sans Serif Font

X-Height

Photoshop Tutorial – Selection Techniques

Standard

Selection Techniques

Today I have been learning about the different selection techniques available in Photoshop.

1. Magic Wand Tool

 In CS6, the Magic Wand Tool looks like this:

To Select an area (works best on an image with little or no background:)
* Click on part of the background. This should select all the background, but you may need to alter the tolerance to ensure all is selected. You can delete the background at this stage if you wish, or…

* Click > Inverse to select the image, instead of the background.

* Copy this image and paste into  another file (eg: on another background.)

Here are some I did earlier:

This image was created by selecting the Duck from this file:

The Frying Pan was selected using another selection tool:

2. Magnetic Lasso

 

In CS6 the Magnetic Lasso looks like this:

* Choose the Lasso icon and click Magnetic Lasso Tool.

* This tool also works best where there is little or no background, or where the contrast between the image you want to select and the background is quite sharp.

* Use the tool to draw round the image, carefully. There is a tiny arrow which indicates where the selection will take place and the image is selected by a series of “marching ants.” These disappear when the selection is complete (the line must join up with itself.)

* This image can be copied and pasted onto another image or background, as I have done with my practice above.

 Finally, the clock was selected using:

3. Pen Tool

 In CS6 the Pen Tool looks like this:

* Select the Pen Icon and choose Pen Tool.

* To use the Pen Tool, you need to get used to Bezier Curves.

* Click on a point just inside the perimeter of your selection. Then click another point a little further along and drag a line outwards.

* Use the point of this line to adjust the curve of your selection line.

It looks a little like this:

* It takes some practice, but it is a very accurate way to select an image, especially if there is a complicated background to extract from.

4. Refine Edges

Sometimes you may want to select an image with a very detailed outline, like this:

This would lake a lot of very difficult cutting out if I were to use any of the methods above, but there is an easier way: Refine Edges.

* First, Select the image with the Lasso tool. Do not worry about getting it exact around the edges:

* Now click on the Refine Edges button and ensure you select On Layers, so you can see what you’re doing.

* You can brush around the edges of your image and the Refine tool will select the fine detail for you.

* As with other methods, the sharper the contract with the background, the better the image selection.

* In may be necessary to use a variety of selection tools in order to get the image selection just right.

5. Eraser Tool

In CS6, the eraser tool looks like this:

I looked at the eraser tool as a way of selecting part of an image. The tool can be used to remove part of an image, leaving another image underneath or adjacent to it.

An example could be layering two images on top of the other and using the eraser to remove some of the upper image, revealing some of the image beneath, as I have done here:

I used the eraser tool to remove some of the wave layer, revealing the seafront and sky underneath.

I’m not entirely happy with the results so far and would like to figure out how to make the wave more prominent, without a harsh edge. (I have used Multiply to blend the layers, but I don’t think it looks right.)

I need to work on the image some more.

References:

Photoshop Icons

Bezier Curves

Photoshop Workshop – Layer Styles

Standard

I am getting to grips with Photoshop CS6 and today I took a look at Layer Styles.

I’ve never really used the myriad of styles available (apart from Multiply) so it was  good to take a look at the effects possible by overlaying images and applying a layer style.

I took the three images above and applied the following styles:

Vivid Light

Subtract

Soft Light

Screen

Saturation

Pan Light

Overlay

Multiply

Luminosity

Linear Light

Dodge

Burn

Lighter Colour

Lighten

Hue

Hard Mix

Hard Light

Exclusion

Divide

Difference

Darken

Darken Colour

Colour

Colour Dodge

Colour Burn

I haven’t altered anything else with these images, so the full effect of the layer style can be seen. I love the different effects I’ve created here and I can see myself using layer styles a lot more in the future.

Picture References:

Branch

Ice Cubes

Pancake Ice