How To Make Twitter Posts Show In Facebook

Posted by DigitalFlyDesigns | Posted in blogging, code tip of the day, facebook, help | Posted on 05-01-2012-05-2008

0

Do you use Twitter and Facebook, but never know which one to post a status too? It would be a huge hassle to open both sites and post the same status twice. So wouldn’t it be handy if you could just use one service to post to both accounts? That is where the Twitter Application comes in handy.

 

This tutorial will show you how to link your Twitter account to your Facebook account. This will make anything you post to Twitter, show up as a Facebook status.

Step 1: Log into Facebook, and type “Twitter”, into the search bar at the top of the site.

Step 2: Locate the Twitter Application (Make sure you click on the application, not on the page. The app has the Twitter bird as its icon).

Step 3: Click on “Go To App” on the left hand side

Step 4: Click on “Allow”

Step 5: Type in your Twitter log on details

Step 6: Click “Allow” Once more, and you are done!

Thats it! Try posting something on Twitter and see if it shows up!

Share

How to put a SPACE in HTML

Posted by DigitalFlyDesigns | Posted in code fixes, code tip of the day, help, Tech | Posted on 20-06-2011-05-2008

0

Short Answer

  is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this   occupies.

Long Answer

  is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this   occupies.

Many WYSIWYG HTML editors insert these   entities in an effort to control the layout of the HTML document. For example, such an editor may use a series of non-breaking spaces to indent a paragraph like this:

<P>
&nbsp; &nbsp; &nbsp; This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</P>

As the example mentions, some browsers will not, in fact, indent the text because of how that particular browser handles the &nbsp; entity. Some browsers collapse multiple, concurrent non-breaking spaces into a single space. This sometimes happens, even if there are regular spaces separating the consecutive &nbsp; entities. So keep in mind that this “technique” can not be relied on.

There are some times when it is “acceptable” or “advisable” to use the &nbsp; entity so long as the consequences are understood:

  1. Its intended use of creating a space between words or elements that should not be broken. The only problems that can be associated with this use is that too many words strung together with non-breaking spaces may require some graphical browsers to show horizontal scrollbars or cause them to display the text overlapping table borders.
  2. If you need to have an empty table cell, it is often advised that you add a non-breaking space like <TD>&nbsp;</TD>. This is because some versions of Netscape seem to have problems with completely empty table cells.
  3. Indentation. It is generally discouraged to use a non-breaking space, or a series of non-breaking spaces to “force” an indentation. This practice is discouraged for two primary reasons. First, not all browsers handle the &nbsp; entity properly and may in fact ignore it when rendering the document. Second, the practice of trying to “force” a specific presentation is often frowned upon as it tends to fail and/or makes it more difficult for some readers whose browsers may be configured differently from your own.
Share

How to disable Facebook Photo tagging on your profile

Posted by DigitalFlyDesigns | Posted in code tip of the day, facebook, help, Tech | Posted on 15-04-2011-05-2008

0

Facebook is very addictive social networks with lots of spammy applications and user’s. We usually avoid spam’s but things get worse when someone misuse the Facebook Photo tagging feature for you. Some applications like “Who Staked Your Profile” and others contaminate your and your friends wall after gaining the access.

You can disable Facebook Photo tagging by few simple steps:

1.Go to your Facebook Privacy Settings

2.You also simple go to “Privacy Settings > Applications and Websites >What your friends can share about you” and Unchecked the “Photos and videos of me” .

Below mentioned screen shots will help you in disabling the Facebook Photo tagging:

a) Go to “What your friends can share about you through applications and websites”

b) Uncheck “Photos and videos of me”

After saving the changes no one can tag you via photos on walls. Though this tip will block photo tagging but your friends can still tag your profile with @username functions.

Share

How to create attributes in ZenCart

Posted by DigitalFlyDesigns | Posted in code tip of the day, coding, shopping cart, Tech, zen cart | Posted on 02-04-2011-05-2008

0

Want to collect additional information from customers like what size of shirt they want to order? Or what color of an item would they like? Or maybe you sell personalized products and need to collect details like names, and dates.

ZenCart makes it easy to do all of the above using what is called attributes.

Adding attributes in ZenCart is a three-step process.

  1. Option Names
  2. Option Values
  3. Attributes Controller

Option Names

Option names are the titles for fields. For example, if you want a field titled “Your Name” to collect a name, you would need to create an Option Name called “Your Name”

To create Option Names, click on “Option Name Manager” under Catalog

attributes1

To add a new option name, enter the following:

attributes2

  1. Option Name (example: Select Size)
  2. Order (optional)
  3. Option Type (choose dropdown, text, etc)

Once you have entered the information, click on “insert” to create.

The next step is to add a value to the name you created.

Option Names

Option Values provide the actual options for the field names you just created. For example, if you just created a field titled “Select Shirt Size” you would need to create values for it like Small, Medium, and Large.

To create Option Values, click on “Option Value Manager” under Catalog

attributes3

To add a new Option Value, enter the following:

