Looking for New Web Design Writers

Girl at desk typingHey everyone! We’re proud and humble that you all have subscribed, comment, and continue to share our blog posts. I’d like to give a huge thank you from myself and the Design Theory staff. We wouldn’t be successful without all of you!

With all that, we are looking go expand our articles and this is where you come in. Let us know if you’re interested in writing for us. The only requirement is that you’ll be writing a post once a week for a specific day. The range for topics is still pretty open, but it does need to be design related. If you’d like some more information, please fill out the form below or call us at 888.603.1090. [contact-form subject=”New Dt blog writers” to=”email@jpdesigntheory.com”] [contact-field label=”Name” type=”name” required=”true” /] [contact-field label=”Email” type=”email” required=”true” /] [contact-field label=”Website” type=”url” /] [contact-field label=”Comment” type=”textarea” required=”true” /] [/contact-form]

Image Optimization And Why It’s Important

Have you ever been to a website that loaded very slowly? Did that website have some images that loaded abnormally slow, even though they weren’t that large in size? The reason for that may be that the images were re-sized improperly, most likely with a WYSIWYG (What You See Is What You Get) webpage editor such as Adobe Dreamweaver. This problem could have been avoided if the images were optimized.

Adobe Dreamweaver is a very powerful webpage editor that can be used to customize just about everything on your website, including specifying or adjusting the resolution of your images. When you click on an image you have inserted into Dreamweaver, you get the properties window, which allows you to specify the size of the image (resolution) and a host of other options.

Dreamweaver image properties

Notice in the the above example the image file size is 4162K. That means it’s about 4162 kilobytes (or about 4 MB) which is very large. Also notice that the W and H (width and height) values are both in bold. That means that the current size of the image (266 x 140) is not the actual size of it (4096 x 2160). If you click on the refresh button next to the image size Dreamweaver will resize the image to the proper size (4096 x 2160).

If you change the size of an image using Dreamweaver’s image properties tab, you will just be changing the image’s resolution and not the actual file size. Using this method to downsize large images will make the images load very slowly.

 This is NOT a good method for re-sizing an image for a webpage! 

Dreamweaver wasn’t designed to be used for editing images. The purpose of the width and height boxes in the properties tab is to specify a resolution (size) for the image or object you have selected if there are no dimensions specified. A much better way of optimizing images is with Adobe Photoshop.

Using Photoshop to Optimize Images

If you have Adobe Photoshop, then you have the perfect tool for optimizing your images to display on your website. Here are some quick and easy steps to optimize your image in Photoshop:

1. Open the image (File > Open)

2. Re-size the image with the image properties window (Image > Image Size)

Notice at the top of the window where it says “Pixel Dimensions:” that the file size of the downsized image is now 109.3K which is a whole heck of a lot smaller than the original image file size of 25.3 MB.

3. Instead of “Save” or “Save As” use the “Save for Web & Devices” option (File > Save for Web & Devices).

If you look at the top right corner of the Save for Web & Devices window you will see these options:

Most of the time, I alternate between the 70 and 60 quality setting depending on the size of the image. I have set this image to the JPEG High preset, which gives the image 60 quality by default. If you are re-sizing an image for a thumbnail (320 x 240 or below) 60 is a great setting because you won’t see any degradation in quality from the original. I use the 60 quality setting most of the time, unless the image is very large (1024 x 768 or larger).

Original quality vs 60 quality

The original on the left is full quality (no compression) and the optimized on the right is 60 quality. At this smaller size, it’s hard to see any degradation in image quality at the 60 setting. As you can see, the optimized image on the right has an estimated load time of 3 seconds for a 56k dial-up connection. Of course, most users today have cable and other much faster connections, but it’s nice to know that even on the slowest connection, the image still won’t take too long to load.

4. Upload the new and improved image to your website!

Now you’re ready to load the optimized image(s) into Dreamweaver or whichever editor you use for your website.

Video of Image re-sized using Dreamweaver vs. Photoshop Method

As you can see in this video, the image that was optimized using my Photoshop method (on the left) loads a lot faster than the image that was re-sized using only Dreamweaver (on the right). The optimized image loads almost instantaneously!

If you don’t have Photoshop, there are several other free tools you can use to optimize images for your website such as DynamicDrive.com’s Online Image Optimizer, which uses the same quality settings as Photoshop’s “Save for Web & Devices,” or RIOT (Radical Image Optimization Tool).

If you know of any other tools or methods you can use to optimize images, let us know in the comments!

What’s On Your Website Menu?

