The quickest way to apply the golden ratio in design is using the rule of thirds, dividing an area into equal thirds both vertically and horizontally, the intersection of the lines will provide a natural focal point for the shape.

Photographers are taught to place their key subject on one of these intersecting lines for a pleasing composition, the same principle can be used in the design.

Although the rule of thirds can be applied to any shape, if it is applied to a rectangle with proportions approximately 1: 1.6, it comes very close to a golden rectangle, which makes the composition all the more pleasing to the eye. 

To apply it to any design, you have to make sure that the ratio of the design area is 1: 1.61, or multiplying the height or with of an area by .618

Making a grid is the basis for any great design, is a way of organizing content on a page, using any combination of margins, and guides.

There are different methods and proportions, the golden ratio is probably the most famous and used in art; we will study its history and how to apply the Golden Ratio in Design.

What is the the Golden Ratio

The golden section or ratio is a mathematical relationship found in nature that can be used to create aesthetically harmonious compositions. 

It is roughly equal to the ratio 1: 1.61 and it is commonly illustrated by the fibonacci spiral or golden rectangle.

The golden section is closely related to the Fibonacci sequence. The Fibonacci sequence results from adding the consecutive numbers in a sequence:

1 + 1 = 2, 2 + 1 = 3, 3 + 2 = 5, 5 + 3 = 8, 8 + 5 = 13

Outcome: 2,3,5,8,13

Each term is the sum of the previous two.

Mathematicians have studied the golden ratio because of its unique and interesting properties founded in nature.

Mathematicians have established the golden ratio as an irrational mathematical constant, approximately:

1.6180339887

This relationship means that two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to (=) the ratio of the larger quantity to the smaller one.

Construction of the Golden Rectangle

A golden rectangle can be constructed with only a ruler and a compass using this technique:

1. Construct a simple square
2. Draw a line from the midpoint of one side of the square to an opposite corner
3. Use that line as the radius to draw an arc that defines the height of the rectangle
4. Complete the golden rectangle

History of the Golden Ratio

Since ancient times, man has studied or theorized about aesthetics, proportions, beauty, nature or the human body, everything seems to be made by patterns, and these patterns could determine whether or not an element is beautiful.

Ancient Greek mathematicians first studied what we now call the golden ratio because of its frequent appearance in geometry. Some studies of the Acropolis, including the Parthenon, conclude that many of its proportions approximate the golden ratio.

Plato, Michelangelo or Leonardo have been creating theories that determine that objects, elements, visual compositions, sculptures, etc. that are created according to certain principles, determine that they are more aesthetic or comfortable to look at, that they use a “natural” visual language that they make them appear better or prettier in our eyes. 

The modern history of the golden ratio starts with Luca Pacioli’s Divina Proportione of 1509, which captured the imagination of artists, architects, scientists, and mystics with the properties, mathematical and otherwise, of the golden ratio.

Salvador Dalí explicitly used the golden ratio in his masterpiece, The Sacrament of the Last Supper.

The dimensions of the canvas are a golden rectangle. A huge dodecahedron, with edges in golden ratio to one another, is suspended above and behind Jesus and dominates the composition.

In 2003 Weiss and Weiss came on a background of psychometric data and theoretical considerations to the conclusion that the golden ratio underlies the clock cycle of brain waves. In 2008 this was empirically confirmed by a group of neurobiologists.

In 2010 the journal Science reported that the golden ratio is present at the atomic scale in the magnetic resonance of spins in cobalt niobate atom

Examples of Golden Ratio in Design

Logos

Golden Ratio is widely used in logos. In the following examples the text or the dimensions are apparently based on proportions of the golden ratio

Credit Cards

If we measure the sides of our credit or debit cards, we will notice that the relationship between their sides is. the golden number.

When the credits card were designed, they thought of giving it “ideal” dimensions.