attributes4

  1. Choose the Option Name you want to add a value for
  2. Enter Option Value (example: Small, Purple, etc)
  3. Order (optional)

Once you have entered the information, click on “insert” to create.

IMPORTANT: If the value is TEXT, where customers will enter their own information, you do not need to create a value. For example, if you created an Option Name titled “Enter your name” and want customers to type in their name – just create the Option Name. You do not need to create an Option Value for it.

The next step is to add the Option Names and Values to your products.

Attributes Controller

The Attributes Controller is where you manage (or control) which Option Names and
Values are associated with which products.

To access the Attributes Controller, click on “Attributes Controller” under Catalog

attributes5

When you first click to enter the Attributes Controller, you will be asked to select the category you wish to work with.

Once you select a category, you will be directed to the Attributes Controller.

The first step is to choose a product to add an attribute to.

attributes6

Choose the product name you want to work with (see above) and click on “display”

Now scroll down a bit until you see:

attributes7

All that basically needs to be done is:

  1. Choose the desired Option Name
  2. Choose the desired Option Value
  3. Click on “insert”

Check back in next week for my tutorial on more features available in the Attributes Controller.

If you run into any issues, please let me know below.

Share

HTML 5 – What is HTML5?

Posted by DigitalFlyDesigns | Posted in code fixes, Tech | Posted on 31-03-2011-05-2008

0


Part of being a good user and consumer is understanding how technology works, why we use it the way we do, and what that barrage of acronyms and PR jargon means. We’re here to help you make sense of it all, and to give you a better appreciation of how those transistors, pixels, and antennas work together to deliver the conveniences of the modern world to your living room or office.

What is HTML5?

We’re sure by now you’ve heard the term “HTML5″ thrown around by the likes of Apple and Google. This is the next evolution of HTML, or Hyper Text Markup Language, which forms the backbone of almost every site on the Internet. HTML4, the last major iteration of the language, debuted in 1997 and has been subsequently poked and prodded so that it can handle the demands of the modern Web.

Why is it such a big deal?

HTML 4 has been tweaked, stretched and augmented beyond its initial scope to bring high levels of interactivity and multimedia to Web sites. Plugins like Flash, Silverlight and Java have added media integration to the Web, but not without some cost. In search of a “better user experience” and battery life, Apple has simply dropped support for some of these plugins entirely on mobile devices, leaving much of the media-heavy Internet inaccessible on iPads and iPhones. HTML5 adds many new features, and streamlines functionality in order to render these processor-intensive add-ons unnecessary for many common functions.

Assuming content providers sign on (and many are), this means you won’t have to worry about installing yet another plugin just to listen to a song embedded in a blog or watch a video on YouTube. Similarly, this is a big deal for platforms that either don’t support Flash (e.g., iPhone and iPad), or have well documented problems with it (e.g., Linux). It will be a particular boon to those smartphones for which supporting Flash has proven problematic.

So what exactly can it do?

HTML5′s most touted features are media playback and offline storage. With HTML4, sites usually have to reach for Flash (or Silverlight) to simply show a video or play music. HTML5 lets sites directly embed media with the simple HTML tags “<video>” and “<audio>” — no plugins required. There are some issues currently being debated by the powers that be, and a particularly sticky one deals with file format. Some companies, especially Mozilla, are pushing for the adoption of the open-source Ogg format, which is free for anyone to use. Others, like Apple, would prefer the higher quality H.264 format, which will eventually require browser makers to pay licensing fees to support it.

The other major addition that has garnered media attention is the ability to store offline data for Web apps. One of the major roadblocks in the march to replace traditional desktop apps has been that the Web-based ones are useless without an Internet connection. Google developed a stopgap solution with Gears, but that product has been retired as the company is shifting its focus to HTML5. This will mean being able to create files in Google Docs or draft e-mails when away from an Internet connection. These changes would be automatically synced the next time you’re online.

HTML5 also adds new interactivity features, like drag-and-drop, that have already found their way into Gmail.

How can I take advantage of it now?

Most likely, you’re already taking advantage of it without knowing. Safari (both mobile and desktop), Google Chrome and Firefox 3.6 all support at least some elements of HTML5. (Internet Explorer 8′s support for HTML5 is very limited.) And many Google products already use some features of the next-generation protocol. If you’re using Safari or Chrome, you can check out an experimental version of YouTube that makes use of HTML5′s video features. Gmail and Google Reader have adopted parts of the standard, as well. Additionally, any site listed here as being “iPad ready” is making extensive use of HTML5, including The New York Times, CNN and CBS. The latter of which recently announced it would be phasing out Flash in favor of HTML5 for all video content. If you want to dig a little deeper, you can check out a series of experiments from Mozilla that show just what HTML5 can do, and these design roundups show off what it brings to the table for designers and typographers.

Flash won’t be going away anytime soon, of course; it’s still widely used and supported, and those Flash-based games that we love so much are impossible to recreate using HTML. But it’s important to know that when you hear people tossing about the phrase “HTML5,” it isn’t just some meaningless buzz word; they’re talking about the future of the Internet.

