Diseño de un boletin para correo elctronico de tematica navideña.pdf

8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf

1/31

Categories Learning Guides

Design & Illustration

ADOBE PHOTOSHOP

Designing a Christmas EmailNewsletter in Photoshopby Tomas Laurinavicius 1 day ago 1 Comment
http://design.tutsplus.com/categories/adobe-photoshophttp://tutsplus.com/authors/tomas-laurinaviciushttp://design.tutsplus.com/http://design.tutsplus.com/serieshttp://design.tutsplus.com/categorieshttp://tutsplus.com/


2/31


3/31

What You'll Be Creating

In this tutorial Ill guide you through the process of designing a clean and festive

themed email template. Well start off totally from scratch, drafting the layout with

Adobe Photoshop. Well be using some basic and intermediate techniques to create

this design with conversion in mind. Lets get it started!

Tutorial Assets

In order to follow along you will need some (freely available) assets:

Open Sansfont from Font Squirrel

Playfair Dislayfont from Font Squirrel

Bokeh of String Lights on Treephoto from Good Stock Photos

New Years quotefrom BrainyQuote

Get the Document Ready

Step 1

Begin by creating a new Photoshop document (File > New) using the settings

shown below. The majority of email newsletters have a defined width of around 620

total pixels. I usually use 600px, but anything below 620px is fine. When this is built

in HTML it might well be responsive anyway.
http://www.brainyquote.com/quotes/topics/topic_newyears.htmlhttp://goodstock.photos/bokeh-of-string-lights-on-tree/http://www.fontsquirrel.com/fonts/playfair-displayhttp://www.fontsquirrel.com/fonts/open-sans


4/31

Step 2

Lets set some guides so we have our safe area designed within the bounds of

620px width. Go to View > New Guideand set some guidelines on the sides as

well as a guideline in the middle so we can easily align things later.

Note:Guidelines used for this tutorial: vertical at 40px, 80px, 340px, 600px and

640px.

Tip:You could also use the GuideGuidePhotoshop plugin to make this process

even quicker.
http://design.tutsplus.com/articles/setting-a-baseline-grid-with-guideguide-for-photoshop--webdesign-7992


5/31

Step 3

Sticking to Photoshop etiquettewell keep things organized and therefore easy to

navigate and edit. Lets create three layer groups named Header, Message,

Best and Quote. To create groups go to Layer > New > Group and give each

one a title as mentioned. For quick creation of a group just click the folder icon.

Preparing the Background
http://photoshopetiquette.com/


6/31

You shouldnt make your background too fancy or distracting as many email users

wont see it on smaller screens. Also worth mentioning is that the background

shouldnt be an image as it will be blocked by default on many email clients.

Step 1

Lets first set the background of the email. Change the foreground color to very light

blue #f6f9fb and hit Alt+Backspaceto fill the Background layer. You can use any

other light shade for your email but it is better to have this subtle color that doesnt

distract the recipient but still creates a different mood.

Step 2

Now its time to set a background in the safe area where all email content will be put.

Pick the Rectangle Tool (U)and draw a white #FFFFFF rectangle between the first

and last vertical guidelines that are 600px apart.


7/31

Designing the Header

The header of our email is very important and is the crucial point where the email

recipient will decide if reading further is worth their time. According to this guideby

Nicole Merlin, email expert extraordinaire, it is important to be clear and transparent.

State the sender, cut the fluff and get straight to the

point.

For this tutorial I will simply put a company name and a link for people to open the

email in a web browser in case it doesnt load properly via the email client.

Additionally, I will include a huge image with simple messaging setting the mood and

showing the intentions of this email, which is about wishing happy holidays.

Step 3

Open up the Header group and pick the Horizontal Type Tool (T). You may find

it better to write your company name rather than use a logo because, as Ive

mentioned before, images may be disabled when your email is opened so it can ruin

the experience because your logo wont be visible.
http://webdesign.tutsplus.com/articles/the-complete-guide-to-designing-for-email--webdesign-12941


8/31

Pick a font that you use for your brand and write your company title, place it on the

left top side and give it some space around. In my case I used Open Sans (Bold)

18pxsize dark grey #434343 for the color.

Step 4

It is very important to provide a link that people can click or tap on and open the

email in their browser in case it doesnt render very well in the email client. Just a

simple text link will do the job, placed early on so screen-readers encounter it

straight away. Ive used the same Open Sans (Semibold)font and changed the

color to brighter grey #666666 and reduced font size to 13px. Finally place it in the

right top corner of the email.


9/31


10/31

Now make the gradient by dragging your mouse from top left to bottom right. You will

get something like the example below.

Step 6

After that download Bokeh of String Lights on Treephoto from Good Stock Photos

and place it over the gradient layer creating a Clipping Maskfor this layer too. Finally
http://goodstock.photos/bokeh-of-string-lights-on-tree/


