Obsessed with Web - web design blog inspiration

Happy Monday everyone!

I want to share with you all today a fantastic blog my friend has created. 

Her blog is titled "Obsessed with Web". The blog is related to web design and provides information to do with colour, design, graphic design, typeface information, web design, visual cues and more!

The blog is fantastic and can help you further your knowledge about all things to do with the web and provides information and advice about design. Check out her interesting and eye-catching infographics today!

The link to her blog is: http://obsessedwithweb.blogspot.com.au 

Understanding Resolution

Understanding resolution is one of the most important aspects of Graphic Design (and any other area which requires image use). It is important to understand resolution and know which resolution to use in different situations. Read the post below to understand more about image resolution.

The term ppi means pixels per inch is a way of expressing the resolution of a screen and “density of pixels” in an image. Most computer screens have a resolution of 72ppi which means that if an image is created for the web then there is no reason for the ppi to be larger than 72ppi. According to research, all images made for web should be 72ppi.

The term dpi is in relation to printed images meaning “dots per inch” and is the printing equivalent of ppi. For printing purposes, all images should be printed at the resolution of 300dpi. 

Images that are displayed in a digital format are measured in pixels. These pixels are so small and closely packed together that when the image is zoomed out and viewed digitally, the pixels are not noticeable. 

To give an idea of how an image is placed in relation to size against a 1300px width by 800px computer screen, a 300px width by 400px image would only cover a small amount the a computer screen. 

Printed images are formed by small dots on the page that the viewer is unable to see once the image has been printed if the resolution of 300dpi has been used.

How to change an image resolution

The image resolution can be changed on Adobe Photoshop by selecting Image + Image Size and find the box which states resolution. Here you will be able to change the resolution to any resolution needed. Either 300dpi for printing purposes or 72 ppi for web use. The images displayed at the beginning of this post has been set to 72 ppi. 

Before you add images to your next design it is important to know how your end product will be displayed. Either printed or digitally. Once you are aware of this you will be able to alter the resolution of each image accordingly.

FURTHER INFORMATION

Once you have changed the resolution of an image it will show you what size the image can be to remain clear with the resolution selected. 

For example; the image below has been changes to 300dpi for printing purposes. This means that the width of the image is 4.23 and the height is 6.35. This means that once the image is set to a resolution of 300dpi, the size of the image cannot exceed 4.23cm by 6.35cm otherwise the image will not remain clear when printed. Once this image is added in to Adobe InDesign or any other program you wish to use for your project, the image must stay this size otherwise it will not be clear when it comes to printing. 

TIPS and TRICKS

A good trick to keep the size of the image once the resolution has been changed when working in Adobe InDesign is;

• When you want to add an image into your project when working in Adobe InDesign, click cmd + D   OR   control + D. Now you can select your image

• Once you have selected your image and opened it in the program your image will hover with your cursor. 

• Instead of dragging the image to the size you want. Simply CLICK and your image will appear at the correct size for the image with the resolution that you have used.

All information retrieved from:

Planet of Tunes. (2014). dpi, ppi & screen resolution. Retrieved from Planet of Tunes web site: http://www.planetoftunes.com/computer/dpi-ppi-screen-resolution.html#.U2tkOF55UpE 

Barker, J. (2013). Image Resolution Explained. Retrieved from Free Digital Photos web site: http://www.freedigitalphotos.net/blog/tutorials/image-resolution-explained/

What on earth is this strange thing called "Kerning" and how do I use it?

Kerning is a term that relates to adjusting the size of width between letters. Kerning can be used to manipulate a typeface to create your own style or to create extra meaning for your words.

Kerning can be used in Adobe InDesign, Adobe Illustrator and Adobe Photoshop. It is a fantastic tool to manipulate text. Though it is an interesting tool to use, it should not be overused on your writing just because you know how to use it. Rather, kerning should be used as a design concept. Font makers spend months on creating the correct positioning between letters so it is important not to over do all their hard work.

As previously mentioned, different types of kerning can create extra meaning for your writing, for example;

Creating a tight and cramped word using kerning can create the illusion of a sharp, bold and serious word. This technique could be used for a poster or cover for a horror movie for example.

Creating a loose word using kerning can create an easy going and free feelings. This could be used on a poster for a tropical island perhaps.

How to Kern

Once you have written your word, place your cursor between two letters, such as the H and the A in the word Handglovery. Whilst holding down the ALT key, using the left and right arrow keys to adjust the width of the letters.

Once you know this trick, it is always fun to play around with it! Finally there is a way to fix the odd and sometime too wide distance between letters.


ENJOY!