Share

How to add spaces in WordPress Visual Editor not just html

Posted by DigitalFlyDesigns | Posted in blogging, code fixes, Tech, wordpress | Posted on 28-03-2011-05-2008

0

So we had a client that in spite of trying various methods such as putting line breaks "<br>" inside "<code>" tag and many other such HTML tricks (many of which can be easily found at WordPress) just to be able to put multiple intentional line breaks in a post, wordpress would eventually manage to filter those line breaks. Even if the tricks were successfully applied, when it came to re-editing a post, all efforts would go to vain when TinyMCE initiates its own filtering process.

WordPress has a built-in powerful post/text editor commonly known as the “Visual” editor, which uses the open source project named “TinyMCE“. When switching from Visual to HTML editor in WordPress or vice-versa TinyMCE executes a back-end filtration process which removes empty tags, and <br> tags from the post.

Needless to say, it is very irritating when a author is forced to loose his/her creative ideas by forcing these kind of annoying and unnecessary filtration.

So Now there is a solutions as Follows:

1. Go to this page http://wordpress.org/extend/plugins/tinymce-advanced/ and Download the Advanced version of Tinymce. As So.

TinyMc Advanced

TinyMc Advanced

2. Go to the Plugins Page >> Add New >> Upload and then Browse and find the TinyMC Advanced that you downloaded and install it then Activate it.

upload wordpress plugin

upload wordpress plugin

 

3. Then Click Settings >> TinyMCE Advanced

Settings wordpress

Settings wordpress

4. Once you are in the TinyMCE Advance Settings then simply scroll down and check box

That says

This will make it possible to use more advanced coding in the HTML editor without the back-end filtering affecting it much. However it may behave unexpectedly in rare cases, so test it thoroughly before enabling it permanently. Also line breaks in the HTML editor would still affect the output, in particular do not use empty lines, line breaks inside HTML tags or multiple <br /> tags.

wordpress line break fix

wordpress line break fix

5. Go back to editing the web like it was the days of Microsoft Word. Done.

Blogging should be a little more easier from here on with the freedom of unlimited line breaks in WordPress :)

 

Share

What can you use for CSS in an Email and what not!

Posted by DigitalFlyDesigns | Posted in Uncategorized | Posted on 24-03-2011-05-2008

0

Style Element Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
<style> in <head> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
<style> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Link Element Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
<link> in <head> Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes
<link> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Selectors Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
e Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
* Yes Yes Yes No No Yes Yes No No Yes Yes
e.className Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e#id Yes No Yes Yes Yes Yes Yes No No Yes Yes
e:link Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e:active, e:hover Yes Yes Yes Yes No Yes Yes No No Yes Yes
e:first-line Yes No No Yes No Yes Yes No No Yes Yes
e:first-letter Yes No No Yes No Yes Yes No No Yes Yes
e > f No No Yes Yes No Yes No No No No No
e:focus No No Yes Yes No Yes Yes No No No No
e+f No No No No No Yes Yes No No No No
e[foo] No No Yes Yes No Yes Yes No No No No
Text & Fonts Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
direction Yes Yes Yes Yes No Yes Yes No No Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-overflow CSS3 Partial or buggy support Partial or buggy support No No No Partial or buggy support Partial or buggy support Partial or buggy support No Partial or buggy support Partial or buggy support
text-shadow CSS3 No Partial or buggy support Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
text-transform Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
white-space No Yes Yes Yes Yes Yes Yes Yes No No No
word-spacing Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
word-wrap CSS3 Partial or buggy support No Yes Yes No Yes Partial or buggy support No No Partial or buggy support Partial or buggy support
vertical-align Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Color & Background Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background Yes No Yes Yes Partial or buggy support Yes Yes Partial or buggy support No No Yes
-moz-background CSS3 No No No No No No No No No No No
-webkit-background CSS3 No No No No No Yes Yes No No No No
background-color Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
background-image Yes No Yes Yes No Yes Yes No No No Yes
background-position Yes No Yes Yes No Yes Yes No No No Yes
background-repeat Yes No Yes Yes No Yes Yes No No No Yes
-khtml-background-size CSS3 No No No No No Yes Yes No No No No
-moz-background-size CSS3 No No No No No No No No No No No
-o-background-size CSS3 No No No No No No No No No No No
-webkit-background-size CSS3 No No No No No Yes Yes No No No No
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
HSLA Colors CSS3 No No No No No Yes Yes No No No No
Opacity CSS3 No No No No No Yes Yes No No No No
RGBA Colors CSS3 No No No No No Yes Yes No No No No
Box Model Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
border Yes Partial or buggy support Yes Yes Yes Yes Yes Yes No Yes Yes
-moz-border-color CSS3 No No No No No No No No No No No
-moz-border-image CSS3 No No No No No No No No No No No
-moz-border-radius CSS3 No No No No No No No No No No No
-webkit-border-radius CSS3 No No No No No Yes Yes No No No No
-moz-box-shadow CSS3 No No No No No No No No No No No
-moz-box-sizing CSS3 No No Yes No No No No No No Yes Yes
height Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
margin Yes Partial or buggy support Yes Yes Yes Yes Yes Yes No Yes Yes
padding Yes Yes Yes Yes Partial or buggy support Yes Yes Yes No Yes Yes
width Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Positioning & Display Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
bottom Yes No No No No Yes Yes No No Yes Yes
clear Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
clip Yes No No No No Yes Yes No No No Yes
cursor Yes Yes Yes Yes No Yes No No No Yes Yes
display Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
float Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
left Yes No No No No Yes Yes No No Yes Yes
opacity No No No No No Yes Yes No No No Yes
outline CSS3 No No Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
overflow Yes Yes Yes Yes No Yes No Yes No No Yes
position Yes No No No No Yes Yes No No Yes Yes
resize CSS3 No Yes Yes Yes No Yes No No No Yes Yes
right Yes No No No No Yes Yes No No Yes Yes
top Yes No No No No Yes Yes No No Yes Yes
visibility Yes Yes Yes Yes No Yes Yes No No No Yes
z-index Yes No No No Yes Yes Yes No No Yes Yes
Lists Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
list-style-image Yes No Yes Yes No Yes Yes No No No Yes
list-style-position Yes Yes Yes Yes No Yes Yes Yes No No Yes
list-style-type Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
Tables Outlook
2000/03
Live
Hotmail
Yahoo!
Mail
Yahoo!
Classic
Outlook
2007/10
Apple
Mail
Apple
iPhone
Google
Gmail
Lotus
Notes 6/7
Lotus
Notes 8.5
AOL
Desk 10
border-collapse Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes No Yes Yes Yes No No No
caption-side No Yes No No No No No Yes No No No
empty-cells No Yes Yes Yes No Yes Yes Yes No No No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
Share

