-
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/ -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
2/31
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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 -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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 -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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/ -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
9/31
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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/ -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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/ -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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.
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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 -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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 -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
24/31
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
25/31
Congratulations!
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
26/31
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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 -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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 -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
29/31
-
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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/ -
8/10/2019 Diseo de un boletin para correo elctronico de tematica navidea.pdf
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