How to Design a Website Header Image in Adobe Muse CC

You asked for it – so here it is! A little free training and a sneak peak into the very website design I will be providing every one of my students who enroll in Designing Websites in Adobe Muse CC online course.

Today I will be showing you how to design your very own website header image (also known as a hero image) in Adobe Muse CC. This specific tutorial will go over everything you need to know to obtain your own high-quality photograph as well as create a colored block overlay that looks beautiful on top of the imagery you choose for your own website background hero image.

Click to go to Creative Market

I hope you enjoy this quick 15-min tutorial, and you find it extremely useful to use. Once you create your own hero image for your website – please feel free to share in the comments section below!

Also, if you’re interested in the online training course where I will teach you how to design your own website from start to finish – then sign up for the waiting list by entering your name and email in the form below. Enrollment opens soon!

p.s. I noticed (the moment after I finished recording the tutorial) that the slider needs shifting to the right a bit so it is aligned in the center. It must have gotten bumped when I was working on the tutorial.

Handy Image Dimension 2014 Guide For Use With Facebook

Handy Image Dimension 2014 Guide For Use With Facebook

Keeping up with Facebook imagery sizing can be a challenge as Facebook is constantly updating, revising, and tweaking their user interface – and rightfully so! It is their job to create the best user experience for all of those on Facebook and it is our job as designers and business owners to keep up with their updates so that our visual social web portrayal appears both polished and professional for our audience.

So, with that being said, I put together a handy little guide that you can reference for updating your Facebook business page, creating timeline posts, as well as advertisements across Facebook.

Handy-Image-Dimension-Guide-Facebook

 
Facebook Business Fan Page Sizing Dimensions:
Cover Photo: 851px by 315px
Profile Picture: 160px by 160px
Timeline Photo: 504px by 504px

Facebook Advertisement Sizing Dimensions:
Ad Image: 1200px by 627px

Is your Facebook page updated yet?

Visit my finished page by clicking here.

Feel free to share your newly updated business pages too in the comments section below!

 

Learn How to Design Your Own Landing Page in Adobe Muse CC

I designed a simple one page landing page in Adobe Muse of which I want to share with you today so that you can make your own too! I recorded the whole process from start to finish as a video tutorial. I hope you enjoy it!

Check out the finished landing page by clicking here!

To download a free 30 trial of Adobe Muse, simply click here.

To check out many more subtle patterns, like the one I used in my tutorial, visit their website by clicking here.

How to Design a Facebook E-Card for Christmas in 8 Easy Steps [2 FREE PNGs Included]

How to Design a Facebook E-Card for Christmas in 8 Easy Steps [2 FREE PNGs Included]

As we draw nearer to Christmas, sending out the traditional holiday cards may have somehow slipped through in the hustle and bustle of this holiday season. There’s no need to stress, because you can opt for a quick and easy new-fangled tradition of sending holiday e-cards to your friends and family on Facebook by posting to their timeline or through a personalized Facebook message.

Click here for an instant download! and you’ll receive a bundle of the following two e-cards for you to send as you please to all of your Facebook friends.

Download Your Own Holiday E-Card for Free & Send to your family and friends over Facebook!

Below I will show you how to design the first e-card within the 2 card bundle:

1. Open Illustrator and Set the Dimensions
Open Illustrator CC. If you don’t have Illustrator, you can download a free trial here. Set the dimensions to Facebook’s current timeline dimensions of 505px x 380px.
Facebook E-Card 1

2. Draw a Rectangle & Fill with the Color of Your Choice
Draw a rectangle to fill the full artboard you just created. I chose a soft blue color at RGB 139,187,187.
Facebook E-Card 2

3. Create a Decorative Text Frame for Your Text
The next thing I did was created a pretty frame for my text with the pen tool using a series of anchor points. I chose the RGB fill color of 249,244,225. I placed a stroke of 8 around the decorative frame in the background blue color.
Facebook E-Card 3

