Design House Digital

Posts Tagged ‘Photoshop Elements’

2012 Shutterfly Wall Calendar – 20 Days of Christmas

This Christmas I am making custom wall calendars for my mom, dad, and Grandma!  It’s my first year doing this and it’s been a lot of fun.

I am printing a Shutterfly calendar. I know there are lots of places to do calendars, so feel free to use your favorite print company.

Collecting Birthdays and Photos

First, I emailed my aunts and cousins and siblings asked them to give me recent head shots of everyone in their family and a list of everyone’s birthdays.  Then I emailed them again, and then again. Finally I threatened the stragglers, and they eventually complied.

I have a Photoshop.com account and I use it almost exclusively for getting photos from family members.  I just gave them my username & password and asked them to upload pictures.  And they did…  after a few reminders!

Photoshop.com has a handy uploader application but it’s a downloader too.  All my relatives have to do is drag & drop their picture folders and the program will upload them.  My brother Jeff gave me 140 photos!  To get them, I had to navigate to his folder and click “Sync.” A few minutes later and I had the full resolution version of all his photos.

Photoshop.com is a free account, but if you want extra storage you can pay a monthly fee.  I have a Plus (paid) membership and 20 GB of storage but haven’t used much of it at all.

Creating a Calendar Project

First I created a calendar project.  Then I was able to add events.  There’s a white “manage all my events” link at the top left of the screen.  I clicked on it and added everyone’s birthday.

Adding Birthdays with Photos

Then, I wanted to add head shots of everyone on their birthday. This is the process I used:

  • Color-correct the photos you want to use in Photoshop Lightroom (or Bridge/Camera Raw or Photoshop or Photoshop Elements) and then export them to a single folder at a high resolution.  It is not necessary to crop the photos at this point.
  • Upload the head shots you want to use into a new Shutterfly album
  • Go into your Calendar, click “Get More Pictures,” and add the entire head shot album to the calendar
  • Go into each month of the calendar.  There is a nice list of birthdays for the month on the left side of the page.
  • Drag and drop each head shot onto their birthday.  Then double-click on the day square, click “Edit Picture,” and add cropping and effects to the photo.

Making the top half of each calendar month

At this point, you could just upload more photos and use Shutterfly’s wizards to create the top half of each calendar month.  I don’t like to do that, though!  I like to use DHD templates and graphics and make my own digi pages.  So this is what I did:

  • Download the Shutterfly Photoshop Calendar template for the calendar top half.
  • Open the template in Photoshop or Photoshop Elements and save a copy for each month.  The template will have guide lines that mark the “bleed zone.” While you should fill the bleed zone up with the same background stuff you put on the rest of the page, be aware that anything outside the guides will most likely get cropped out.  So don’t put anything too good there.
  • Create your layouts.
  • Save your layouts.  Save one copy as a full .psd file, and another as a high-resolution .jpg file.
  • Upload your layouts to Shutterfly and add them to the calendar project.
  • Select the single-image template option for all of your month top pages, and drag & drop your layouts onto the correct zone.

My February Layout

In the above layout, I used one of Tiffany Tillman’s 52 Thursday Templates and papers from both Celeste Knight (Winter Woodland) and Agnes Biro (Dear Diary).

Make a Calendar Cover

Create a cover layout that is the same size as your other calendar layouts.  Then upload and drag & drop that in as well.  I made this cover using Celeste Knight’s Winter Woodland kit.

My Calendar Cover

School of Design – Blogging Secrets 4

School of Design

Welcome to Design House Digital’s School of Design. Today, and every single day in September, we’ll have new blog posts; informative, detailed, and FREE classes that will take your digital scrapbooking to the next level. Each subject will have a new post weekly, and at the end of the month you won’t believe how much you’ve learned!

I’ve recently had several conversations with my boys about not talking to strangers.  I guess it’s been on my mind.  I’m going to give you a similar lecture!

Today I want to talk about Internet safety and privacy.  As a Digi scrapbooker, we do so many things online these days, and it is really important to keep our family photos and information safe.

Should my blog be public or private?

