Adobe Creative Suite 5 (Adobe CS5) is a collection of graphic design, video editing, and web development applications made by Adobe Systems. The collection consists of Adobes applications (e.g., Photoshop CS5, Acrobat, InDesign CS5, Illustrator CS5, Flash CS5), that are based on various technologies (e.g., PostScript, PDF, Flash).

In about 19 days we will learn all about Adobe’s Creative Suite 5. You can sign up for the unveiling and watch a timer at Adobe’s launch site, Announcing Adobe CS5! Join for the exclusive Global Online Launch Event, Monday, April 12, 2010.

Before you get too excited, this is basically an introduction to the public. Adobe is going so far as to call it a “launch” day but you will not be able to buy the software that day. Adobe has not announced a release day yet, but October 2010 makes sense. This would position Adobe for a strong end to the calendar year, it would give them sufficient time to work on it after the April introduction, and it lines up exactly two years after the release of CS4. That said September/November would make just as much sense, and some rumors are putting the date earlier, noting an 18 month release cycle.

Adobe Creative Suite 5 (CS5) is currently in development, but has been officially confirmed for release by Adobe on the 12th April 2010. Creative Suite have been released roughly 18 to 24 months apart, which suggested a release date for CS5 between April and October of 2010. In July 2009, an investment analyst predicted a specific release date of April 10, 2010. CS5 has been predicted to include some 64-bit only applications. Adobe have announced that Premiere Pro and After Effects will be released as 64-bit only applications in future versions past CS4, joining Photoshop as part of their 64-bit lineup. They believe this will help consumers accelerate their video workflow, especially that of high definition content.

Keyboard Shortcuts are keystrokes used to quickly invoke a command. As well, shortcuts usually (but not always) involve a modifier key such as Ctrl/Cmd, Alt/Opt, or Shift. For example, instead of choosing Select » Deselect from the menus, you could simply press Ctrl/Cmd+D.

Keyboard shortcuts can improve your efficiency, and in some cases, they can even invoke commands that might not otherwise be available (e.g., zooming while a dialog box is open, or inserting a Select forward layer command into an action).