4. Insert Desired Text
For this e-card, I used the font Lavanderia and chose a deep red color with the RGB value of 187,57,57. I then converted the text to outlines.
Facebook E-Card 4

5. Design Decorative Elements
For the ground blanketed in snow, I created a slope using the pen tool and I filled it with the same creamy white I used for the decorative text frame.
Facebook E-Card 5

For the trees, I simple designed a triangle using the star tool within Illustrator and defining the number of points to 3. I then brought out the top anchor point until the triangle reached my desired shape I was after. I filled the trees in with the a soft green using the RGB value of 159,170,82.
Facebook E-Card 6

Facebook E-Card 7

Facebook E-Card 8

6. Design the Falling Snow Pattern Swatch
For the softly falling snow, I created a pattern swatch. To create a swatch, the first thing you need to do is select a pixel area that you would like to work with. To do this, simply draw a square with the rectangle tool and set the fill and stroke to none. Within this area, use the circle shape tool and place various circles of different sizes within this square. The idea of this area is that it will serve as the space that repeats itself as the seamless pattern for your whole card.

Facebook E-Card 9

Once you have the snow the way you would like it to look within the square you have drawn, go ahead and select the full square, including the circles and drag this whole set of elements directly into your swatches panel that is located at the right hand side of my workspace. This will create a new swatch in your panel.

Facebook E-Card 10

With the new pattern swatch selected, go ahead and draw a rectangle across your full artboard. You will see that the snow pattern you just created now spans across your full card as a beautiful seamless pattern.

7. Put on the Finishing Touches
For the finishing touches, I brought the text and text frame to the front of my art board so that the falling snow is set behind both elements. I did this by selecting both the text and text frame at the same time and then navigating to the top of my screen and selecting Object > Arrange > Bring to the Front. I then added a snowglobe-like base using the same red that was used within the text.

Facebook E-Card 11

8. Save and Export file as a PNG and POST!
The next thing to do is save your Illustrator file as the master file that you will then be able to come back to later if you would like to edit anything. To save the file for sending on Facebook all you have to do is navigate to the top of your screen and select File > Export. Name your file, checkmark the Use Artboard box, then select which artboard you are using (1), and then set it to save as a PNG file and then go ahead and click on the “Export” button. Select the resolution to Medium (150ppi) / and the anti-aliasing to “Art Optimized (Super Sampling)” with a background color of white. Click “OK”.

Facebook E-Card 12

Facebook E-Card 13

Congratulations! Your E-Card is now done and ready for posting to all of your Facebook friend’s timelines!

To be sent the 2-pack of e-card designs to send out to your family and friends, simply click here for an instant download!

Terms of Use
These cards are for your personal use only. They are not to be sold in whole or in part. The font is available for free personal use download and paid commercial use download here.

How to Design Your Own Holiday Card [FREE Template Included!]

How to Design Your Own Holiday Card [FREE Template Included!]

It’s that time of year again here in Kansas City! The wind is blistering, the lights are twinkling, people are excitedly hustling around to find that perfect present for everyone on their shopping list, and to top it all off, the Christmas cards are stuffing the mailbox full with holiday cheer! Have you sent your cards out yet? If you haven’t then don’t worry because it’s not too late! You could even go ahead and make your very own for an incredibly special and personal touch.

Today I’m going to be showing you how you can design your own Christmas card in Adobe Photoshop CC. I’m also offering you a free Christmas card template for you to customize, print and then send to all your family and friends this holiday season. You’re going to love it! You’ll be sure to have people ooooing and awwwwing all over your card at your next holiday gathering.

Example of Your Holiday Cards

How to Design Your Own Holiday Card in Adobe Photoshop

1. Open Photoshop
If you don’t own Adobe Photoshop CC you can download a free 30-day trial from Adobe’s website by clicking here