11/31

hit CMD+Tand resize the photo.

Pro tip: hold down Shiftkey to draw/resize proportionally.

Step 7Now set the layer blending mode to Overlay.


12/31

Step 8

Finally lets write our main message. Im using white #FFFFFF with the bold, yet

elegant typeface Playfair Display (Bold Italic) 52pxsize to portray the festive

feeling. When designing email newsletters make sure to keep your message short

and clear so users get it right away.


13/31

Designing the Message Area

Another thing that you should keep in mind is designing blocks that can be re-used.

For example well design this message block that can be turned into a template so

users can change the headline, main copy and call to action button without the need

of a designer because everything will be pre-designed. Also they can duplicate such

a block and use different messages.

Step 9

It is smart to design your emails in one column and centrally aligned so it can be

made into responsive layout easily. Open up the Message group and pick

the Horizontal Type Tool (T).Ill be re-using the type layer used for the companytitle and will increase the font size to 32pxand change weight to Extrabold.


14/31

Step 10

Now its time to say something in more detail, dont be too long and try to grab

readers attention, leading the reader to click the call to action button well design in

a moment. Using the same Horizontal Type Tool (T)write down your copy, for mine

Ive used the same color as for the Open in browser link #666666 and Open Sans

(Regular) 18pxsize.


15/31

Step 11

Awesome! You have the readers attention and now its time to put a call to action

button so your email leads somewhere useful. Create a new group called CTA and

grab the Rectangle Tool (U), after that change foreground color to a red #de1816

that represents the Christmas mood and draw a rectangle shape. In my case it is

240x40pxsize. Then pick the Horizontal Type Tool (T)and enter the buttons

message. Ive used white #FFFFFF Open Sans (Bold) 14pxsize.


16/31

Finally we need to close the block by separating it with a line; set the foreground

color to light grey #eeeeee and pick the Line Tool (U)with Weightset to 1px. After

that draw a horizontal line between the first and last guidelines. Leave some space

above the line.

Pro tip: hold down Shiftto draw perfectly straight lines.


17/31

Designing the Best of Area

One very common feature in email digest newsletters is sending out latest articles

that readers may have missed or would be interested in. When designing such a

module you need to keep in mind that it is going to be a dynamic element so you

need to set up the scene leaving the email creator to replace the information.

Step 12

Duplicate the previously used message headline layer by hitting CMD+Jand

dragging it into the Best group. After that, change its title and place it below the line

consistently, so you maintain vertical rhythm.


18/31

Step 13

Now well list out some best articles of the year. For this tutorial Ill simply use article

images, titles and descriptions from Tuts+ Web Design.

Create a new group called Article. Grab the Rectangle Tool (U)and, holding down

the Shiftkey, draw a 140x140pxsized box. Then pick an article image and drag it to

your Photoshop window, after that create a Clipping Maskas we did before and

resize the image if needed.
http://webdesign.tutsplus.com/


19/31

Step 14

Great! Now we need to enter the article title and short description so the reader can

get a quick overview before clicking or tapping. Ill re-use the section headline layer

by duplicating it and reducing the font size and also duplicating the description layer

from the Message group.


20/31

Step 15

Minimize the Article group and duplicate for two more times by hitting CMD+J. After

that move these duplicated groups below the first one and you will need to change

the titles, images and descriptions of these duplicated elements.


21/31

Step 16Finally duplicate the CTA group and line layer by selecting them and hitting

CMD+J, after that move these layers into the Best group and place them below the

articles leaving enough space.


22/31

Designing the Quote and Footer

The end is very near. Lets put a final block in our newsletter, an inspiring quote with

a secondary call to action to tweet it. Best practice is to repeat the main call to action

at the very end of the newsletter, but we will break this rule here and use an inspiring

quote to energize the reader.

Step 17

Open up the Quote group, pick the Horizontal Type Tool (T)and any quote you

like from BrainyQuote. Copy the quote and write it down using the same elegant

typeface weve used for the graphic at the very top of our newsletter. In my case it isPlayfair Display (Italic) 24pxsize and grey color as used for the copy #666666

earlier.
http://www.brainyquote.com/quotes/topics/topic_newyears.html


23/31

Step 18

Head over to the Twitter websiteand copy a tweet button. Take a screenshot by

hitting Shift+CTRL+CMD+4and selecting the Tweet button. After that paste it and

place below the quote.
https://about.twitter.com/resources/buttons#tweet


24/31


25/31

Congratulations!


26/31


27/31

Our finished design

Thats it! Were done with the email layout design, now review the layers, delete the

unnecessary ones and hand it over to your developer, or even better code ityourself. Ive touched upon some basic techniques and demonstrated my workflow

for designing email layout, I hope youve learnt something.

Id love to hear your feedback and see the outcomes of this tutorial!
https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770


28/31

Suggested Tuts+ Course

Related Tutorials

