How To Make Your Picture Web Ready.

So you've made yourself proud by taking a beautiful picture of the Niagara Falls with your brand new digital SLR and you're itching to share it with the world.  But before you do that, there's a couple of things you need to do to make the picture is "web" ready.  Pictures taken with digital SLR cameras, especially in RAW format, produce extremely large file sizes and need to be processed for the web.  Using your favorite photo editor like Photoshop Elements, you can make adjustments to your already awesome picture that will totally make you look like a pro.

1. CROP It.  If you want to get rid of those pesky tourists on the side of your picture cropping is the way to go.  Cropping the picture not only removes the ugly tourist from the picture but it's also a way to reduce the size of the picture.

1. Open the picture in Photoshop Elements
2. Click on the crop symbol. 
3. Drag to select the area that you want to keep in your picture.
4. After selecting the area you want to keep, click the green check mark. 
5. Voila the tourist is finally gone.

2. SHRINK It.  Even with the tourist out of the picture it's likely that the file size is still too big for the web.  Internet connections can be slow and file storage limited, so file size on the web does matter. To resize your image follow the steps below.

1. Click on Image in the menu bar
2. Select Resize - Image Size
3. Use either percent or pixels to select the new size.
4. Click OK.
5. Voila... you got shrinkage... and that's a good thing.

3. ADJUST It. The RESOLUTION that is.  The standard resolution for web images today is 72PPI or pixels per inch so that's the most pixels that your monitor will likely be able to display.  Here's how you change the image resolution.

1. Click on Image in the menu bar
2. Select Resize - Image Size
3. Type 72 in Resolution field
4. Click OK
5. Voila... you got more file size shrinkage and you're being efficient with your pixels.

4. SAVE It.  After all of your hard work you're ready to take a break and maybe enjoy a beverage but before you step away from your pc and lose all of your data, you need to SAVE IT.  Always save your hard work as .psd file so that you'll be able to go back and open the image in photoshop format to see the different layers and adjustments that you've made so far.

1. Click File Save As
2. Name the file and choose Photoshop for the format.

5.  EXPORT It.  You thought you were done but you forgot a crucial step in making your picture web ready.  The web browsers don't know how to render your .PSD file so you need to export your picture in a format that browsers do recognize, like .JPEG, PNG, and GIF.  JPEG is my favorite because it gives you the best bang for your buck when it comes to maintaining the quality of the image while keeping the file size very small.  If you need transparency then GIF or PNG will need to be used.

1. Click File.. Save For Web
2. Choose JPEG, GIF or PNG 
3. Select the quality needed
4. Click OK
5. Name the File and click save.

There's other things that can be done in Photoshop to enhance your photo like special effects, borders, color enhancements etc.. but they're not always necessary when optimizing your picture for the web.

Readability vs Legibility

Readability and Legibility are similar concepts with a few differences that I will cover in this blog.

What is Readability?  Readability is a simple concept.  Make it easy for the user to read the text on your webpage and you've got readability.  To accomplish this you need to follow some general guidelines.  

• Use sans serif typeface for areas where you have lots of text.  
• Use the correct font size, in most cases 12 point size works best.
• Avoid really long lines of text when possible. 
• Avoid using large amounts of bold, italic, all caps, small caps etc. 
• Use good contrast.  This one is very important because it affects both readability and legibility.  

When I was looking through all the class blogs, I found this poll that has both readability and legibility issues and is a good example of what to avoid. Sorry Beth for picking on you.  The dark font on the dark background is a problem and needs to be changed to white. The scroll bar is also annoying and requires a user to take action in order to see all of the content.

What is Legibility?  Legibility is also a simple concept and differs from Readability because it applies to short bursts of text like lists, signs, buttons, page header etc. To make sure you have excellent Readability follow these guidelines.

• Use sans serif typeface.
• Avoid using all caps because it can hinder the user from quickly recognizing the word by altering its shape.
• Use different Photoshop techniques like anti-aliasing to make small font stand out.
• Be aware of contrast issues.

When designing a website it's crucial to make sure you understand the basics of typography and adhere to best practices that help ensure the website viewer can easily read your content.  Typography can be a challenge because there's many variables that can affect it.  While challenging, it's not impossible to make a beautiful website that looks great and is easy to read.  One of the best ways to control how your website looks is to use CSS (cascading style sheets).  Using CSS you can easily and quickly change the look of your whole site.  CSS also allows you to use very large font on your website.  When working with CSS one has to remember that not all browsers interpret css files the same way so thorough testing is required.  I plan to use CSS when I design my website project in order to have more control and flexibility in the design.

What have I learned so far????