Measuring the height and width of a credit card, we will see that they measure 85.60 X 53 mm. Well, if we do the division 85.60 / 53 it gives us the result 1.61, which is practically the value corresponding to the golden number

Maybe when the firs cards were made the designers never though of the golden ratio, and the size could be simply explained in that we humans tend to perceive dimensions that are based on the golden ratio as esthetically pleasing.

A card size that looked pleasing may have been chosen from others , and we found it pleasing because it was close to the golden ratio.

How to apply Golden ratio in Design

Let us use as example the ratio for the header of a web page. As a basis we will use a document of 1024 x 768 pixels.

We multiply the height by .618

768 x .618 = 474.624

That will be our measure for the content. The difference (293.38) will be the measure of our header.

In Web design is more difficult to implement because of the difference in the resolutions of the users monitors, but you can use it to design boards, Magazine advertisements, etc.

Resources

There are a few tools across the Internet that does a good job of finding the golden ratio

• Golden Ratio Calculator
• Kevin Cannon’s Golden Ratio Calculator. He also has a golden ratio widget.
• Adobe Exchange Search: Golden Spiral This golden spiral can be used to work out perfect proportions

References

http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/fibInArt.html#parthenon

http://en.wikipedia.org/wiki/File:Golden_ratio_line.svg

The post The Golden Ratio in Design appeared first on Designer Freelance.

Reading any text shouldn’t require any extra effort from the reader beyond being able to actually read; words and sentences should be immediately comprehensible. Readability then is the ease with which a reader can understand a written text.

The total sum of elements within a given piece of written text that affect the success of a group of readers has with it. The success is the extent to which they understand it and read it at an optimal speed.

There is where design skills come into play, the challenge is to ensure that the words, sentences, and paragraphs are arranged in groups of words that are given their best chances to jump out of the page.

The responsibility for good readability falls to the designer.

We don’t tend to read individual words; we read using saccadic movements, which means we take in familiar groups of words using rapid eye movements.

Think about the intended use

Achieving a high level of readability doesn’t necessarily require the presence of a highly-legible font.

The common mistake is an inappropriate typeface choice. Some typefaces are designed specifically for text setting, some for display and some for signage.

Using the wrong kind of font doesn’t indicate a bad typeface design; it indicates a bad typeface choice.

Take some time to find out the background of a typeface design before using it in a project and always remember that a font that woks well at larger designs, like a poster, isn’t necessarily going to work in smaller pieces like an article.

Character count per line

The other dominant factor affecting readability is character-count-per-line. Including spaces, an idea count is reckoned to be somewhere between 50 and 75.

If a measure (the length of a line of text) becomes too long, the readers’ eyes struggle to locate the start of the next line in a paragraph.

If it is too short, the reading experience becomes too jerky and loses rhythm.

So, for example, novels require a relaxed rhythm while newspaper columns can be set over a shorter measure because the text is verbally broken into shorter snippets of information.

In the following examples at just over 50 characters per line, the first example scans comfortably from line to line.

In the second example, a wider measure of over 120 characters becomes much harder to locate the start of each subsequent line, creating bad readability.

Optimal line length in web design

In web design, you can achieve an optimal number of characters per line by restricting the width of your text blocks using em or pixels.

Regardless of which one you choose, your layout will have to be in a fixed-width if you want to achieve an optimal line length for the majority of your visitors.

You should have around 60 characters per line if you want a good reading experience.

In mobile devices you should go for 30–40 characters per line.

What is a readability score?

Readability scoring approximates how many years of schooling someone needs to be able to understand your writing.

For example, a Flesch-Kincaid readability score of around 8 is roughly equivalent to a reading level of US grade 8 – ages 13-14.

When text is too difficult or awkward to read, messages may not be engaged with or understood. On the flip side, when writing is too simplistic, your audience might feel patronized or just plain bored.

How to test your text readability

There are some readability tools on line a very good one is:

https://www.webfx.com/tools/read-able/

You can test webpage readability or input your own text.