Getting creative on websites can sometimes feel constrained due to traditional layouts and verbiage, and most certainly when it comes to navigation bar and menus.  Many of us think that we need to have the standard, cookie-cutter menu navigation bars that have become the “norm” for almost all websites.  You know the type:

~Home~   ~Our Services (or Our Products)~   ~About Us~    ~Contact Us~

Most are similar in wording and format.  I’m not saying that there is anything WRONG with this per se but if you can, know that outside of conventional thinking and web design, you can get creative without compromising easy navigation of your site.

Websites are certainly your worldwide face but even the prettiest of girls can use a little makeup.  Sometimes that’s demure or other times an unexpected shocking red lipstick drives home a certain affect.  So can your website.  Don’t be afraid to try and incorporate some artistic menu design ideas.  I had a ball researching some pretty interesting and witty design elements for menu navigations.

 

 

 

I thought this was a great use of the industry-driven design even with the typical wording.  Another idea would have been to use the bricks themselves as the navigation bar.

You don’t see many vertical layouts for navigation bars so this really stood out to me.  I bet it does the same for the current and prospective clients too!

Most of us would enjoy seeing a fun and innovative menu layout.  This one made me comment out loud when I saw it “oh, that’s different”!


Don’t be afraid to use representative artwork and images either with or in-lieu of typical or generic menu names.  It gives a personalized look to customary naming conventions.

When to keep it standard vs. using Atypical menu choices

I would say this is probably governed by the industry you’re in.  If you are let’s say a law firm, then maybe you wouldn’t use the layout above but creative wording can be your breakout of the blue suit moment. Don’t be afraid to use your thesaurus here as long as you don’t compromise the ease of use and appropriate industry jargon.  Example: I’m a recent law school graduate looking to work at “JP Law Firm” and upon reviewing their website, I see a menu item titled “The Brief” (which is a legal term for a written document presented in court arguing why the party to the case should prevail). It would not be a tough leap to guess they were using that instead of “About Us”.  It’s a witty play on words which can be a little amusing and personally, I’d be impressed by the break away.  Not everything needs to be starched and buttoned up.  So with this said:

 

 

 

 

 

What’s your menu
design du jour?

 

 

 

How To Remove The Background Of An Image Using Photoshop

Have you ever wondered how some websites are able to integrate images so seamlessly with the background of the page that they just blend in?

Most of those websites accomplish this by removing the original background of the image and either making it transparent (see-through) or changing it to another color or another background all-together. It’s all matched to the theme of the website.

For example, notice the pastor and elder of the First Church of the Living God website (created by Design Theory) in the image below. They blend right in with the clouds in the background.

Today, I will be showing you how to remove the background of an image easily and quickly with Adobe Photoshop.

* Before you start, make sure you have opened an image in Photoshop (File > Open) *

Step 1: Select the Magic Wand Tool

Select the Magic Wand tool, located in the left menu bar.

Step 2: Configure the Magic Wand Tool

Once you have selected the Magic Wand tool, you will need to configure it using the options located near the top menu bar. For basic background removal, tolerance is the only option you need to concern yourself with in the Magic Wand configuration options. Tolerance determines how closely to match colors, and a higher tolerance means a larger selection. For this example, I used a value of 70 for tolerance because if you use anything lower you will get an ugly jagged-edged blue border around the image.

Step 3: Select the Background with the Magic Wand Tool

Now that you have selected the Magic Wand tool and configured its tolerance level, you will need to select the background in the image. Click anywhere in the background of the image and the Magic Wand will automatically detect the colors of the image, and, if there aren’t too many different colors in the image, it will detect the background. Now you see why they call it the “Magic” Wand! In this case, the background is almost a solid blue so the Magic Wand has no trouble detecting the background, and it only takes one click. If the background is not solid, or is busier than the background in this particular example, you will have to hold the shift key while you click on each color that is part of the background (Hold shift + left click). This is a basic tutorial, however, so I won’t be diving into how to do that now.

Step 4: Delete the Background

Now that you have selected the Magic Wand tool, set its tolerance level and selected the background, you simply hit the delete key and voila, no background! You are now free to use this image with just about any background you can think of.

Here is an example of what I did with my tiger:

As you can see, I replaced the background with a solid black color and added some text of a company I made up. This is an example of how you could implement this tiger picture as a logo/header element on your website. There are a lot of other ways to use this skill to make your websites look very professional and seamless.

If you have this skill and use it for your own professional application, please share your experience. If not, was this tutorial helpful to you?