Resolution

Posted by DigitalFlyDesigns | Posted in dpi, images, photo, print, Tech, Uncategorized | Posted on 18-01-2011-05-2008

0

First of all, let’s get off the topic of downloading images from the internet, since we really shouldn’t be doing that anyway without permission from the copyright owner, and look at image resolution in general. I cover it in much more detail in the Image Resolution, Pixel Dimensions and Document Size tutorial, but let’s do a short recap.

The term “image resolution” means how many of your image’s pixels will fit inside each inch of paper when printed. Obviously, since your photo has a fixed number of pixels, the more of them you squeeze inside each inch of paper, the smaller the image will appear on the paper. Likewise, the fewer pixels you print per inch, the larger the image will appear on paper. The number of pixels that will be printed per inch is known as the resolution of the image, or “image resolution”. Image resolution has everything to do with printing your image. It has nothing to do with how your image appears on your computer screen, which is why images you download off the internet usually appear much larger and higher quality on your screen than they do when you print them.

Let’s use a photo as an example:

A photo of a horse. Image © 2009 Steve Patterson.

An unflattering photo of a horse.

I can’t help but laugh every time I see this photo of a horse I took while driving around the countryside one day. Normally this horse stands proud, powerful, full of grace and dignity, yet I seem to have caught him in a rather unflattering moment. He’s standing on a bit of a strange angle, he has a piece of straw dangling from his hair, and he seems to be in the middle of chewing his food. Either that, or he’s desperately trying to crack a smile for me. In either case, since this guy is already embarrassed, as am I for having taken this wonderful photo, let’s use this image as an example.

First, let’s look at what Photoshop can tell us about the current size of this photo. I’ll go up to the Image menu at the top of the screen and choose Image Size, which brings up the appropriately-named Image Size dialog box:

The Image Size dialog box in Photoshop. Image © 2009 Photoshop Essentials.com.

The Image Size dialog box shows us the current size of the photo.

The Image Size dialog box is divided into two main sections, Pixel Dimensions at the top and Document Size directly below it. The Pixel Dimensions section tells us how many pixels are in our image. The Document Size section tells us how large the image will appear on paper if we print it. If we look at the Pixel Dimensions section, we can see that this photo has a width of 1200 pixels and a height of 800 pixels. That may sound like a lot of pixels (1200 x 800 = 960,000 pixels!), and it certainly would be if we were displaying this image on a computer screen. In fact, at 1200 x 800, it may be too large to fit entirely on your screen! But just because it looks nice and big on the screen doesn’t necessarily mean it will print nice and big, at least not with any degree of quality. Let’s take a closer look at what the Document Size section is telling us:

The Dcument Size section of the Image Size dialog box in Photoshop. Image © 2009 Photoshop Essentials.com.

The Document Size sections tells us how large or small the photo will print based on a specific resolution.

The Document Size section of the Image Size dialog box tells us two things – what the current resolution of our image is, and how large or small the image will appear if we print it based on that resolution. Currently, our resolution value is set to 72 pixels/inch, which means that out of the 1200 pixels that make up our photo from left to right (the width), 72 of them will print inside each inch of paper, and out of the 800 pixels that make up the image from top to bottom (the height), 72 of them will print inside each inch of paper. The value in the Resolution box is for both width and height, not the total number of pixels that will print. In other words, for every square inch of paper, 72 pixels from our image will be printed from left to right and 72 pixels will be printed from top to bottom. The total number of pixels printed in every square inch of paper would then be, in this case anyway, 72 x 72 (72 pixels for the width times 72 pixels for the height), which gives us 5184 pixels!