This article is the first on a series of articles where we will be covering principles of good typographic design, like cases, contrast and color.

The post What is and how to apply readability in your Design appeared first on Designer Freelance.

This technique of line art uses different densities of crosshatching to simulate lighter and darker shades of gray to obtain that look and the result is great.

Crosshatching is the drawing of two layers of hatching at right-angles to create a mesh-like pattern. Multiple layers in varying directions can be used to create different textures.

Crosshatching is often used to create tonal effects like shadows, by varying the spacing of lines or by adding additional layers of lines.

This tutorial achieves a very convincing result and it is really easy to follow, so let’s get started!

Step 1 Creating Edges

a) Duplicate the layer.

b) Apply Smart Blur: Filter > Blur > Smart Blur. In the pop-up mode set to Edge Only. This will produce an inverted line art

c) Invert; Image > Adjustments > Invert

d) Hide this layer, we will use it later

e) Create a white layer above the original background (face)

Step 2 Create the crosshatch Patterns

Let’s create 2 different patterns.

a) Create a new document with a white background

b) Draw a 45 line on a new layer

c) Use: Alt-Shift-Command+the right cursor to create a copy of the line to 10 pixels to the right. Continue until you get a set of strips.

d) Merge the layers

e) Select a square area

f) Create the pattern: Edit > Define Pattern

g) Name the pattern stripes 1

Now let’s create a second pattern

a) Reflect the strips horizontally

b) Repeat the process from letter e

c) Name the pattern stripes 2

Step 3 Create the first layer of shadows line art

a) Duplicate another layer of the background

b) Apply Threshold: Image > Adjustments > Threshold

c) Move the threshold level so you get the layer areas of shadows

d) Open the Layer Style and apply Pattern Overlay

e) Select the first pattern we created

f) In the blend mode of the dialog box select Lighten

g) Scale the pattern till you like it.

h) Convert this layer to a Smart Object: in the layers, dialog box select Convert to Smart Object

i) Set the blending mode to multiply (remember to create the white layer of the letter e from step 1)

Step 4 Create the second layer of shadows line art

a) Duplicate another layer of the original background

b) Repeat step b

c) Now move the threshold level so you get a smaller area of shadows, for instance, the eyes or the lips

d) Open the Layer Style and apply Pattern Overlay

e) Select the SECOND pattern we created

f) In the blend mode of the dialog box select Lighten

g) Scale the pattern till you like it.

h) Convert this layer to a Smart Object: in the layers, dialog box select Convert to Smart Object

i) Set the blending mode to multiply

Step 5 Bring back the line art

a) Move to the top of the layer stack the Edge layer we created in step 1

b) Set the blending mode to multiply

Step 6 Create the Darkest Shadows

a) Create another copy of the original layer

b) Apply threshold

c) Set the level so we only got the darkest shadows, the inner part of the lips for example.

d) Be sure that this layer is on top of the layer stack, set the blending mode to multiply

Step 7 Adding color

You can add color or multiple effects on the image using the original photo.

Place it above all layers and apply overlay. This will create a tint over the crosshatches

It is a very subtle effect that looks very natural.

You can use this kind of effect with any photo but I recommend using it with portraits.

Final result:

References for turn photo into line drawing:

Guide to Shading Techniques: Hatching, Cross-Hatching, Scribbling and Others 

Follow my blog with Bloglovin

The post How to turn photo into line drawing with Photoshop appeared first on Designer Freelance.

Creating your own maps is great because you can customize them according to your project and you don’t have to worry about the copyrights.

How to Draw a Map in Illustrator?

Step 1 Create the principal avenues

a) Draw the principal avenues. Make sure your path is set to have a stroke but no fill. Use the pen tool to draw the lines.

b) Select al the lines and set a big stroke. For this map, I’m using 22pt.

c) Duplicate the layer. Lock the original layer and in the duplicate change the color of the stroke to yellow.