If you have a family journal blog, ask yourself this:  Are you OK with strangers stumbling on your blog?  How about people you know: bosses, neighbors, family members?  If the answer to any of these questions is no, maybe you want to lock your blog down.

My sister has a really great blog.  She writes in hers like a family journal: everything that she writes about is related to her family.  She has even had her blog printed into a bound book at Blurb!  Her blog is ultra-private: it requires visitors to be logged-in, registered users that she has already approved.

She has a good reason for it.  Her husband has a very sensitive job, and his company doesn’t allow family pictures to be posted on the Internet.

To make your blog private in Blogger, go to Settings > Permissions and select “Only these readers.” That will allow you to specify the people you want to allow to view your blog.

Blog locked down

Should my blog be open to search engines?

Another way to go private is to hide your blog from search engines.  Fewer people will stumble on your blog, but strangers can still visit.  It’s like having an unlisted phone number: only people who know your number will come.

If your blog is locked down, you still need to make sure your blog is hidden from search engines.

To hide your blog from search engines, go to Settings > Privacy and answer “No” to both questions.

Private Blog

I want a public blog!  How can I blog safely?

There are so many great things about having a public blog.  You can connect with new people who have similar interests, you can get ad revenue, and you can share with the world your really fun, useful projects and techniques!  My favorite public blog (besides our blog here at Design House Digital) is my sister-in-law Jen’s blog – The Project Girl.  Take a minute and check it out!

1. Have all email go through a “Contact Us” form with a CAPTCHA

If you want to let people get in touch with you, provide a Contact Us form that has a CAPTCHA.  A CAPTCHA is a box with funny looking text that you have to type into the adjoining box. It ensures a human and not a robot is filling out the form.

I don’t have instructions on how to do this with Blogger right now; I’ll have to cover this in a separate blog post.

2. Strip Geo-coding out of your photos

Did you know that if you post a photo taken by your phone’s camera, your Geo-location is most likely embedded in the photo?  Does that scare you? It scares me, especially when I’m posting photos of my kids. Luckily, you can usually change your phone’s setting to turn this off for good.

If you are using an iPhone:

  1. Go to Settings > General > Location Services.
  2. Look for Camera and make sure that it’s turned OFF.

If you are using an Android Phone:

  1. Go into your Camera app
  2. Click on Menu, then look for Geo-tag photos

You can also change the metadata in photos you’ve already taken.  In the Photoshop Elements Organizer, right-click on a photo and choose “Show Properties.”  The address will appear in the properties in the bottom-right-hand corner of the organizer.

You should remove Geo-tagging from any photos you post online, including on Facebook.

If you only post digi layouts, no worries! The Geo-tagging doesn’t carry over from your photos into your digi layout!

3. Don’t post your address on your blog if you can help it

If you’re not selling anything, there’s no need to publish your address.  Leave it off, and let people contact you via email.

I hope you develop a habit of safe blogging, and protect yourself, your friends, and your family.

By Mary

http://www.designhousedigital.com/content/wp-content/uploads/2010/01/ex-wonder1.jpg

School of Design – Blogging Secrets 3

Welcome to Design House Digital’s School of Design. Today, and every single day in September, we’ll have new blog posts; informative, detailed, and FREE classes that will take your digital scrapbooking to the next level. Each subject will have a new post weekly, and at the end of the month you won’t believe how much you’ve learned!

How to make a repeating background and put it on your blog

I’m going to show you how to create a repeating background for your blog.  Custom background are not too hard but give your blog a fun, unique feel.

For a repeating background, you will create a small graphic square with edges that match up.  Then when people visit your site, the background will be able to grow and shrink based on how big their browser window is.

1. Create a new Photoshop file

You can make yours as big or small as you want.  I’m going to make mine 100 pixels square.  Be sure to set it to 72 ppi (pixels per inch) because that’s the standard computer screen resolution.

New Background Image

In Photoshop Elements, go to File > New > Blank file..

2. Create a repeating background

A background needs to be the same around the edges.  You can do stripes, prints, solids, or a combination of them.

Sometimes the digi paper you like has a pattern built in.  Here is a background image I built using a flowered print paper out of Karen Funk’s The Sweet Life digital collection.  All I had to do was crop out the repeating pattern from the center.

