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.
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!
Many more small businesses are waking up to the idea of blogging. This makes us at Design Theory pretty happy because we preach about the importance of a blog for our clients and partners. Though not all blogs are created equal, there are different platforms, designs, and purposes. Still each blog’s purpose is to capture an audience and keep them coming back for more week after week, post after post.
Idea 1: Make Your Blog Easy to Leave Comments
This one should be a no brainer, but you’d be surprised at how many blogs are out there that have great content, yet lack the ability for readers to post comments. There are so many plugins and applications that allow users to use many different social and popular mediums to easily submit a comment. A free and commonly used one is Gravatar. Receiving a comment on your post is one of the most gratifying moments of blogging. Good or bad, it’s still people taking time to speak out about your work. Be sure to promptly approve your comments and reply. Unapproved comments is a sure-fire way to show a reader you don’t care about what they have to say.
Idea 2: Make Your Blog Easy to Be Shared
It’s safe to say most blogs out there are using open sourced platforms like WordPress, Drupal, or Joomla. So utilize the plugins available to allow your readers to quickly share. Most are pretty easy to install and configure. Since a lot of blog article titles get shared through social media be sure to choose some of the more popular ones in your settings. Some examples are TweetMeme, Shareaholic, Google+1, and the Facebook Like Button.
Idea 3: Write More Help Topics
A common misconception with business blogs is to use this as an advertising stream. That’s actually not a good way to use it. In fact you’ll want to write more posts that actually help your readers and less about your own services and products. More successful blogs out there are blogs that constantly offer quick tips on fixing, making, creating, and developing things. And if you can condense a long dissertation to some cliff notes and still offer a productive outcome, you’ll create a nice following.
Idea 4: Get The Word Out
If no one knows about your blog, then no one reads your blog. An easy way to start promoting your blog is with your friends and family. Get them to read it to find errors and offer suggestions. For them that may be enough to get them to read it to try to tell you all you’re doing wrong. Its better coming from them than strangers. Then use social media like Twitter and a Facebook Fan page to further spread your great articles. Install some SEO plugins to help optimize your content for Google too. Include tags in your posts to help with indexing. Lastly, sign up with directory sites like Digg and StumbleUpon and submit your articles to them.
Idea 5: End With A Call To Action
Sometimes finishing your post is harder than starting. How to leave or Segway from your final points without sounding redundant. Try ending off with asking your readers to perform an action. Encourage them to comment their own points, a controversial rebuttal, a quick assignment that they can perform on their own for their own gains or improvement. This is also a great place to plug your service to help wrap up all that you talked about while offering your reader a time-saving deal or money-saving opportunity.
TGIF! Time for some free stuff! Check out this collection of free web buttons, provided by Sketchdock.com. You can download the collection in .PSD format for easy editing in Adobe Photoshop. Enjoy!
When I first got started in web design, I think I only had my hands on a few pieces of software. A few resources for fonts and no books rhyme or reason. For me it was a nail in the coffin from years of doing mobile computer repair and door to door sales. With more and more prospective asking me if I knew how to design and build websites, I finally decided to try my hand. Along the way I’ve learned quite a few tips and tricks. I’d like to share with you some of the most recent apps and devices in heavy use from the tool belts of our designers at our firm Design Theory.
Starting with Design, I highly recommend some books to get your creative juices flowing as well as some inspiration to show you that sky may not even be the true limit. If you’re more of a designer than a developer, you may find it easy to imagine a UI that zooms in performance and throws fireworks whenever a user finds exactly what they were looking for, and page transitions rained gold coins that provoked people to give you their contact information willingly without thought. Then you wake up and see a blank white screen with a blinking cursor. Yea, been there.
Your gadgets are important too. Don’t waste time or money on the cheap stuff if you can avoid it. They’ll only bring you to limits a lot faster than you’re learning new techniques and operating at faster speeds. Save yourself the “computer wait” frustrations and go out for bold early if you can.
Devices & Gear:
Macbook Pro
iPad (1st Gen, 2nd Gen, or the New iPad) Either will do depending on your level of production
iPhone, HTC (for email, document, and other management on the go)
A comfortable desk and chair. (Because you’ll be here for hours and hours)
Double Backup Hard Drives (Yes a backup and a backup for the backup)
A long desk for plenty of space
A widescreen monitor. You can do a 19″ but I’d suggest as big as you can afford
Video Conferencing: This is steadily growing as a necessity for us. Our clients and partners are all over the country and across the pond in Europe. So keeping in touch isn’t limited to phone calls and face to face meetings. In fact, a lot of collaboration gets done virtually in video calls. Some of which we record and share on YouTube.
APPS:
Skype
ECamm Call Recorder
Google+ for Hangouts
YouTube
This should get you going for now. If you don’t have many of these items don’t fret, just keep working hard and save to get there. I’m sure there are other apps out there I may not know so if you have any you’re using these days, feel free to share in the comments below.
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?
I think its safe to say that each designer has their own way of doing things. When it comes to how to start a new web design project, there are quite a few ways to get started. I’m not going to say that any one way is right or wrong, but each direction does have its own benefits and trials. For example some starting points may take way more time then they need to and delay the actual development process. While others are have too much of a shotgun approach and may leave you doing more cleanup in the long run then necessary had there been more planning at the beginning.
Let me start off with the way we at Design Theory get started with a new web project. Again, no way is right or wrong, this is just a transparent look into our world.
1. Wire frame: Once your contract is signed and a deposit is paid, our graphic design team starts designing a mock home page. Depending on what the client’s needs and requests are, most layouts are pretty standard. We start off with a wire frame of boxes and rectangles as placeholders for content and images. Logo here, banner there, ads here, text and content here, images there. Once this is created for both the home page and at least one sub page, it will be passed on to the client for approval and signing. We don’t move forward unless we get a signed copy back.
2. Designing the Mock-Up: This part is a little fun because you’ll start to bring in some colors and realistic elements using Fireworks or Photoshop. Any design app that allows you to use layers. Then head over to Lipsum to grab some text filler for page body areas. Use the company logo and position it where you think it will best fit. Try some page backgrounds or menu colors and boarders to see how much more live the design looks. You may also want to design a few other sub page variations as well as the contact us page here too. Again, you’ll send this phase to the client for approval and signing.
3. Slicing: Some call this PSD to HTML, but the concept basically is cutting up all those layers and graphical elements from your design into individual graphic files. For example, the logo will now be saved as its own file with a transparent background, and so will the banner, and the menu boxes minus the text. Slice the navigation bar into buttons or formulate a working htm file for dropdown and linking functionality. You’re pretty much breaking down every part of your design to prep the development team to build the site.
4. Development: This is the fun part. Depending on whether or not your a coder I should say. At this stage you’ve got all the right elements sized or scaled to what they’re supposed to be. The functionality of menus and widgets have been explained and demonstrated so you can do everything you need to in a timely manor without any more interaction from the client. During the build process, you’ll also be checking for browser compatibility, what is actually see above the fold, font sizing, CSS, and overall flow of the each page.
5. Double-Checking: Hopefully at this point there are a fresh set of eyes overlooking the project. Check for broken or incorrect links, image alt tags, site map, spelling, grammar, lines and balance and attention to detail. Within our design firm we’re happy to have a content writer who’s not afraid to pick and tear apart our sites during development for inconsistencies and errors where we may have ignored or missed along the way. (Thanks Yvonne!) After this step is when you’ll want to present a semi-polished preview to your client. Having your ducks in a row will save your client from noticing small errors and focusing on the big picture. In my experience this stage is rather crucial because if you can’t get them to focus on the overall design and functionality, they’ll run you crazy on the minor imperfections that you can probably fix just as fast as they find them while on the phone.
That’s a brief run-down of what we do at our design firm. I hope this is helpful to you. If you have another way on how you start your design projects, please share in the comments below!
This is NOT a good method for re-sizing an image for a webpage! 