Illustrator Tutorial: How to use the Pen Tool

The pen tool is a great way of creating shapes, outlines for drawings or photographs. I frequently use the pen tool to create shapes or outlines for a drawing that I have scanned onto the computer. Today I will be helping you develop your understanding of how to use the pen tool in Adobe Illustrator.

Creating straight lines

1.  Once illustrator is open and a blank document is displayed, click on the pen tool. It should look like this:

2.  When on the pen tool. Move to the blank document and click once

(A small dot should appear on the page. This dot is an anchor point which can be manipulated to create an outline)

(Anchor point)

3.  Now, travel with your cursor away from the anchor point in a straight line, once you are happy with the distance, click again to create another anchor point. By click again a line should appear connecting the two anchor points together.

You may notice that your line is not very straight. A straight line can be created by holding SHIFT when making the next anchor point.

4.  Travel down the anchor point you have just created to make another anchor point from the second anchor point made. This time, hold SHIFT to create a straight line.

You can see that the line is completely straight because you held SHIFT while creating the third anchor point.

5.  Make one more anchor point below the first to form the sides of a box.

6.  Complete the box by making another anchor point at the original point.

You have now designed a box using the pen tool!

HELPFUL TRICKS

If you do not like one of your anchor points, you can always alter it using the 'Direct Selection Tool' (white arrow). 

1. Select the 'Direct Selection Tool'
2. Click on the first line that you drew that was not completely straight because we did not hold the SHIFT key. The whole box will be highlighted.
3. Click on the top left hand corner of the box where we made the original anchor point. 
4. Once the top line is select, hit the 'delete' key on your keyboard. We will remove the line to start over.
5. Select the pen tool again.
6. Click on one of the anchor points up the top of the box (By clicking on the anchor point, it means the next anchor point will connect together)
7. Holding SHIFT complete the box again.

Creating a circle

The key to creating a good circle is to only have 4 anchor points. The less anchor points can be better at times because it makes it more simple if you ever need to alter the anchor points later on.

1.  Select the pen tool

2.  Click on the page anywhere to create the first anchor point

3.  Click, hold and drag for the next anchor point. When you have clicked for the second anchor point to make a curve, drag your cursor directly up and this will create the curve.  

(We need to click, hold and drag because we need to create the curve of the anchor point).

(Click and drag the cursor directly up to create the curve)

4.  Now you can create another anchor point by doing the same process however you will be clicking to make an anchor point directly above the original anchor point you make and will be dragging your cursor straight out to the side to make the curve.

(Click and drag the cursor to the side to create the circle)

5.  Complete the circle by using the same principles

6.  When complete your circle may look like something similar to mine. Though this does not look like a circle, we are able to fix this.

7.  Select the 'Direct Selection Tool'.

8.  Click on one of the anchor points that you think needs to be adjusted. You can adjust the shape by clicking on that anchor points 'hands'. This is the two lines that come off the anchor point. 

Here is an example of how to fix your anchor points.

You have now learnt how to use the pen tool to create a circle!

Try the exercises below to help practise using the pen tool

Illustrator Tutorial: Manipulating text

I have recently been inspired by one of my projects to design a title for a magazine. Today I want to share with you how I designed the title of the magazine by manipulating a font.

Read the step-to-step tutorial on how to manipulate a typeface in Adobe Illustrator to gain inspiration for your next project!


Here is a design I previously created for the title of the magazine:

In this tutorial we will be creating a slightly different design to make it less complicated to follow along as the design can be difficult to complete.


Today I will be working with the word 'CRAZE' again in the typeface 'Britannic Bold'. You can choose to work with this word and typeface or use others to suit your design ideas.

     1.  Open Adobe Illustrator

     2.  Open a new blank A4 landscape document.

     3.   Using the text tool, write the word CRAZE in capital letters.

     4.   Change the typeface to 'Britannic Bold'.

     5.   We are going to make the appearance that the letters are progressively getting larger starting from the E as the smallest letter and the C to be the largest letter. To do this, still using the text tool, highlight the letter E - change the size to 150. Highlight the letter Z - change the size to 180. Highlight the letter A - change the size to 200. Highlight the letter R - change the size to 230. Highlight the letter C - change the size to 250.

    6.  Once you have altered the size. Change the text into an object (cmd + shift + o    or    control +        shift + o)

   7.    Next we are going to rotate each individual letter.

   8.    Using the 'Selection Tool', click the letter C 3 times. (Clicking on each individual letter will select only the one letter rather than the text as a whole. We need to select each individual letter to rotate separately because this is the effect we are going for rather than rotating the word as a whole).

   9.   Rotate the letter C = -20 (To rotate the letter to an exact number. Select TRANSFORM. By opening the transform box you are able to do different types of transformations on your design. We will be using the Rotate box). (If you do not have this window open - select WINDOW + TRANSFORM)

  10.  Rotate the letter R = -15

  11.  Rotate the letter A = - 20

  12.  Rotate the letter Z = -16

  13.  Rotate the letter E = - 14

  14.  Now we are going to arrange the text to be closer together before we manipulate the letters. Copy the image below to arrange the letters in the same way. You can do this by clicking three times on each individual letter using the 'Selection Tool' to make it appear by itself and making it in a specific way. 

  15. Using the 'Direct Selection tool' we are going to manipulate the anchor points of the text to create the swishing effect. With the white arrow (direct selection tool) select the letter C at the point when the letter ends. As you click on the corner you will be able to see a small blue dot appear. This is called an anchor point. Grab this point with your arrow and stretch it down towards the letter E.