Flowered Background

Sometimes the look you are going for is not so straightforward.  I’m going to illustrate the steps I take by creating a background out of a solid paper & elements from Celeste Knight’s Menagerie digital collection.

First, I crop a 100×100 pixel block out of the center of the background.  I stay away from the edges because designers usually put edging on their papers that is cool for scrapbooking but not so cool for blending repeatable backgrounds.

Crop

Crop a 100x100 pixel square

Second, I offset the image using the offset filter in Photoshop Elements.  I go to Filter > Other > Offset and enter in pixel offsets that are half the side of the image itself.  In my case, 50×50.  Make sure “Wrap Around” is checked.

Offset Filter

Filter > Other > Offset...

I will zoom in and show you how my background has been split up.  Basically, it’s been cut into 4 boxes and reversed, so what used to be the edging is now in the center of the image.  You’ll be able to see visible lines.  This is where the edge of the background didn’t match up.  We’ll fix it next.

After the offset

After the offset: see the lines in the center?

Third, I use the clone stamp tool to smooth out the center seams.  First, I select the clone stamp tool.  Then I alt-click a little above the center horizontal line and then tap across the edge.  Then I alt-click a little to the left of the center vertical line and tap across that edge.

After clone stamping

After clone stamping: lines are gone.

Now, I don’t have to stop at the one layer.  I’m going to add a second layer – a diagonal stripe using one of Celeste’s elements.  To check my work, I select the whole image and go to Edit > Define pattern from selection… and name it.  Then I create a new document, bigger – 1000×1000 pixels.  In the new document, I go to Edit > Fill Layer… and select the pattern I deifned.  If it looks good, I’m done! If not, I go back and fiddle with the original some more.  I can do the Offset Filter as many times as necessary, and stop when I’m happy with it.

3. Save my finished background for the web.

I’m going to save mine as a PNG-24 and name it background.png.

Save for Web

Save for Web

4. Install the background in my blog.

So I go to blogger, to Template and then Customize.  Then I select “Background” in the upper-right-hand corner.

Edit Template Background

Edit Template Background

There’s a little arrow next to Background Image.  I click on that and then on “Upload Image” in the upper left hand corner.

Upload Background Image

Upload Background Image

Here it is.


Blog with background

I don’t like the menagerie background with my blog.

So I installed the flowered one.  Then I decided it was too strong so I lowered the opacity on that layer.  I double-click the layer in the bottom-right-hand corner of Photoshop Elements and change opacity to 60%.  I also put a white layer below the flower layer – without it the background was a yucky milky gray.

Lower Opacity

Lower Opacity

I save it again and upload it to my blog template again.

When I’m happy with it, I have to hit “Apply to Blog” in the upper right hand corner or my changes won’t be saved.  Then I click on “View Blog.”

Here’s the finished product:

Blog with Background

Now you know the secrets to blog backgrounds!  I hope this was helpful to you!

Mary: Web Wonder Woman

School of Design – Blogging Secrets 2

School of Design

Welcome to Design House Digital’s School of Design. Today, and every single day in September, we’ll have new blog posts; informative, detailed, and FREE classes that will take your digital scrapbooking to the next level. Each subject will have a new post weekly, and at the end of the month you won’t believe how much you’ve learned! Our schedule is as follows:

Today I’m going to teach you how to customize your sidebar.  I don’t know if there’s a fancy name for this technique.  We are simply going to add a single background graphic to every sidebar title.

First, create the background graphic.  I am using the basic template, so my width has to be 280 pixels.  It can be any height, really.  I’m going to make mine 50 pixels high.  I create a new graphic at 72 pixels per inch (ppi).

In Photoshop Elements, go to File > New > Blank File.  Enter a file name and the correct dimensions.  Maybe you want to make the background color transparent; it depends on the look you are going for.  Don’t forget to make sure the units are “pixels” (see screenshot).

New Sidebar Background

Then, create your sidebar graphic.  You could fill the whole square/block in or do something to match a white or colored background.  I’m going to put a top border above my titles and a flower to the left.  I am using Karen Funk’s The Sweet Life Complete Collection. Tip: Don’t forget to leave lots of space for your titles!