2. How to Choose & Specify Your Dimensions
Go ahead and specify the dimensions you would like for the card. For this tutorial, I have decided to go with a horizontal landscape format and have set my dimensions for a 5×7 inch card. Since I am designing a folded card, this means I need to set the dimensions for 10x7in so that when it is folded, the card will be 5x7in.

File > New > 7in width, 10in height, 300 resolution, CMYK color mode > “OK”

Step 1 - Set Your Dimensions

3. How to Find the Middle of Your Card
Find the middle of your card by first choosing the rectangle tool on your tool bar (left on my screen, 18th tool from the top), then click anywhere on your document and a box will come up that will ask you what you’d like the dimensions to be for the rectangle. Set the dimensions to 7in wide and 5in high. Click “OK”. Move the rectangle so that the top of the rectangle is flush with the top of your art space.
Find the Middle of Your Holiday Card

4. How to Bring Down Your Guide Lines
All you need to do here is first make sure that your guides and rulers are on.
Ruler: View > Rulers > Select / shortkey: Command + R
Guides: View > Show > Guides > Select / Shortkey: Command + ;

Go to the top of your page where your ruler is, click and drag down from the ruler to create your guide line. Drag it all the way down to where it “clicks” to the bottom of rectangle you have placed back in step 3.

Bring Down Guides for Your Holiday Card

Repeat this process 4 times so that each side of your card has a guide that is snapped to it.
Bring Down Guides for Your Holiday Card

5. How to Set Your Bleeds
Image > Canvas Size
A dialogue box will appear of which you should select the following: and then click “OK”
Create Bleeds for Your Holiday Card

6. Prepping your image
Determine which high-res image that you’d like to use. Bring the image into Photoshop by dragging it into the icon on your dock or desktop. Check the image size to be sure that the size of the image you are using is greater than or the same size as the desired output.

Image > Image Size

If the image you have selected checks out, then you’re set for the next step. If not, then it is recommended that you find an alternate image that is of a higher resolution. If you choose not to, there are chances that the image you have selected may turn out to be pixelated or blurry upon printing. However, you can usually get away with any resolution between 250-300dpi/ppi.

To change the image to the correct size for your card – use the crop tool which is located on my screen as the 5th tool from the top on the tool bar. Once you have the tool selected, set the dimensions and resolution that you would like to crop your image to. Since the image size we need is 7.25in width x 5.125in high, put those dimensions into the boxes and then specify the resolution to be 300dpi. Click and drag across the image to crop the image to your liking.

Step 6 - Crop

7. How to Insert Your Image

Copy the image from the single image photoshop file and then paste it into your card design file. Drag the image to sit flush against the bottom of your art space on top of the bleeds. Hit “ENTER” or the check mark on the top right of your screen.

Step 7 - Inserting Your Image

8. How to Eye-drop a Color and Make a Color Swatch
Now that you have your image in place, you can use a color from within your image as the dominant color for your card. Use the eyedropper tool that is located as the 6th tool from the top on my screen. With the eyedropper tool, hover over your image until you find your desired color.

Step 8 - Eyedropping a Color and Making a Swatch

Next, add this color as a brand new swatch to use it later on for your card.

Making a new color swatch is very simple to do. With the color you just eyedropped showing in the foreground color (3rd icon from the bottom in the toolbar), go ahead and navigate to your swatches panel and click on the square icon next to the trash can. Once you have done this, you can name your color and it will be added to your swatches panel.

I have chosen a maroon color that was taken from the sweater I am wearing within my image. This color will pair very nicely with the orange-gold color I will also be introducing later on.

Step 8 - Eyedropping a Color and Making a Swatch

9. How to Colorize the Back Side of Your Card
Make a rectangle that starts at the top left hand corner of your bleeds and drag the rectangle out to the bottom right corner of the middle guide you have set for your card.

Step 9 - Colorizing the back side of your card