d) Reduce the stroke of the yellow path; in this case, we are using 16 pt.

It is very important to name your layer so you don’t get lost

Step 2 Create the secondary roads

a) Create a new layer and repeat steps all the process using smaller values and a white color instead of white.

b) In this example, we are using 16pt to the black path and 11pt for the white path.

c) Order your layers. You should order it this way:

1. Principal Roads Yellow

2. Secondary Roads White

3. Principal Roads Black

4. Secondary roads Black

Step 3 Create the background Detail

In this step create the large areas as parks, buildings, landmarks, etc. This should be a layer behind all the Road layers.

Step 4 Add the road names.

a) Duplicate the Principal yellow Road and name it text principal

b) Lock all the other layers

c) Click on the road with the text tool, this will create a line text that follows the path

d) When placing the text adjust the baseline. In the character panel, adjust it so its place in the middle of the path.

e) Add all the street names.

Now you can add some effects, for example in the principal roads add a little shadow.

Viesearch – Life powered search

The post How to Draw a Map in Illustrator appeared first on Designer Freelance.

It is our responsibility as designers to help the client understand the difference between professional design and one that is not, and also explain the creative process that leads a project. The customer does not have to know all this.

The following steps to write a professional design proposal can be adapted to multiple design projects: graphic, printed and digital. 

Part 1. Introduction and presentation.

Dear Mr. X

Company name

Address:

Thank you to consider our services to develop your_____________ that it will not only be versatile, attractive and with great quality, but becomes a true nexus of interaction with your customers.

In (name of your company) we evaluate each project in detail and propose the most appropriate solutions for your needs and goals.

The following quotation is a general proposal, if you have questions and comments please feel free to contact us, The ideas of our customers will enrich our work.

Part 2 Brief or Description of the project

In this part, we describe as clearly and with as few words as possible, exactly the project we are going to develop to erase any doubt in the client or us. This is an opportunity to clarify that we understand exactly what our client requires:

Description

(example) Redesign of corporate brochure

• This design will not use any elements of previous designs and brochures.
• We seek a fresh design that reflects the new phase of this company, to supply both the current market for the company and the potential market.
• It will be of great importance to highlight the new 40,000 meters of warehouses.

Part 3 Features

Here we describe exactly what we design, how many pages, what includes or excludes our design. This is also very important for the mental health of the client and ours

• Corporate Brochure, 8 pages.
• Includes retouching photographs supplied by the customer
• The client will provide the texts
• 5 proposals.

Part 4 Delivery

We briefly detail the time it will take the work development.

Draft 1:

3 proposals day / month / year

Draft 2:

Proposal selected with two applications of color day/month/ year

Photo retouching day/month/ year

Draft 3

Final concept for evaluation of corrections day / month / year

Brochure Final day / month / year

Estimated time x weeks

Part 5 Pricing, Values and payment

Once you clearly describe the project you can set the price.

It is very important to always specify the method of payment.

Project Total price $

Payment

50% upon signing of the contract and 50% upon delivery of the finished project.

Urgent Delivery

If you require an urgent delivery time will have a total price increase of 30%

Setting a price is always a delicate point, but I recall articles related to this:

How and how much to charge for Graphic Design

Part 6 Conditions

In this section, we specify special conditions. For example the delivery of materials by the client:

It is your responsibility delivery of materials (pictures or text) any delay in delivery of materials will delay the final delivery of the brochure.

Part 7 Close

Finally, we close the proposal:

We hope that this proposal meets your expectations and needs. If you have any questions and comments please feel free to contact us.

Contact

Name:

Telephone

Contact email:

Sincerely

Javier Z. – Graphic

Annexes

As appendices I recommend include examples of your work preferably with links that point to them.

You can also include a description of your office or agency, with a resume of your experience and your team

External resources:

Design Quotation samples and downloads

The post How to write a professional Design Proposal appeared first on Designer Freelance.