Then I am going to save it for the web (see screenshot).  Because mine is transparent, I’m going to do a PNG-24.  You could do a jpeg as well.  You could do a gif if there aren’t a lot of colors in your graphic, but usually digi stuff is too colorful to save as a gif.

Save for Web

Once your sidebar graphic is ready for the web, you have to upload it to your site.  The easiest way to do that is to create a blog post with the graphic in it.  You can delete the post after you are done customizing your site.  Once your graphic has been uploaded, copy its web address.  Mine looks like this: http://1.bp.blogspot.com/-1XwVZgR7yuo/Tm67hHSomSI/AAAAAAAAALg/oJRq6rb1tBQ/s320/sidebar.png

In another tab, customize your layout.  First, set your gadget title font and color.  Go to Layout > Template Designer then Advanced > Gadgets.  Here you can choose a font and font color!  It’s so simple!

This next step is a little trickier.

You’ll need to make a CSS rule to insert your background image.  Go to Layout > Template Designer and then Advanced > Add CSS. Paste the following into the CSS, then change the URL to be your  image’s URL.  You’ll need to play with the pixels a little bit to make your text flow properly around your background image.  “height” is the height of the whole graphic; “padding” is the spacing between the edge of the graphic and the words.   You can preview the look & feel right there in the page, so it won’t be too hard to do.  The height and the first number under padding should equal the height of your graphic.  The padding numbers are referenced clockwise: top | right | bottom | left.

div.sidebar h2 {
 background: url(http://1.bp.blogspot.com/-1XwVZgR7yuo/Tm67hHSomSI/AAAAAAAAALg/oJRq6rb1tBQ/s320/sidebar.png) no-repeat;
 height: 28px;
 padding: 22px 0px 0px 50px;
}

Then, select “Apply to Blog” in the upper right hand corner and you’re done!

Blog Preview

School of Design – Blogging Secrets 1

School of Design

Welcome to Design House Digital’s School of Design. Today, and every single day in September, we’ll have new blog posts; informative, detailed, and FREE classes that will take your digital scrapbooking to the next level. Each subject will have a new post weekly, and at the end of the month you won’t believe how much you’ve learned! Our schedule is as follows:

  • Thursdays – Journaling From the Heart with Jen Papadimitriou
  • Fridays - Photography Tips and Tricks with Lori Pickens
  • Saturdays – You and Your Camera with Allison Waken & Shannon Dombkowski
  • Sundays– Standout Shadows with Gennifer Bursett
  • Mondays – Design Theory with Tiffany Tillman
  • Tuesdays – Blogging Secrets with Mary Shaw
  • Wednesdays – Maximizing Templates with Renee Fink

I’m going to teach you how to create your own blog header from scratch today. Then I’m going to show you how to insert it into Blogger (Blogspot). If you know how to make a digital scrapbook layout, a blog header will be a breeze. If you’re new to this, it should still be pretty simple.

First, you need to know what size to make your blog header. For Blogger your image needs to be 760 pixels wide, at a resolution of 72 pixels per inch (ppi). It can be any height.

Then you need to make your header. In Photoshop Elements, go to File > New > Blank File, then name your file and enter your image size and resolution (see screenshot).

Photoshop Elements New

Now, create your header! Do it just like you would do a digital layout. If you need tips on how to do this, visit our digi classroom. A good video on getting started with digital scrapbooking is available on our site as well.

When your header is ready, save it for the web. Go to File > Save for Web… (see screenshot).

Then select jpeg medium in the upper right hand corner of the next box (see screenshot).

Click “OK” and select a file name. It should be the name of your blog with hyphens between the words.

Now, go to Blogger and upload your new header! Go into blogger and edit the layout of your blog (see screenshot).

Edit Blogger Layout

Then select “Edit” next to your header (see screenshot).

Edit Blog Header

Select the blog header from your computer, and select the placement “Instead of title and description” (see screenshot).

Configure Blog Header

Click “Save” and then “Save Arrangement” on the Layout page, and you’re done! You can look at your blog and it will have the new blog header. Enjoy!

Mary Shaw

Go Back In Time