1. The internet’s first ever domain turned 28 (younger than me, wow!). Any guesses before you click to see it?
2. Crash Course in Adobe Products
Graphic design is a way to visually communicate with a particular audience. Some examples include ads, logos, book covers, product packaging, brochures, posters, mail pieces, and yes, websites.
There is a difference between how things look on a computer screen and how things look printed out on a piece of paper. Generally speaking, you print at a much higher resolution than what is posted online.
Many graphic design principles will apply whether designing a product for print or for viewing on a computer screen- “Make it easy on the eyes but hard to ignore!”
For example: Text that’s easy to read and consistent in size/appearance; Use of white (open) space; A clear focal point of the design; and colors that don’t clash!
When designing a webpage, you will use text, images, and graphics to convey your message and content to your audience. Some webpages might use more graphics and images while others are more text-based. Other webpages try to create a balance between graphics/images and text.
Examples of Well-Designed and Creative Webpages
Remember: 95% of the web is written information. Users rely on you to design your webpage so it’s easy to navigate and easy to understand. Text and graphics/images help organize your content and let users know where they should go and what they should pay attention to.
A great example of a website that has a very simple design that basically only uses text: Google.com.
Very creative and different designs
Adobe Products
Over the next few days you will check out some of the programs in Adobe CS4 Web Premium. This is installed on the laptops that were used by students last year. The latest version of Adobe products is CS6. The newer programs are a bit different but much of the content is still the same.
With the latest version of Adobe, it is possible to have a Creative Cloud membership to access all of Adobe’s products for a monthly fee. For students and teachers it is as low as $19 or $29 monthly. I use this and it is very cost effective and well worth the money if you are interested in using more than one program at a time. You can also download any or all Adobe programs you want and try them out for one month completely free.
With Creative Cloud you have access to some applications that are not available if you just purchase the entire program on a CD.
Finally, one of the coolest new things about CS6 is the latest version of Dreamweaver, which helps you develop mobile sites very easily (we will be doing this soon).
Disclaimer- this is not a promo to convince you to buy expensive Adobe software! I want you to be aware of what’s out there and what it’s used for. Our class mainly focuses on what is free and widely available online for you to use to develop great websites. You don’t need a bunch of fancy, expensive programs and many, many cool things are possible for web design using just Notepad, Firefox (or any other good browser) and the thousands of free tools and applications available for free online.
You have the following programs installed on your laptop (among some others):
Adobe Photoshop CS4
This program is very powerful. It’s used mainly for image editing and you can also create basic animations. I use this all the time to color correct photos, crop them, resize them, remove red eyes and other imperfections, and to optimize photos for the web (save for web) so they are low-res enough to load quickly on a webpage.
Adobe Acrobat 9 Pro
This can be used to create and edit PDF’s. Sometimes you have no choice but to post a document online as a PDF to make sure everyone will be able to download it. Also, making a document a PDF makes it harder for someone to edit it- for example, if you are sending a bill to a client with important information, if you send it as a PDF it’s much harder for that person to open it and change it than if you send it as a Word Document.
Adobe Dreamweaver CS4
This is used to create webpages. The latest version of Dreamweaver makes it easy to develop mobile websites and apps. It is also up to date with HTML5 and CSS3.
Adobe Fireworks CS4
I use this all the time for graphic design for developing online ads, logos, banners, etc. It can also be used for developing CSS-based webpages. Fireworks operates in conjunction with Photoshop and Dreamweaver and other Adobe products to create very nice-looking webpages, even for people who don’t know much code. You can also use Fireworks to create basic animations. It is also sometimes used for wire-framing websites.
Adobe Flash CS4 Professional
Flash is used to create animations and Flash-based webpages. Flash is great in small doses. We’ve seen examples of bad websites that just hit you over the head with Flash while you sit helplessly waiting for the webpage to load. You don’t want to do this, especially since more people are viewing web content on mobile devices and HTML5 and CSS3 are emerging as the friendly alternative for displaying animation and video online.
Adobe Illustrator CS4
\You can “draw” in Illustrator and create nice illustrations that can be used on your webpage. This program is often used to develop print materials.
Adobe Soundbooth CS4
Sound-editing software that has now been replaced by something called Audition.
Adobe Premiere Elements 11.0 This program is used for editing video. The video can be uploaded to the web or burned to a DVD. It’s not on your laptops but it is on the video computers in the back room and we will do some work with this program. Note: the Elements versions of Adobe products are cheaper and have less bells and whistles. You might have used the Elements version of Photoshop in your Digital Images class.
Want more? Click here to see all of Adobe’s products.
Let’s also check out some of Adobe’s mobile apps on the iPad.
Click on the links for tutorials and help with specific programs. Also, check out some of the books on the shelf!
Important– Some of these tutorials might be for different versions of your Adobe programs. In some cases things haven’t changed and you will have the same settings. However, if you don’t, I would suggest Googling the program and version so you get exactly what you’re looking for- like “Adobe Photoshop CS4 tutorials” or “Adobe Dreamweaver CS4 tutorials.”
– Flash
http://www.kirupa.com/developer/flash/index.htm
http://tv.adobe.com/product/flash/
– Photoshop
http://www.kirupa.com/motiongraphics/index.htm
http://tv.adobe.com/product/photoshop/
– Fireworks
http://www.kirupa.com/motiongraphics/index.htm
http://tv.adobe.com/product/fireworks/
– Dreamweaver
http://tv.adobe.com/product/dreamweaver/
– Illustrator
http://tv.adobe.com/product/illustrator/
More Adobe tutorials- Adobe TV or Google specific program.