(Your word should look something like this now)

  16.  Now you know how to use your anchor points to manipulate the letters, you can continue to use the anchor points and drag it towards the letter E to create the swish effect. Try to copy the design below. (If you are finding it difficult, take a breath and keep going. Playing with anchor points can get frustrating at times).

  17.  Now that you have something similar to this design. You can add more shapes using the pen tool to add to the word. (Check out my 'Using the Pen Tool in Adobe Illustrator' tutorial if you are unsure how to use it and come back to this)

  18.  Try to copy the design below or add your own shapes using the pen tool to create a bold design.

  19.  Play around with your design till you find something that looks good for you and suits your design.

  20. You can now create more designs by manipulating text by using the same principles. ENJOY!

Be sure to check out my post called Tutorial: How to use the Pen Tool in Adobe Illustrator to learn more about how to get the best use out of the pen tool.

InDesign Tutorial: How to add images behind your text

In this tutorial I will be showing you how to add images behind your text. This is a great way to add something different to a title or larger writing on a poster perhaps.

Today we will be working in Adobe InDesign

1. Open a new blank document in Adobe InDesign
2. Using the text box, write a word that you would like to place images behind. For this example I will be using the word 'HANDGLOVERY'. (Adding more than one text box for your word means you can use different images for each text box).
3. Make this writing quite large and choose a typeface that is bold as large. (A bold and large typeface will be used to make it easier to see the images placed inside the letters). 

Cannot decide on which typeface to use?
Try; Britannic Bold, Arial Black, Copper Black or Impact. Today I will be working with the typeface 'Arial Black'.

     4.  Convert your text to an object. (cmd + shift + o    or    control + shift + o)

   5.  Once you have arranged your letters and converted them to an object. Use the swatches tool bar to make the inside of the letters 'no fill' and the outlines to have 'fill'. (You can chose any colour for your outlines fill colour).

 (Example of where to change the fill and outlines of the colour. This is what the swatches tool should look like once you have added fill to the outlines and no fill to the inside of the objects)

(This is now what your text should look like)

   6.  Using the white arrow ('direct selection tool') select a letter.

(direct selection tool)

   7.  Now type 'cmd + d'   or    'control + d' (This is how the images will be placed in the inside of your letters. Now you can select through your own images to find one that you would like to fill your letter with)

  8.  Once you have down this, you can adjust the image added by double clicking the image. A red line should appear around where the image is. You can from here adjust the image by using the corner points to make it smaller and larger. (Hold the shift key to make the image stay in proportion when adjusting size).

 9.  Repeat steps 7-8 to the other letters on your page to complete the design. 

If you do not like how your image looks, you can always remove it and add another by double clicking on where the image is and adding another one. (cmd + d   or   control + d)

 10.  Now that you have all your images behind the text, you can chose to either remove or keep the outlines. For this example I will remove the outlines.

Now you have completed your design! Play around with adding each individual letter in a text box and add separate images to these. Your design will instantly look different.

Serif and Sans-serif

Understanding serif and sans serif fonts

When creating a design it is nice to use both serif and sans-serif typefaces to create contrast in a design. Before using these in your next design, find out a little bit more about them below.

Serif

A serif typeface is one which has a fine line that finishes off the main stroke of a letter. These fine lines are commonly found at the bottom and top of a letter and makes your eyes join letter together. Serif fonts date back to Ancient Rome as the Romans were the first to add strokes to the end of their letters. Serif fonts are commonly used in print media such as books, magazines and newspapers.

Sans serif

William Caslon IV created the sans serif font which simply means without serifs. This font did not catch on at first however has become a huge success across history. Sans serif fonts are typically used for heading and often make a big statement. 