One of Photoshop’s strengths is that it makes extensive use of keyboard shortcuts; but, there are so many that it’s difficult to remember them all. So, I’ve created a “cheat sheet” that’s organized by menu, as well as alphabetically by key. These “cheat sheets” are available in the following flavours (thanks to Trevor Morris.

Photoshop

• Adobe Photoshop CS4: PC | MAC
• Adobe Photoshop CS3: PC | MAC
• Adobe Photoshop CS2: PC | MAC
• Adobe Photoshop CS: PC | MAC
• Adobe Photoshop 7: PC
• Adobe Photoshop 6: PC
• Adobe Photoshop 5: PC

Illustrator

Plot points and manipulate bezier curves faster by using keyboard shortcuts for common actions while using Illustrator. Learn a few new shortcuts each day and you will greatly improve your efficiency while using Illustrator.

• Illustrator CS4 PC | MAC
• Illustrator CS3 PC
• Illustrator CS2 PC | MAC
• Illustrator CS PC

In computing, a keyboard shortcut or hotkey is a finite set of one or more keys that invoke a software or operating system operation when triggered by the user.

Keyboard shortcuts are typically an alternate means for invoking one or more commands that would otherwise be accessible only through a menu, a pointing device, different levels of a user interface, or via a command console. Keyboard shortcuts generally expedite common operations by reducing input sequences to a few keystrokes, hence the term “shortcut”.

Some keyboard shortcuts require the user to press a single key or a sequence of keys one after the other. Other keyboard shortcuts require pressing and holding several keys simultaneously. For simultaneous keyboard shortcuts, one usually first holds down the modifier key(s), then quickly presses and releases the regular (non-modifier) key, and finally releases the modifier key(s). This distinction is important, as trying to press all the keys simultaneously will frequently either miss some of the modifier keys, or cause unwanted auto-repeat. One exception is shortcuts involving the Esc key, which almost always requires pressing and releasing the Esc key before pressing the next key.

Enjoy the post and let me know of any other shortcuts I missed out on or should know about.

It’s 2010 and the old trends of web design are pretty much rolling out. With a whole new crop of designers springing up this year, new design is sure to follow. To keep your users interested in your business (whatever it is), you’ve got to integrate new elements to your existing website, or completely give it a drastic makeover to suit the upcoming trends in the year 2010. For a start, here are the things you can imply to make a dramatic change to your existing site in 2010.

Gigantic Logos and Headers

This is probably the best alternative to all the flashy flash you want to use on your website. Make note and remember it, “flash is outdated” so better not use it in your 2010 website design. You can use a huge banner instead. This way, the first page of your website will give a one-image impression like that of flash, but instead of the annoying clicking your user will simply have to scroll down to get the information.

Magazine Layout

Since the internet users are inclined more towards entertainment and interesting short articles, web designers can profit this interest factor by creating magazine type layout, where all information is displayed attractively and briefly like that in a glossy magazine.

Hand Drawn Sketches

This is a big break to the traditional graphics and illustrations you find on the web everywhere. It gives simple, unique and personalized look to your website visitors. Similar to hand drawn images, handwriting style is also gaining much popularity.

Typography

This aspect is increasingly gaining popularity and is highly recommended for your 2010 web design. Instead of using the regular fonts, it’s always better to try some larger, more happening fonts to make yourself stand out.

One Page Designs

Giving your website a “business card” look is another web design trend for future. This will eliminate the nasty experience of navigation and will give the user all info at one place. This kind of design will also help eliminate the needles material from your website.

Application of Large Images and Pictures

Large images and illustrations will be used as an invitation for the visitors. Exciting images have played a contemporary role in attracting website visitors and keeping their interest build up, this process will continue more comfortably by designers in 2010.

Replacing Icons For Text

A small icon representing the whole section instead of using words is also quite appealing and recognizable for users. This also increases the chance of people to spot that specific section easily.

Enough White Space

White backgrounds are the best choice for your website and perhaps a safer choice too. To make anything prominent and make your website a less hurtful setting for the users eyes, always prefer white or nude background colors.

The coming year is supposed to rock the boat of web design in many many ways! However, following the above given design ideas can give your website the trendy makeover it needs for the year 2010.

Here is a list of exceptional RSS feeds to subscribe to in the design community. These blogs consistently publish premium and useful content related to design. Some you might already subscribe to and some you might not, but these are the ones I subscribe to and you should also. Feel free to leave some more in the comments if you know of any RSS feeds that should not be missed. Enjoy!

Lucas Cobb Design – Web | RSS

Abduzeedo – Web | RSS

1st Web Designer – Web | RSS

Colorburned – Web | RSS

Creative Nerds – Web | RSS

Design Bump – Web | RSS

Go Media Zine – Web | RSS

Instant Shift – Web | RSS

Naldz Graphics – Web | RSS

PSDTUTS – Web | RSS

Tutorial9 – Web | RSS

Download the OPML file – Subscribe to all these RSS feeds at once by importing this OPML file into your feed reader.

Not as many design blogs have gone the route of Facebook as gone the route of Twitter, but I went ahead and compiled a list of design blogs on Facebook that you should be following anyway. Facebook allows you to interact with your subscribers so much more than through RSS and even Twitter. Along with pictures and status updates, through Facebook you can share video, flash, events, news and even integrate your status updates with Twitter so you kill two birds with one stone. It may take some getting used too, but Facebook is by far the best social resource for marketing you blog and/or business. Enjoy the compilation and if I missed any let me know in the comments.

Lucas Cobb Design – Facebook

Colorburned – Web | Facebook

Vital Design – Web | Facebook

VectorTuts – Web| Facebook

Design Juices – Web | Facebook

VecTips – Web | Facebook

Smashing Magazine – Web | Facebook

Social Media Examiner – Web | Facebook

Vecteezy – Web | Facebook

PDSTuts – Web | Facebook

Pro Blog Design – Web | Facebook

GoMedia – Web | Facebook

Fuel Your Creativity – Web | Facebook

Fudge Graphics – Web | Facebook

From The Couch – Web | Facebook

Design You Trust – Web | Facebook

Design Shard – Web | Facebook

Design Observer – Web | Facebook

Abduzeedo – Web | Facebook

Pixels

In digital imaging, a pixel (or picture element) is a single point in a raster image. The pixel is the smallest addressable screen element, it is the smallest unit of picture which can be controlled. Each Pixel has its address. The address of a pixel corresponds to its coordinate. Pixels are normally arranged in a 2-dimensional grid, and are often represented using dots or squares. Each pixel is a sample of an original image, where more samples typically provide more-accurate representations of the original. The intensity of each pixel is variable. In color image systems, a color is typically represented by three or four component intensities such as red, green, and blue, or cyan, magenta, yellow, and black.

The word pixel is based on a contraction of pix (“pictures”) and el (for “element”); similar formations with el for “element” include the words: voxel and texel.

Pixel Art Scaling

Two standard scaling algorithms are bilinear and bicubic interpolation. Since they work by interpolating pixel colour values, and usually set each pixel to a value interpolated between four input pixel values, they introduce some blur into the output (a form of box blur). Although this is acceptable for continuous-tone images, it destroys contrast (sharp edges) and is often seen as ruining the appearance of line art.

Nearest neighbour interpolation preserves these sharp edges, but it introduces aliasing (or jaggies; where diagonal lines and curves appear pixelated). Thus, the ideal algorithm for enlarging line art would be one that would interpolate areas of continuous tone, preserve the sharpness of orthogonal lines and smooth (ideally with anti-aliasing) diagonal lines and curves. Several attempts have been made to accomplish this.

Vectors

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.

Vector graphics formats are complementary to raster graphics, which is the representation of images as an array of pixels, as it is typically used for the representation of photographic images. There are instances when working with vector tools and formats is the best practice, and instances when working with raster tools and formats is the best practice. There are times when both formats come together. An understanding of the advantages and limitations of each technology and the relationship between them is most likely to result in efficient and effective use of tools.

Editing Vector Graphics

Vector graphic drawing software is used for creating and editing vector graphics. The image can be changed by editing screen objects which are then saved as modifications to the mathematical formulae. Mathematical operators in the software can be used to stretch, twist, and colour component objects in the picture or the whole picture, and these tools are presented to the user intuitively through the graphical user interface of the computer. It is possible to save the screen image produced as a bitmap/raster file or generate a bitmap of any resolution from the vector file for use on any device.

The size of the file generated will depend on the resolution required, but the size of the vector file generating the bitmap/raster file will always remain the same. Thus, it is easy to convert from a vector file to a range of bitmap/raster file formats but it is much more difficult to go in the opposite direction, especially if subsequent editing of the vector picture is required. It might be an advantage to save an image created from a vector source file as a bitmap/raster format, because different systems have different (and incompatible) vector formats, and some might not support vector graphics at all. However, once a file is converted from the vector format, it is likely to be bigger, and it loses the advantage of scalability without loss of resolution. It will also no longer be possible to edit individual parts of the image as discrete objects.The file size of vector graphic depends on the number of graphic elements it contains.

Vector formats are not always appropriate in graphics work. For example, digital devices such as cameras and scanners produce raster graphics that are impractical to convert into vectors, and so for this type of work, the editor will operate on the pixels rather than on drawing objects defined by mathematical formulae. Comprehensive graphics tools will combine images from vector and raster sources, and may provide editing tools for both, since some parts of an image could come from a camera source, and others could have been drawn using vector tools.

In this photoshop tutorial you will learn how to create a blog design from scratch using a combination of gradients and selections. Here is a .psd of the final to compare your final with. You can download the .psd here. Let me know your thoughts and feelings on this project in the comments below and as always, enjoy!

Here is a preview of what we will be creating:

Photoshop Document Size

1. Lets begin by creating a new Photoshop document – File > New with a width of 900px and a height of 1200px.

Building The Header

2. Choose your Rectangular Marquee tool (M) and put in the following options below. Feathering to 0px, then choose the drop down menu and pick Fixed Size. Set the width to 900px and the height to 120px as this will be the width and height of our header.

3. Click above the document and a selection should appear. Move the selection to the very top as shown in the demo below if not already in place.

4. Now create a new layer (Layer > New > Layer…) Name it Header. Select that new layer in your layers pallet and go to Edit > Fill and in the first drop down choose color… Add in the hex code #c7dba9. If you are on the background image we could have issues later on. Press ok and it should fill your selection with a light green.

5. Next we are going to add some shadow to the bottom of the header. Keep the header section selected. If it’s not go to your layers palette where all of your layers are stored and Command + Click (mac) Control + Click (PC) on the thumbnail of the Header layer. That will bring up a selection of that layer. After the selection is made create a new layer in your layers pallet and grab your gradient tool (G). Make sure in the gradient picker you choose the Foreground to Transparent gradient.

6. With the selection active and black set as your foreground color start about 20 pixels below the header and click and drag up while holding down the shift key (makes a straigt line) release the mouse button at about halfway up the header. Rename this layer Header Shadow. Change the blending mode to soft light and adjust the opacity as you see fit. I set my opacity to 75%.

Logo & Blurb Time

7. Text tool (T) and pick Arial, Bold, 50pt, white and click near the upper left side of the header type in the title of your blog in this case “Blog Title”.

8. Now onto the blurb below your title. With your text layer selected hold cntrl and press J (cntrl + J) to duplicate the type layer. Now use the move tool (V) and once you do this hold shift and press your down key 4 times. Now the text tool (T) again and set to 25pt and type in your “blurb”.

9. After you finish typing right-click on the Blog Title layer and choose Blending Options… Add a drop shadow with the figures from below. Continue on your blurb layer as well with the same settings.

On To The Navigation

10. Lets start off by bring in some guides. Your rulers must be out to do this (cntrl +R). Bring a guide in from the top to about 2 pixels underneath your logo. Then drag in a guide from the left and have it stop right at the 6 on the top ruler of your document. Drag out another guide from the left and increase each one by 1.25 inches which means this time it will stop at 7.25 the next one will be 8.5 etc…until you have five boxes for your navigation to go into. See the screenshot below.

11. After you have the guides in place get your text tool (t) and choose Arial, Regular, 16pt, White and type Home in the first box. It should be positioned just like in the screenshot above. Finish the rest of the navigation items which are Tutorials, Freebies, Trends, and Contact and make sure they all fit in their boxex.

12. Highlight all of your navigation items and press Command + G or Control + G to group them together. Name the group Navigation so we remember what it is.

Setting The Background Color

13. Now we are going to give our site its main background color. Head to the very bottom of your layers palette and find the layer called background. If it has a lock by its name double click the lock and then press ok. Then go up to Edit > Fill… > Color… and put in the hex code #65754d.

14. We are going to add a highlight at the bottom of the header so that it gives the header a subtle separation from the body background. While selected on your background layer create a new layer. Then grab your Single Row Marquee tool and click inside right underneath the header. The correct selection should look like below.

15. Fill that selection with #f3ebe0 and you should get something like the below screenshot.

The Content Section

16. First thing we want to do is clear all of our guides. So go up to View > Clear Guides. Now lets create two guides that will help us align our content correctly. Go back up to View > New Guide… choose Vertical and give it a value of 25px and hit enter. Repeat that process except this time put in 875px. This gives us 25px of “padding” on each side. Also make a horizontal guide set at 150px. This will give us 25px of “padding” from our header as well.

17. Now I can draw out my sidebar using the rectangular marquee tool set the rectangle marquee to the fixed size with a width of 275px and a height of 430px.

18. Make a new layer and fill it with any color. Double click on that new layer in your layers pallet and give it a stroke of 1px filled with hex color:#000000 and opacity set to 10%. Now select gradient overlay and use the settings shown below.

19. Now we will give our sidebar a header. Set your Rectangular Marquee to 275px by 60px. Make a new layer and fill it with hex color:#546140.

20. Now use your Rectangular Marquee and set it to 275px by 1px. Make a new layer and fill it with hex color:#f3ebe0. This will add a highlight section to our side bar.

21. Select the 3 sidebar layers and group them (cntrl+G) and name it sidebar. Now duplicate that group to make a second sidebar.

22. Mave another vertical guide 25px to the right of the sidebar as shown below.

23. Now we are going to make our main content sections. Use Rectangle Marquee on fixed width set to 550px x 280px. Create the header for this main content the same as you did with the sidebar. You can copy the layer styles and paste them to stay consistent.

24. Copy the main folder 2 more times and make the 3 main content sections. See below:

The Footer

25. Grab your rectangular marquee tool set on normal and start 25 pixels below last post and select the rest of the canvas. Fill it with #546140 and it should look like the screenshot below. P.S. I had to adjust the height of the second sidebar in order for it to be lined up with the last post.

Now its up to you to add the content. Have fun with it and I hope you learned some things about designing a professional clean looking site. Let me know what you liked in the comments.

I’ve seen a few posts floating around dealing with the best design blogs to read on a daily basis and I wanted to put my two cents in. These are the design blogs that I read on a daily basis and I find they help me improve as a designer because of the tips and tricks they provide on a regular basis. I’m not saying all you should do is read design blogs, but it wouldn’t hurt to stay ahead of the game by keeping tabs on them.”

My Faves

Abduzeedo is a great place to see inspirational posts. The user-news section is top notch and always up to date with the design trends.

Color Burned is always chalk full of freebies and giveaways. He also has great insight into design as a business and shares that knowledge.

Creative Opera is a new blog I just started following, but any info you need on Facebook you can find here. There is also a personal touch to the posts that is not to be missed.

Congrats to them for making it into the Smashing Network recently. I stop by this blog daily for all my CSS updates and all things code.

Design Juices keeps you in the loop on upcoming artists, photographers, designers, etc. The artists they showcase are very impressive and appreciated.

Design Ora keeps me up to date on the latest machinery and flash web design. There is always free backgrounds to be had at this place also.

Echo Enduring has a spaced out theme with amazing posts ranging from designing to the Olympics. They also offer exclusive texture packs and tons of freebies.

Line25 is another blog that just made it into the Smashing Network so congrats to them as well. You can see all kinds of design related posts here. Great read for sure.

LBOI just turned 1 year old so a HUGE CONGRATS to them. The posts here have a personal touch that you just can’t find on any other blog. Great design related articles all the time.

What is there to say about Six Revisions that hasn’t already been said. One of the first and still one of the best design blogs out there. You have to check them out.

Three Styles has boat loads of tutorials and design resources posted daily. They are also celebrating a 6 month birthday so another Congrats to them.

Web Designer Depot is your one stop shop for all things web design. These guys post everything from code snippets to graphic optimization. This is not to be missed.