10. How to Insert Decorative Elements from Illustrator into Photoshop
It is simple to add decorative elements into your card design from Adobe Illustrator. Open your pre-made .eps or .AI or .svg file in Illustrator. Next, select the decorative vector graphic that you would like to use and copy it into your Photoshop file. (Cntrl + C with the selection in Illustrator and then Cntrl + V into your Photoshop file). You will then have the option of pasting your image as a smart object, pixels, path, or shape layer. For your needs here, choose “pixels”.

Step 10 - Decorative Elements File

Step 10 - Place Element as Pixels

Once your decorative element is placed, you can move it to wherever you’d like within your design and then click the white check mark at the top right of your screen, or simply hit “enter”.

Step 10 - Drag and Enter

Repeat this process for all the imagery you’d like to bring in from Illustrator.
Step 10 - Add Bow & Tag

11. How to Make a Gradient
To make a gradient frame to put on top of your main image, start by making 2-3 lighter colored swatches by eye-dropping different shades of gold from the bow design. Once you have your swatches made, select the gradient tool which is located as the 12th tool from the top of the toolbar. Sometimes the gradient tool is hidden underneath the paint-bucket tool. To select the new tool, simply press down on the tool button and hold until the other tools appear of which you can then choose from. This applies to any tool that you need that isn’t currently being displayed on your toolbar.

After you have the gradient tool selected, you can make your own gradient. To do this, simply go to the top left of your screen where the current gradient is displayed. Double click on this box. You’ll then see a box that shows the gradient and the colors that it is made of. To change the colors within the gradient, click on a color swatch within the gradient, navigate to the color swatches panel where you saved your new gold swatches to that you just made, and go ahead and select one of those swatches. Do this until all the colors within your gradient are changed to how you would like them.

If any portion of your gradient has a low opacity, you can change this by clicking on the black arrow directly above your swatch and changing the opacity setting to 100% in the box labeled “Opacity”.

Once you have your gradient that way you would like, choose a name for your gradient and then click “New”. This adds your gradient to the gradient library for you to choose from.

Step 13 - How to Make a Ribbon

12. How to Make a Simple Frame
The next step would be to select the rectangle tool. At the top of your screen, you will see two options for the color of your new rectangle shape. For the stroke of your rectangle, change the color to your new gradient swatch (under the gradient option selected – this is the order of the selections to choose from: No Color/Solid/Gradient/Pattern). Once the gradient is selected, you can change the stroke size to 1 or 2 pts. The fill should be set to “no color”.

Next, proceed to make the rectangle. What I did was I started the rectangle from the edge of the curser marks within the inside of my bleed guide lines (so, in other words: I didn’t include my bleeds) and I extended the rectangle all the way out to the opposite corner. This should give you a nice, simple frame for your image.

Step 11 - Add a Simple Frame

13. How to Add a “Ribbon” for Your Text
Adding a ribbon is fairly simple. All that you have to do here is to have the gradient you made earlier selected for both the fill and a 1 pt stroke. Draw a skinny rectangle from one end of your design to the other. If it’s not quite right just yet, you can always adjust the size later to your liking.

Step 13 - How to Make a Ribbon