Information retrieved from:

http://vimeo.com/65899856

http://www.scribe.com.au/tip-w017.html

Inspirational Sites

Finding inspiration is always a good idea before beginning a project to get your creative flows moving. Inspiration can be found all around you from a walk in the park to searching the internet. Here are two fabulous sites that I just can't get enough of for inspiration!

https://www.behance.net

(Screen shot from the site "behance.net". The site offers a look at previous work professionals in the field have designed)

http://inspirationhut.net

(Screen shot from the website "inspiration hut.net" to give an idea of what can be found on the site)

Gathering your inspiration into a design folio is also helpful so you are able to look back on the hard copy whenever you're in need of some inspiration.

An insight into Helvetica

Helvetica is one of the world's most popular typefaces. The beautiful typeface was originally designed in Switzerland by Max Miedinger and Eduard Hoffman in 1957. When the typeface originally came it, it stood out because it was different to the fancy, decorative typefaces that were available. Helvetica created a sleek and modern twist to anyone's design. It has a crisp appearance which means it is easily legible from up close and from a distance.

Technical details of the typeface
Helvetica is not just about the typeface itself however also about the negative space the typeface creates when written. Helvetica can be recognised against other typefaces due to many destructive traits such as its slender appearance and legibility. The negative space of the lowercase letter 'a' forms a tear drop which also makes the typeface stand out from other typefaces.

Variations
The typeface Helvetica has multiple variations to create a versatile look for your design. Some include;

• Helvetica Light
• Helvetica Compressed
• Helvetica Textbook
• Helvetica Rounded
• Helvetica Bold

Information Retrieved from:

Web Design. (2010). The Simplicity of Helvetica. Retried from web design web site: http://www.webdesignerdepot.com/2010/01/the-simplicity-of-helvetica/

Photoshop Tutorial: Creating a Colour Wheel

Tutorial for creating a colour wheel in Adobe Photoshop

Follow these few simple steps to create your own colour wheel. Creating your own colour wheel will help you understand colour theory further.

Step 1: I have supplied you all with an image to begin with that contains the three primary colours. The image will be your base for the colour wheel.
Open the image in Photoshop.

Step 2:

Duplicate layer 1 - (cmd + J   OR   control + J)

Step 3:

• cmd + T   OR   control + T
• rotate image 60 degrees

Step 4:

Change blending mode to 'LIGHTEN'. This will create your secondary colours.

Step 5:

Merge the layers (cmd + e   OR   control + e)

Step 6:

Copy the layer again (cmd + J   OR   control + J)

Step 7:

Rotate the colour wheel 30 degrees.

Step 8:

Change the opacity on the copied layer to be 50%

Step 9:

Merge the layers (cmd + e   OR   control + e)

Step 10:

Apply "gradient overlay" to create tints and shades on the colour wheel

• fx + gradient overlay

• Change gradient style of "radial"
• Click "reverse" (making the gradient go from light to dark)

(Gradient overlay menu should look like this at the end of the step)

• Click on the gradient swatch because you will need a certain kind of gradient
• From drop down menu = "special effects"

• Append the effects when asked
• Once appended, select the gradient that is called "gray value stripes")

• Click okay
• Change the blend mode of the gradient to "Hard Light"

Your colour wheel should look something like this once you have completed all the steps.

Information retrieved from:

Lynda.com

Colour Theory

The basics

Primary Colours
Blue, Red and Yellow
(Pure colours)

Secondary Colours
Green, Orange and Purple
(Primaries mixed)
Secondary colours are formed by mixing two primary colours together.

Tertiary Colours
Tertiary colours can be made by mixing either a primary colour with a secondary colour or two secondary colours together.

Understanding your colours in swatches

When using your Adobe programs it is interesting to know about the colours you're using and how the colour swatch panel works. The x-axis of your panel describes the tint of a colour whereas the y-axis refers to the shades.

                                       (Image 1.0 visually describes the colour swatch panel)


Hue describes what the colour is. When using a colour picker, the hue changes when the tool is moved over different colours. This can be useful when trying to find a certain colour. If you have a colour in an image that you would like to use for your designs, simply select the eye dropper tool in your Adobe programs, click on the colour and transfer this colour to your designs.

Saturation describes the intensity of a colour and how much white content is in a colour. Saturation can also be referred to as the "tint".

Brightness/Luminance describes the intensity of light or dark for a colour. Brightness refers to how much black content is in the colour rather than how much white content like saturation is measured.

Value is defined by the grey value of a colour when it has been converted to greyscale. For example; when converted to greyscale, the colours red and green have the same value.