Let’s do some simple math ourselves to make sure that the width and height being shown to us in the Document Size section is correct. We know from the Pixel Dimensions section that we have 1200 pixels from left to right in our image and 800 pixels from top to bottom. Our print resolution is currently set to 72 pixels/inch, so to figure out how large our image will be when printed, all we need to do is divide the number of pixels from left to right by 72, which will give us our print width, and the number of pixels from top to bottom by 72, which will give us our print height. Let’s do that:

1200 pixels wide divided by 72 pixels per inch = 16.667 inches
800 pixels high divided by 72 pixels per inch = 11.111 inches

Based on our own simple calculations, at a resolution of 72 pixels/inch (ppi for short), our image would be 16.667 inches wide by 11.111 inches high when printed. And if we look at the Document Size section once again:

The Dcument Size section of the Image Size dialog box in Photoshop. Image © 2009 Photoshop Essentials.com.

Confirming the print size shown in the Document Size section.

That’s exactly what it says! Wow, a 1200 x 800 pixel photo is large enough for an 11 x 14 inch print, with a little extra to spare! That’s great!

Sadly, no. If only life were that simple.

The fact is, 72 pixels/inch is not enough to give us sharp, good quality, professional looking images when printed. It’s not even close. To give you an idea of what I mean, here’s a rough approximation of how the photo would look on paper if we tried to print it at a resolution of 72 pixels/inch. You’ll have to use your imagination a bit here and try to imagine this at 11 x 16 inches:

The horse photo as it may appear printed in low resolution. Image © 2009 Steve Patterson.

The photo as it would appear on paper when printed at only 72 pixels/inch.

Doesn’t exactly look good, does it? The problem is that at 72 pixels/inch, the image information is being spread out too far on the paper for the photo to appear sharp and detailed, sort of like spreading too little peanut butter over too much toast. The photo now appears soft, dull and generally unappealing. We don’t see this problem on a computer screen because computer monitors are generally referred to as low resolution devices. Even a photo with relatively small pixel dimensions, like 640 x 480, will look great on a computer screen. Printers, however, are high resolution devices, and if you want your photos to appear sharp and detailed when printed, you’ll need a resolution much higher than 72 pixels/inch.

So how high of a resolution value do you need for professional quality printing? The generally accepted value is 300 pixels/inch. Printing an image at a resolution of 300 pixels/inch squeezes the pixels in close enough together to keep everything looking sharp. In fact, 300 is usually a bit more than you need. You can often get by with a resolution of 240 pixels/inch without noticing any loss of image quality. The professional standard, though, is 300 pixels/inch.

Let’s take our same image then at 1200 pixels wide by 800 pixels high, change our resolution from 72 pixels/inch to 300 pixels/inch, and see what we get. Here’s the Image Size dialog box again showing the new resolution of 300 pixels/inch. Notice in the Pixel Dimensions section at the top that we still have 1200 pixels for the width and 800 pixels for the height. The only thing that’s changed is our resolution, from 72 to 300:

Changing the print resolution in Photoshop to 300 pixels/inch. Image © 2009 Steve Patterson.

The print resolution has been changed to 300 pixels/inch.

With our resolution now increased from 72 to 300 pixels/inch, this means that out of the 1200 pixels that make up our image from left to right, 300 of them will now print inside every inch of paper, and out of the 800 pixels contained in our image from top to bottom, 300 of them will now print inside every inch of paper. Naturally, with so many more pixels squeezing into each inch of paper, we’d expect the photo to print much smaller, and sure enough, the Document Size section is now showing that our photo will print at a size of only 4 inches wide by 2.667 inches high:

The image will now print at a much smaller size. Image © 2009 Steve Patterson.

The photo will now print at a much smaller size than before.

Where did those new width and height values come from? Again, some simple math is all we need:

1200 pixels wide divided by 300 pixels per inch = 4 inches
800 pixels high divided by 300 pixels per inch = 2.667 inches

The photo will now print much smaller than it would at a resolution of 72 pixels/inch, but what we lose in physical size, we more than make up for in image quality. At 300 pixels/inch (or even 240 pixels/inch), we’d enjoy sharp, detailed, professional quality print results:

Higher print resolutions mean higher print quality. Image © 2009 Steve Patterson.

Higher print resolutions result in smaller photos but much better image quality.

Of course, most people don’t print their photos at weird sizes like 4 x 2.667, so how do we make sure we’re going to get professional quality print results with more standard print sizes like 4 x 6? An excellent question, and the answer comes to us once again through some boring yet simple math.