14. How to Add Text
Navigate to the text tool which is located as the 16th tool from the top on your toolbar. With this tool selected, draw a rectangular text box onto the ribbon you just created. Type your desired text. I chose “Happy Holidays”. With the text tool selected, you will have the option of changing the font and size of your text at the top of your screen. I chose the font “Lavanderia” at the size of 52pts. You can then choose the fill and stroke of your text. For the fill, you can change the swatch that is shown at the top of your screen by clicking on it. For adding a stroke, you can do this by double clicking on the layer your text is on within the layers panel. (for any panel that is not currently being shown, navigate to “Window” and you can then locate and select the panel you would like to see from the drop down menu. Once you have the layer styles box up, you can go down to where it says “stroke” and set your desired settings for the stroke. I chose an orange color from my swatches panel at 6pts.

Step 14 - How to Add Text

To add text to your gift tag, select the pen tool which is located as the 15th tool from the top. Set the fill and stroke both to o pts/no color. Place an anchor point by clicking at one end of the writing space within your gift tag and clicking again for a second anchor point at the end of your writing space within your gift tag. Next, select the text tool once again and click on the beginning of the line you just made. Type your name or family name here. I chose a font that appears handwritten “Hand of Sean“. For the commercial version, go here.

Step 14 - How to Add Text to Tag

15. How to Organize and Group Your Photoshop Layers
Naming, linking, grouping & color coding your layers is important to keep everything clean and orderly (and it keeps me sane!)

To name your layer, double click on its current name and enter the name you would like.
To link two or more layers together, click on each layer you’d like to be linked to the other by holding down the cmmd key on your mac (cntrl key on your pc). Link the layers together by going to Layer > Link Layers.
To group layers together into single or multiple folders, simply click on each of the layers you’d like and then go to Layer > Group Layers (or use the short keys: Cmmd + G).
To color code your layers: Right click (Cmmd + click) on the layer or group selected and the color choice will come up for you to choose between.

To move layers around to achieve the desire order of your design elements within your card design artwork, all you need to do is click and drag the layers to reorder them within your layers panel.

I created a grouping for all of the layers we just made and titled it “Front”

Organizing Your Layers

16. How to Design the Inside of Your Card
For the inside of your card, create a new grouping and title it “Back”
Take everything that we’ve gone over above to design the inside of your card how you’d like it to appear.

example 1 Step 17 - Designing the Inside of your Card

example 2 Step 17 - Designing the Inside of your Card

Step 17 - Designing the Inside of your Card 3

17. How to Save Your Card for Print
Congratulations! We are now done with the design! All that’s left is saving the file and then sending it over to your printer in a format that they accept.

The first thing you need to do is SAVE YOUR PHOTOSHOP FILE. File > Save or File > Save As if you want to save your file as a new Photoshop file than the file you started with. You may choose the location you’d like to save it to as well.

18. How and Where to Print Your Cards

I have printed with UPrinting.com with good results in the past.

You could also print professionally with a printer in your local area.

If you choose to do so, this is what you should specify:

[quote_simple]Hello,
I hope you are having a wonderful day. I am looking to have my newly designed Holiday Cards printed up.
I am needing a quote for what it would cost to have {PLACE # HERE}-count 10in by 7in (half-fold to 5in x 7in) cards printed up in CMYK full color, front and back. Scored and folded. 10pt (or higher) cardstock glossy or semi-glossy paper
Please let me know. Thank you very much!
-{Your Name}[/quote_simple]

OR if you don’t need a quote and would simply like to go for it – you can send them the following along with the file (you may need to upload directly to their site for a lager file transfer):

[quote_simple]Hello,
I hope you are having a wonderful day. I am looking to have my newly designed Holiday Cards printed up.
I need {PLACE # HERE}-count 10in by 7in (half-fold to 5in x 7in) cards printed up in CMYK full color, front and back. Scored and folded. 10pt (or higher) cardstock glossy or semi-glossy paper.
The Front and Back is specified within the Photoshop file layers. There is a .125in bleed set on these files within the .psd.
Please let me know the timeframe of which I can first expect to see the proof.
Thank you very much!
-{Your Name}[/quote_simple]

You can also feel free to print at home from your inkjet. All you’ll need to purchase is a stack of nice semi-glossy stock and a full color cartridge for your printer.

CONGRATULATIONS, YOU ARE DONE! Enjoy your beautifully designed Holiday Cards this Christmas season.

Click here to download the template I created in this tutorial. Enjoy!

Side Note:
Feel free to comment below or contact me with any questions you might have.

Terms of Use
These cards are for your personal use only. They are not to be sold or distributed either in whole or in part. The vector bow design can be found here. The font is available for free personal use download and paid commercial use download here.

Pin It on Pinterest