Web design is not new to me but I have to admit that I absolutely have no artistic creativity and tend to stick to the more technical side of web design.  I've designed a few websites in the past but none from scratch, and have always used a template to get started.  I just don't have the visual talent to create something from nothing.  What I learned so far about graphic design is that it's not that complicated as long as you stick to the concept of C.R.A.P.  CRAP stand for contrast, repetition, alignment and proximity.  These four elements of graphic design ensure that a graphic or a web page is visually stimulating and effective.

Graphic design is absolutely everywhere in our lives today and it's something we encounter every day.  You encounter graphic design daily; in magazines, newspapers, websites, mobile device and even while driving on the billboards on the side of the highway.  There's no escaping from graphic design and the influence it has on us.  We are visual, and the best way to get a message across is to visually present your idea or product and if done correctly using the principles of CRAP, it will be effective.  Graphic design on the web has also become extremely influential and essential for businesses, politicians and anyone else trying to reach a wide audience.  The ability to reach millions of viewers across the world without spending a fortune has influenced many aspects of our connected society.

Web vs Print
When designing for the web, there's a few things that one has to keep in mind in order to be effective.  First of all you have to remember the basic design principles of CRAP.  The web presents a few challenges for web designers because of the many different ways that the Internet is accessed.  When designing for the web, you have to keep in mind how your content will be consumed either via a PC, mobile device or even a printer.  The different screen sizes and devices present more of a challenge for a web graphic designer than someone designing for print.  Print is a "static" design that is set and consumed in the same format after it is printed, while web graphic design needs to be fluid and dynamic in order to be relevant and effective.  With web design you can reach a wider audience and it can be as or even more effective than print media in today's connected society.

Reflection
Most of the topics covered in the videos are not new to me and were just a refresher of the things that I've learned over the years "tinkering" with websites and working in the technology field.  For me, the videos reinforced the fact that it's difficult to become a master of all aspects of web design and to make a living designing websites you have to specialize in certain technologies in order to become proficient and effective.  It doesn't mean that you shouldn't grow your skills and expand your knowledge in all areas of web design, but it does mean that there's just so much to know and so many programming and scripting languages out there that it's impossible to master all of them. To be successful in web design you need a modular approach to design that you can build on.  Even if you lack graphic design experience it doesn't mean you shouldn't try designing a website.  There's many resources on the web that can help you overcome your lack of expertise in areas of web design.  For example, when a friend of mine asked me to design a website for his business a few years ago I agreed even though I was lacking graphic design skills. I used a website called guru.com to solicit bids for a banner for the website.  The cost was minimal and I had a professional looking banner that I was able to integrate into the website's template. Bottom line is that you don't have to be an expert in all aspects of web design but you do need a solid understanding of all the pieces that go into web design in order to be successful. With the modular approach to web design you can build on your skills as you learn things like HTML and then build on that knowledge by learning XHTML, CSS and other aspects of web design.

Quiz Me

1.  In order to be cost effective while giving shareholders access to the annual financial report I would utilize the Web to provide shareholders a choice to get the Print Media.  I would give the shareholders an option download the report in a PDF format which they can then print or they can order the report and have it snail mailed to the address of their choosing.  This will be a cost effective way to satisfy the needs of all shareholders.

2. As a graphic's artist in a new city I would send out a brochure that has the best parts of my portfolio to visually grasp the reader's attention while promoting my work and talents.  In this brochure I would certainly include my website address and contact information that ad agencies can access the rest of my information and portfolio.  This would be more cost effective than printing all of my portfolio while still accomplishing my advertising goals.

3. As a small software company the best way to keep my customers updated with changes to our software would be via the web.  Not only can you automate the notification task through emails but also provide a link for the customer to download the new updates.

4. Because information changes frequently, the most labor effective and intuitive way to keep the clients updates is through the web via a portal.  You can setup a web portal that the client can access with their credentials. This will make sure all clients have the same information and it only needs to be updated once in the web portal.

5. In order to reach "the rest of the world" as a small businessperson or teacher there's really one cost effective option and that's via the web.  You can create an electronic version of the small booklets that students or clients can download and print themselves.

6. In order to achieve the goal of compiling a "high-quality" collection of artist's work I would use the web over print media.  With the web you can use the RGB color model to get more brilliant and vibrant color to display the artist's work, while printing on paper uses a four-color process known as CMYK.  CMYK process has limitation on what colors it can reproduce.  The other goal is to show the world this artist's collection and the Web is more cost effective at achieving this goal.

Adding Blog List

Adding the blog list gadget was a breeze and very much a straightforward process.  Took about ten minutes to do after I finally settled down on the template and background image for my blog. On a side note, I downloaded and installed Microsoft Expressions from Dreamspark and installed on my windows laptop.  Next thing on my list is to get it installed on my MAC using Parallels...

Backgrounds: Out of all the blog backgrounds in class, I like Scott's raindrops background the most.

Web Design 1st Class

I have no choice but to start a tech blog......it's not my fault, she made us do it.