Let’s say you’ve taken some photos of your recent family vacation using your digital camera and you want to print out some 4 x 6′s on your printer. We know now that in order to achieve professional quality prints, we need set the resolution of our images to a minimum of 240 pixels/inch, although 300 pixels per inch is the official standard. Let’s look at both of these resolution values though to see how large of an image, in pixels, we’ll need out of the camera in order to print 4 x 6′s with good image quality. First, let’s look at 240 pixels per inch:

To figure out how large, in pixels, our images need to be in order to print 4 x 6′s at professional quality, all we need to do is multiply 240 x 4 for the width, and then 240 x 6 for the height (or vice versa depending on if your photo is in landscape or portrait mode). Let’s do that:

240 pixels per inch x 4 inches wide = 960 pixels
240 pixels per inch x 6 inches high = 1440 pixels

Based on our math, we can see that in order to print a digital photo as a 4 x 6 at 240 pixels/inch resolution, which should give us excellent quality, our photo’s pixel dimensions need to beat least 960 x 1440. We can see exactly how many pixels that is by multiplying 960 by 1440, which gives us 1,382,400 pixels. Let’s round that up to 1.4 million pixels. That may sound like a lot of pixels but it really isn’t, not when you consider that 1.4 million is the minimum number of pixels you’d need to print good quality 4 x 6 photos using the minimum resolution we can use to achieve good quality, which is 240 pixels/inch. The good news at least is that these days, most digital cameras on the market are 5MP (“mega pixels”, or “millions of pixels”) and higher, so they’d have no trouble printing good quality 4 x 6′s even using 300 pixels/inch for the resolution.

Of course, we haven’t actually looked at how many pixels we’d need to print professional quality 4 x 6′s at 300 pixels/inch, so let’s do that now. We’ll use the same simple formula as above, where we’ll multiply 300 by 4 and then 300 by 6 to give us the pixel dimensions we’ll need:

300 pixels per inch x 4 inches wide = 1200 pixels
300 pixels per inch x 6 inches high = 1800 pixels

Let’s do one more quick calculation to see how many pixels we need in total:

1200 pixels wide times 1800 pixels high = 2,160,000

So, in order to print a photo as a 4 x 6 using the professional standard of 300 pixels/inch for resolution, our photo needs to be 1200 pixels wide by 1800 pixels high (or vice versa), which means we’ll need a total of 2,160,000 pixels, which again should be no problem for most digital cameras on the market today which are 5MP and higher.

What if you have a photo you absolutely love and feel it deserves an 8 x 10 print rather than a 4 x 6? How large of an image in pixels do we need to print a good quality 8 x 10? The answer is as easy as when we needed to find out how large of an image we’d need for a 4 x 6. All we need to do is multiply the resolution value in pixels by the width in inches and do the same thing for the height. Let’s first use 240 pixels per inch as our resolution:

240 pixels per inch x 8 inches wide = 1920 pixels
240 pixels per inch x 10 inches wide = 2400 pixels
Total number of pixels = 1920 pixels wide x 2400 pixels high = 4,608,000 pixels

From our little bit of math, we can see that in order to print a photo at good quality as an 8 x 10, our photo needs to be 1920 pixels wide by 2400 pixels high (or vice versa), for a total of approximately 4.6 million pixels. Now we’re starting to push the limits of lower end digital cameras. A 4MP digital camera wouldn’t capture quite enough pixels to be able to print an image at 8 x 10 at 240 pixels/inch resolution. It would fall about 600,000 pixels short. You could still print an 8 x 10 image of course, but you most likely wouldn’t get professional looking results.

Let’s do the same calculations for an 8 x 10 at 300 pixels/inch resolution:

300 pixels per inch x 8 inches wide = 2400 pixels
300 pixels per inch x 10 inches wide = 3000 pixels
Total number of pixels = 2400 pixels wide x 3000 pixels high = 7,200,000 pixels

Now we’re really pushing the limits as far as digital cameras currently on the market. In order to be able to print a photo as an 8 x 10 using the 300 pixels/inch resolution standard, our photo needs to be 2400 pixels wide by 3000 pixels high (or vice versa), for a total of 7.2 million pixels! Now that’s a lot of pixels! This means you need at least a 7.2MP digital camera in order to be able to print your photos as 8 x 10′s and still get true, professional quality prints. Of course, keep in mind that most photos require at least a little cropping, which means you’ll need to start with even more pixels. If you know you’re going to be printing a lot of photos as 8 x 10′s, investing in a good quality 8 MP or higher camera is highly recommended.

And there we have it!

Share

Image Resolution, Pixel Dimensions and Document Size – Part 2

Posted by DigitalFlyDesigns | Posted in dpi, images, photo, print, Tech | Posted on 18-01-2011-05-2008

0

In the first part of our look at image resolution, we examined the first section of the Image Size dialog box in Photoshop, “Pixel Dimensions”, which, as a quick recap, tells us the width and height of our image in pixels, and tells us the file size, which is usually in MB (megabytes, or “millions of bytes”). Nothing terribly confusing here.

The second section of the Image Size dialog box is “Document Size”, which can be a bit more confusing but really isn’t much more complicated than the Pixel Dimensions section. In fact, the two of them go hand in hand. Let’s take a look at the Document Size section, and by the time we’re done, you should have a pretty good grasp on the difference between the two and on image resolution itself.

