Friday, August 1, 2014

Create a Custom Banner in MDS

Hi Friends!

I've recently re-designed my blog using My Digital Studio. 
Although my design is not very fancy, I had fun creating it and now I'd like to share how I did it. 

Today we're going to focus on the banner (there will be more tutorials coming soon for the background, buttons, post divider, etc.)


The first thing I did was download this adorable digital ensemble.
SUMMER HAPPINESS KIT
http://www.stampinup.com/ECWeb/ProductDetails.aspx?productID=130076

HERE IS THE COMPLETED BANNER
SO LET'S GET STARTED...

Be sure to click on the screen shots for a larger view.

START A NEW BLOG
The very first thing you should do is start a new (private) blog.
 (they're free)
 Go to your BLOGGER DASHBOARD
Click MY BLOGS
Click NEW BLOG

This will enable you to work without disturbing your actual blog.
There is a bit of trial and error involved, so this works out perfect!
Once you have started your trial blog, you will need to set the basic template.
I'm showing you mine for the purpose of this tutorial, but you can customize it any way you want.
Select
TEMPLATE
APPLY TO BLOG (UPPER RIGHT CORNER)
SIMPLE (THE FIRST ONE)
CUSTOMIZE
Select
LAYOUT
CHOOSE YOUR LAYOUT
(I've chosen the 1 column with right sidebar. You can select your footer here too) 
Select
ADJUST WIDTHS
USE THE SLIDE BAR OR TYPE IN PIXELS
(Mine: entire blog is 1010 px, Sidebar is 260px)
APPLY TO BLOG.
 Now that you have you blog settings ready to go...
CREATE YOUR BANNER IN MDS

OPEN YOUR MDS PROGRAM
FROM NEW PROJECTS MENU SELECT CARDS AND TAGS
SELECT POSTCARD
SELECT 9 1/4" x 4" LANDSCAPE

Your canvas is now open.
OPEN PUNCHES (EITHER RIGHT OR LEFT TOOLBAR)
SELECT THE 1.25 SQUARE PUNCH
DRAG PUNCH TO THE DESIRED SIZE AND LOCATION
OPTION TO COLOR FILL OR PAPER FILL
PAPER FILL: CLICK PAPER FILL BUTTON
THIS BOX WILL POP UP:
SELECT YOUR PAPER
 Here I've added another punch box and color-filled it with Whisper White.
I've also chosen to MAT my punches. This gives them a perfect mat and even lets you choose
 the size of the mat!
ADDING AND MANIPULATING EMBELLISHMENTS
CLICK ON EMBELLISHMENTS BUTTON ON THE LEFT TOOL BAR
(It's the little flower button)
CHOOSE YOUR EMBELLISHMENT(S)
DOUBLE CLICK TO BRING IT UP ON YOUR CANVAS
RESIZE BY DRAGGING THE HANDLES OR USING THE RESIZE BUTTON
 ROTATE TO THE DESIRED ANGLE
COPY AND PASTE
TO FLIP IT THE OTHER WAY CLICK THE 
MIRROR BUTTON
ADD TEXT
I have downloaded a font called LAUREN SCRIPT.
On my sidebar under HELPFUL RESOURCES there is a link for free fonts.
TO CREATE A DROP SHADOW ON YOUR TEXT
CLICK THE DROP SHADOW BUTTON UNDER YOUR TEXT MENU.
A BOX WILL POP UP AND YOU CAN SELECT THE COLOR AND OPACITY
(Love this! Looks so cool!)
Okay so now we have everything the way we want it.
Yay! See that wasn't so hard!
Next we have to export it...

EXPORTING YOUR BANNER

CLICK ON SHARE
CHOOSE EXPORT PAGES
Make sure that the IMAGE TYPE is set to JPEG
CLICK CHANGE SIZE
CHOOSE SMALL 925 X 400 PIXELS
CLICK OK
This small box will pop up
BE SURE TO TAKE NOTE OF WHERE THE FILE IS SAVED :)
CLICK FINISH

CROPPING YOUR BANNER

This can be done in almost any photo editing software.
I'm using GIMP because it's free.
If you need to get GIMP, CLICK HERE 


OPEN GIMP
UNDER FILE CLICK OPEN
(Here's where it's important to remember where your file is ;)
CHOOSE YOUR BANNER
IN THE TOOLBOX WINDOW SELECT THE CROP ICON
THEN SIMPLY DRAG THE CROP TOOL AROUND THE DESIRED AREA
AND HIT ENTER ON YOUR KEYBOARD.
DON'T FORGET TO SAVE IT! (UNDER FILE: SAVE)

UPLOADING BANNER TO YOUR BLOG

CLICK LAYOUT
CLICK EDIT ON THE NAME OF YOUR BANNER
NEXT TO IMAGE
TICK FROM YOUR COMPUTER
UNDER PLACEMENT TICK INSTEAD OF TITLE AND DESCRIPTION 
CLICK BROWSE
(here's where it's important that you remember where you exported your file)
CHOOSE THE BANNER
SAVE

CENTERING YOUR BANNER
Sometimes your banner uploads perfectly center, but more often, it does not.
Here's what you do:
GO INTO TEMPLATE
CLICK ADVANCED
CLICK ADD CSS
WHEN THE CSS BOX OPENS
ADD THIS CODE
(Copy and Paste from here)
#Header1 {width:950px;margin:0 auto}

NOTE: YOU MAY HAVE TO ADJUST THE PX
ONCE YOU ADD YOUR BACKGROUND PAPERS OR MAKE ADJUSTMENTS
TO YOUR BLOG WIDTH.
#Header1 {width:950px;margin:0 auto}
 CLICK APPLY TO BLOG
CLICK VIEW BLOG...

AND YOU HAVE YOUR LOVELY PERFECTLY CENTERED BANNER!
If you have any questions, suggestions or comments...please leave them here or feel free to email me....look for the CONTACT ME button on the side bar.

Thanks for taking this journey with me...
stay tuned for more!

Happy Crafting!
 photo e5348add-1dbf-495a-a477-f7063da71c17.jpg

2 comments:

Related Posts Plugin for WordPress, Blogger...