With this technique, you will be able to mask even the most complicated images like the hair of a model. For this tutorial, we will use an image with some complexities like the hair and the shape of the model face.

For perfect masking we usually have to use more than one method, in this case, we will use calculations and pen tool.

Let’s start.

Before We Get Started

For this tutorial you are going to need:

Model

http://www.sxc.hu/photo/1210353

Back Ground

http://www.sxc.hu/photo/1309046

Step 1 Create a new channel using Calculations

This tool merges two channels for creating a new one. This is great because we can create a new channel that contrasts the model and the background.

a) Open your image and double click on it in the layers palette to make it editable

b) Select the channels palette

c) Select Calculations in the top menu: Image > Calculations

d) This tool merges two channels for creating a new one. Usually, we select the red one above and the blue one below. In this case because of the contrast between the hair and the sky we will select the Green channel above and the blue below.

e) Now for the mask to work, we need that the inside of the model is complete with background black, so we select invert the blue channel

f) Now we set the blending mode to subtract with a 100 percent offset (90% of the cases you will use this blending mode)

g) Select Ok to create the new channel. This will appear in the channels palette as Alpha 1

As you can see all the hair strains are perfectly white and insolated.

It is very important to notice that these are the settings for this particular image. Every image is different so according to the case you will have to play with the settings like the channels or the blending mode to achieve the best mask.

Step 2 Creating a path for the face

Now as you can see certain areas of the face and part of the neck and body are not perfectly white.

Since this is made of curves we can use the pen tool for this area

a) Deselect the new alpha 1 channel, select the RGB

b) Create a new path using the pen tool following the face contour and selecting parts of the head, neck and body

c) For this tutorial we are assuming you are familiar with the pen tool. In case you are not next week we are going to publish a tutorial specifically for the pen tool.

d) Select path in the palettes and in the options select make selection

e) Enter a feather radius of .5 pixels

f) Return to the alpha channel (select only this channel) and paint this mask with white.

Step 3 fine adjusting

We still have some areas like gray or with small part of white, and it should be perfectly white and black

a) Select a soft brush

b) Set the mode of the brush to overlay, if you select a white color it will only paint in the white parts, not painting the black ones (important the brush must be set to overlay)

c) Now select a black color to fine paint the black parts

d) Your channel should look like this:

Step 4 Create the mask

a) Deselect the alpha 1 channel and select the RGB

b) Return to layers

c) Load the selection, in the top menu: Select > Load Selection

d) Select the Alpha Channel 1 and click on invert

e) Now delete the background

Step 5 Fine adjusting hair

Now we have some fringe (blue color in the hair) caused by the blue background, there are different forms to correct this.

a) Create a new layer

b) Load the alpha channel mask (Repeat C and D from step 4 but DON’T SELECT INVERT this time)

c) Remove the inner part of the mask (face and neck) you can do this using the polygonal lasso selecting subtract from the selection.

d) Using the eyedropper sample some color of the hair and paint the selection with this color

e) Soft the inner part of the mask using a soft brush with the eraser tool

f) Set the blending mode to color

g) Duplicate this layer and set the blending mode to overlay at 35%

Now we can use any background and we have all of our hair even the thinnest strings.

The next part of this tutorial will be done with a blond model because the calculations change.

Other methods:

Content aware fill

How to remove the background of an image: Magic Wand

The post How to cut out hair in photoshop – Advanced masking method appeared first on Designer Freelance.

In SEO we always say that content is King, well this blog has very good content.

It is clearly a blog for young women, but the articles are not what you would expect. 

The first article I read was about productivity from a Stoic point of view, really refreshing in a women blog. The second article was about how to read a wine label, really good information.

The blog has a good variety of themes, relationships, cooking, productivity, art finances, all the themes that you would expect to read in a women magazine, but the twist is that everything is written from a stoic point of view, really, really mature.

Their about page inspired me:

The Art of Being Women is a project that seeks to help young women find their way through life; celebrating femininity and recognizing the true struggles and the mastery involved in the art of being women.

We strongly believe that women do not need to have a stereotype of beauty to be pretty or a specific skill to be smart. And that is the goal of The Art of Being Women to teach women skills to make them better. Better daughters, better sisters, better entrepreneurs, better moms, better wives, better humans!

Mastery…good word.

As a man, I liked the articles and learned a couple of things.

The design of the blog in spite of using a WP theme, it shows that takes good care of the logos, the fonts, the colors. It is very clean and very pleasing for reading.

I recommend very much this blog, a definitive add in my reading list.

The post Art of Being women, a gorgeous blog appeared first on Designer Freelance.

Step 1

Create a new document

Step 2

Open de Gradient editor and create a black and white gradient with a narrow gray area

Step 3

Paint the document with a linear gradient

Step 4

Apply difference Clouds: Filter > Render > Difference Clouds

Step 5

Apply levels: Image > Adjustments > Levels

Set the levels as follows:

Step 6

Inverse the image: Image > Adjustments > Invert

Step 7

Create a new layer and paint it with a blue gradient

Step 8

Set the blending mode to overlay

Select a soft, big round brush and paint some lights with a red or a violet color

Now you got a super easy and realistic lightning bolt

External resources

lightning bolt Pictures

The post Create a super easy lightning from scratch appeared first on Designer Freelance.

The most interesting happens when the positive and negative space competes because then hidden images appear. It is a resource widely used by the perceptual principles of Gestalt.

In graphic design, this concept very is useful, since it manages to capture attention easily.

The key is simplicity.

This type of design is considered as a “resting place” for the eye, so it increases the attractiveness of the composition through very subtle means.

Also known as blank spaces, it is considered as a hidden message that is intended to be transmitted in the design of both posters and logos.

Good use of the negative space is done by choosing the right colors, the correct typography, the shadows, gradients, and the perfect shapes.

A good design is one that in addition to transmitting a clear message seen with an obviousness, captures more deeply the creative concept giving a second message or several, taking advantage of all the spaces within the design.

The message is about giving in a subliminal way it must be done with creativity and intelligence, with the objective that the consumer or user translates the message correctly.

Design is not about clogging the spaces or leaving them empty without transmitting, they should take advantage of all the lines and give them a correct use.

The negative space also creates balance and harmony, attracts attention and is attractive.

It is a space considered as the key element in a good artistic composition.

Some examples of negative space in logos:

Negative space should not be confused with White Space.

White Space is the area (on digital or paper) where you put your content to design whereas white space does not try to communicate or provide any meaning and it tries to give breathing space for your design.

White spaces should be used everywhere and giving the right amount of white space based on the size of the document. It also gives good readability and easy understanding and navigating. Cluttering in the design should be avoided.

White space examples:

External resources:

https://en.wikipedia.org/wiki/Negative_space

Gestalt White Space

The Contrast: support of the form, figure ground tension and relationship

The post Understanding and using Negative Space in Design appeared first on Designer Freelance.

The goal of every poster is the communication of a message, but to be able to communicate that message, first, you have to do something, in my opinion, much more important: to attract attention.

A poster is a temporary promotion of an idea, product or event put up in a public space for mass consumption. Typically, posters include both textual and graphic elements.

Posters are designed to be both eye-catching and informative. World Cup Poster are a great example because they not only have to grab the attention, it represents a particular period in the history of design. 

Uruguay 1930

Italy 1934

France 1938

Brazil 1950

Switzerland 1954

Sweden 1958

Chile 1962

England 1966

Mexico 1970

West Germany 1974

Argentina 1978

Spain 1982

Mexico 1986

Italy 1990

United States 1994

France 1998

Korea Republic & Japan 2002

Germany 2006

South Africa 2010

Brazil 2014

Rusia 2018

Which is your Favorite?

The post World Cup Poster History appeared first on Designer Freelance.