Document Size

The Document Size section of Photoshop's Image Size dialog box.

Document Size goes hand in hand with Pixel Dimensions, yet is also completely separate from it. “Gee thanks, that really cleared it up,” you’re saying. I know it sounds confusing, but bare with me for a moment. Notice at the bottom of the Document Size section, it says “Resolution”, and in the Resolution box, it says “72″. Notice also to the right of that is another box, this one saying “pixels/inch”.

Resolution

What this is telling us is that when we go to print the photo, 72 pixels out of our 3456 pixels from left to right in our photo (the width), and 72 pixels out of our 2304 pixels from top to bottom in our photo (the height), will be printed for every one inch of paper. That’s what “image resolution” means – how many of your image’s pixels left to right and how many of the pixels top to bottom will print in every inch of paper. Of course, an inch is a square, which means the number of pixels from left to right and top to bottom will always be the same, and that’s why the Document Size section contains only one number for Resolution. That number (72 here) represents both the left to right and top to bottom number.

So, if we have 3456 pixels from left to right in our photo, and 2304 pixels from top to bottom in our photo, and we have 72 pixels per inch listed for the resolution of our image, how large will our image actually be if we were to print it? Well, to figure that out, all we need to do is divide the width and height of our image (in pixels) by the print resolution (also in pixels). So let’s do that:

3456 divided by 72 = 48
2304 divided by 72 = 32

After our simple math (yes I know, math sucks but this one’s easy), we find out that at a print resolution of 72 pixels per inch, our photo is going to be 48 inches wide by 32 inches high. That’s a huge photo! But wait a minute, didn’t we see those numbers 48 and 32 somewhere before? Why yes we did. Take a look once again at the Document Size section:

Document Size and Pixel Dimensions once again

Look what values it’s giving us for the width and height of our image – 48 inches for the width, and 32 inches for the height. Exactly what we came up with ourselves when we divided the number of pixels wide and the number of pixels high by 72 pixels per inch (the resolution). And that’s really all that image resolution is. It’s how many if your image’s pixels will print inside every inch of paper, which then tells us how large the image will be when it’s printed.

Keep in mind as we’re going along that I keep saying “printed”. I can’t stress enough, and this is the number one reason why so many people have a difficult time grasping the concept of image resolution, that resolution means absolutely nothing until you go to print the image. It has absolutely nothing to do with how your image appears on your screen.

Just to prove there’s nothing up my sleeve, let’s change the resolution value of the photo from 72 to, oh, let’s make it 300, which will mean that for every inch of paper when we go to print our image, 300 of our image’s pixels will be printed from left to right and 300 again from top to bottom. You can see the change in the screenshot below:

Changing the print resolution to 300 pixels per inch.

Now, since 300 of our image’s pixels from left to right are going to be fitting inside every inch of paper as opposed to only 72 pixels, it stands to reason that it’s not going to take 48 inches of paper to fit the entire width of our photo into. Likewise, since 300 of our pixels from top to bottom are going to be fitting inside every inch of paper as opposed to only 72 pixels, it shouldn’t still take 32 inches of paper to fit the entire height into. Just for fun, let’s do the simple math ourselves. Once again, all we need to do is divide the width in pixels and the height in pixels by the resolution in pixels. So let’s do that:

3456 divided by 300 = 11.52
2304 divided by 300 = 7.68

According to my math, when I take 3456 pixels wide and divide them by 300 pixels per inch, that gives me 11.52 inches. Likewise, 2304 pixels high divided by 300 pixels per inch gives me 7.68 inches. In other words, when I take my photo that’s 3456 pixels wide by 2304 pixels high and print it at a resolution of 300 pixels per inch, my photo will be 11.52 inches wide by 7.68 pixels high. Let’s take a look at what the Document Size section is telling us. Am I right?

Document Size showing width and height at 300 pixels per inch.

Looks like my math skills are stronger than ever (okay, so I used a calculator). Photoshop is showing us exactly what we expected, that at a resolution of 300 pixels per inch, it will take 11.52 inches wide and 7.68 pixels high to print our entire photo.

To summarize then, all “image resolution” means is how many of your image’s pixels will print inside every inch of paper. Again, it has no effect at all on how your image appears on your screen, since your monitor has nothing to do with your printer.

Pixel Size

There’s one other aspect that image resolution has to do with, and that’s the size of the pixels when you go to print the image. It makes sense, really. An inch is an inch is an inch. The size of an inch is always the same. It’s, well, one inch. So, since the size of an inch can’t change, the size of the pixels has to change. For example, in order to fit 300 pixels into an inch, you would need pixels that are considerably smaller than if you only wanted to fit 72 pixels into an inch. Sort of like how, if you wanted to fit 10 people into a phone booth, you’d need people who were considerably smaller than if you only wanted to fit 3 people in there. Fortunately, you don’t need to worry about that. Photoshop takes care of resizing the pixels for us. I just wanted to explain that “image resolution” really means two things – the number of pixels per inch that will be printed on the paper, and the size of those pixels. As I said though, Photoshop takes care of sizing them for us. All we need to do is make sure we’re using the correct value for “pixels per inch”.