Difficulty:

Beginner

Length:

Medium

Categories:

Adobe Photoshop Email Conversion

Translations Available:

Tuts+ tutorials are translated by our community members. If you'd like to translate this post into another language,let

us know!

Download Attachment

About Tomas Laurinavicius

Adventurous designer and entrepreneur. Editor-in-chief at Despreneurand Product Manager of Refe. Co-

author of Mobile Design Book. Currently traveling the world.

Designing and Publishing Websites With Adobe Muse Free

Design an Elegant Gratitude Log Landing Page With Photoshop

Web Design

Designing a Web App UI Kit in Adobe Photoshop
http://webdesign.tutsplus.com/courses/designing-and-publishing-websites-with-adobe-muse?utm_source=Tuts+&utm_medium=website&utm_campaign=suggestedcoursevideo&utm_content=sidebar&WT.mc_id=Tuts+_website_suggestedcoursevideo_sidebarhttp://mobiledesignbook.com/http://getrefe.com/http://despreneur.com/http://tutsplus.com/authors/tomas-laurinaviciushttps://www.formstack.com/forms/envato-tuts__translate_a_tutorial?link%20to%20tutorial=http://webdesign.tutsplus.com/tutorials/designing-a-christmas-email-newsletter-in-photoshop--cms-22857https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/posts/22857/attachment/xmas_email.psd.ziphttp://design.tutsplus.com/categories/conversionhttp://design.tutsplus.com/categories/emailhttp://design.tutsplus.com/categories/adobe-photoshophttp://webdesign.tutsplus.com/tutorials/designing-a-web-app-ui-kit-in-adobe-photoshop--cms-21963?utm_source=Tuts+&utm_medium=website&utm_campaign=relatedtutorials&utm_content=sidebar&WT.mc_id=Tuts+_website_relatedtutorials_sidebarhttp://webdesign.tutsplus.com/tutorials/design-an-elegant-gratitude-log-landing-page-with-photoshop--cms-22787?utm_source=Tuts+&utm_medium=website&utm_campaign=relatedtutorials&utm_content=sidebar&WT.mc_id=Tuts+_website_relatedtutorials_sidebar


29/31


30/31

18,812 Tutorials 455 Video Courses

2 Comments

Nelly Rahman

the final touch are really awesome. thanks

kuritooop

its awesome

Teaching skills to millions worldwide.

Follow Us
https://www.facebook.com/tutsplushttps://twitter.com/tutsplushttp://www.pinterest.com/tutsplus/https://plus.google.com/108971748263060947124/postshttps://twitter.com/tutsplushttps://www.facebook.com/tutsplushttps://disqus.com/home/user/kuritooop/https://disqus.com/home/user/nellyrahman/https://help.disqus.com/customer/portal/articles/1657951?utm_source=disqus&utm_medium=embed-footer&utm_content=privacy-btnhttps://disqus.com/websites/?utm_source=tutshub&utm_medium=Disqus-Footerhttp://disqus.com/https://disqus.com/home/user/kuritooop/http://design.tutsplus.com/tutorials/designing-a-christmas-email-newsletter-in-photoshop--cms-22857#comment-1754414256https://disqus.com/home/user/nellyrahman/http://design.tutsplus.com/tutorials/designing-a-christmas-email-newsletter-in-photoshop--cms-22857#comment-1756505952https://disqus.com/home/inbox/https://disqus.com/home/forums/tutshub/https://disqus.com/home/discussions/tutshub/designing_a_christmas_email_newsletter_in_photoshop/


31/31

Custom digital services like logo design, WordPress installation, video production

and more.

Check out Envato Studio

Choose from over 5 million royalty-free photos and images priced from $1. No

subscription required.

Browse Photos on PhotoDune

Help and Support

FAQ

Terms of Use

Contact Support

About Tuts+

Advertise

Teach at Tuts+

Email Newsletters

Get Tuts+ updates, news, surveys &

offers.

Email Address

Subscribe

Privacy Policy

2014 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
http://www.envato.com/http://tutsplus.com/privacy-policyhttp://tutsplus.com/teachhttp://tutsplus.com/advertisehttp://tutsplus.com/abouthttp://tutsplus.com/supporthttp://tutsplus.com/terms-of-usehttp://tutsplus.com/faqhttp://www.pinterest.com/tutsplus/https://plus.google.com/108971748263060947124/postshttps://twitter.com/tutsplushttps://www.facebook.com/tutsplushttp://photodune.net/page/top_sellers?ref=tutshub&utm_source=tutsplus&utm_medium=footer&utm_campaign=tutsdesignhttp://studio.envato.com/?utm_source=tutsfooter&utm_medium=banner&utm_campaign=tutsfooter

Diseño de un boletin para correo elctronico de tematica navideña.pdf

Documents

Transcript of Diseño de un boletin para correo elctronico de tematica navideña.pdf