“Hey, wait a minute!” you’re thinking. “Correct value?! What correct value? There’s an actual number I’m supposed to use for resolution that’s ‘correct’?!”

Yep, there sure is. Well, if you’re concerned about image quality, anyway (and of course you are). We look at the “correct” resolution values to add for maximum image quality when printing in our next section

Share

Image Resolution, Pixel Dimensions and Document Size

Posted by DigitalFlyDesigns | Posted in dpi, images, photo, print, Tech | Posted on 18-01-2011-05-2008

0

A Simple Explanation Of Some Of The Most Confusing Terms In Photoshop or just in Photo’s in General

A lot of people, whether new to Photoshop or not, are confused by the term “image resolution”.

Question: “Is it like a New Years’ Resolution where I have to give something up for a month?”
Answer: “Nope, not that kind of resolution. And, I think you’re actually supposed to give something up for longer than a month. But no, that’s not it.”

Question: “What about, like, ‘resolving’ a problem? That sort of resolution?”
Answer: “Nope. Well, kinda, in the sense that understanding image resolution can definitely solve a lot of problems. But really, no.”

Question: “Hmm… Oh, I know! You mean, like, Prince & The Resolution, from the 80′s – Purple Rain, Let’s Go Crazy, that sort of thing?”
Answer: “Umm…. no. And, you’re thinking of “Revolution”, not resolution. Still, no, that’s not it either.”

So if it’s not something you give up, has nothing to do with resolving an issue, and doesn’t involve doves crying or partying like it’s 1999, then what exactly is “image resolution”? Well, let me throw one more thing in there that image resolution has nothing to do with, and that’s how your image looks on your computer screen. That’s right, the resolution of your image has absolutely nothing to do with how your image appears on screen. It does, however, have everything to do with how your image will print.

Let’s repeat that one more time. Image resolution has absolutely nothing to do with how your image looks on screen. It has everything to do with how it will print. Let’s examine things further.

Pixel Dimensions

Here’s a photo I took one day while strolling through a park. I saw this little guy (or girl, who knows) posing for me on the flowers and happened to have my camera handy. My camera, by the way, is an 8MP camera, and the reason why I’m telling you this will be explained shortly.

Photo of a bug on a flower.

Obviously, the photo you’re seeing above is a much smaller version of the photo, since the actual-size version would be too large to fit on the screen. Let’s pretend though for the sake of this lesson that we’re working with the full size version of the photo. In order to see exactly how large the photo is, once we have it open inside Photoshop, we can simply go up to the Image menu at the top of the screen and choose Image Size from the list of options, which will bring up Photoshop’s Image Size dialog box, as shown below.

Photoshop's Image Size dialog box

The Image Size dialog box can seem a bit frightening and confusing, but it’s not meant to be and really, it’s quite simple. It’s divided into two sections, Pixel Dimensions and Document Size. For the moment, let’s ignore the Document Size part and focus only on Pixel Dimensions.

Pixel Dimensions

The term “pixel dimensions” here, to me, is confusing because it sounds like we’re talking about the dimensions of each individual pixel, and that’s not the case. What Photoshop is really telling us is the width and height of our image in pixels. In other words, how many pixels are in our image from left to right, and how many pixels are in our image from top to bottom. It’s also telling us one other important piece of information which is the file size of our image. The dimensions and file size shown here are of the full size version of the photo above (the insect on the flower) before I resized it to something more suitable for a web page. So here, Photoshop is telling me that my photo has a width of 3456 pixels and a height of 2304 pixels. In other words, it contains 3456 pixels from left to right, and 2304 pixels from top to bottom. To find out exactly how many pixels I have in my photo then, I can simply multiply the width times the height, which in this case is 3456 x 2304, which gives me a grand total of 7,962,624 pixels. That’s a whole lot of pixels.

Remember earlier when I mentioned that the camera I used to take this photo was an 8MP camera? Well, the “MP” stands for “mega pixel”, and “mega” means “million”, so “8MP” means 8 million pixels. This means that when I take a photo with my digital camera, the photo will be made up of 8 million pixels (approximately, anyway). If you have a 5MP camera, your photos will be made up of 5 million pixels. 4MP cameras give you photos made up of 4 million pixels, and so on. So if we take a look again at what the Pixel Dimensions section of the Image Size dialog box is telling us about my photo above, it’s saying that my photo has dimensions of 3456 pixels wide by 2304 pixels high, for a total of 7,962,624 pixels, which is pretty darn close to 8 million, and that’s why my camera can be sold as an 8MP camera.

So that’s what the first part of the Image Size dialog box is telling us – the width and height of our image in pixels. So far so good. Let’s take a look now at the second part of the dialog box, “Document Size” which is where we really start to make sense of image resolution.

Continue Reading Part 2

Share