Tampilkan postingan dengan label Web Design. Tampilkan semua postingan
Tampilkan postingan dengan label Web Design. Tampilkan semua postingan

Kamis, 25 September 2008

First Look: Photoshop CS4

Typically a first look at a newly-updated product starts out with phrases like, “the long awaited” or “the much anticipated.” Not so with Photoshop CS4. The truth is that latest version of Photoshop will hit the streets practically on the heels of Photoshop CS3, its predecessor which debuted a little less than 18 months ago.

What kind of features could Photoshop CS4 have now that it didn’t have slightly over a year ago? As it turns out, the Photoshop product managers have barely slept since herding CS3 out the door and the answer is, “Quite a lot, thank you.” Photoshop CS4 sports an overhauled workspace, OpenGL features like a rotating canvas, new panels for Masks and Adjustments, on-image controls for some adjustments (a la Photoshop LightRoom), a 3-D engine, and that’s just for starters.

Here’s what to expect from the latest version of Photoshop when CS4 ships in October.
Workspace overhaul

In an attempt to significantly streamline your work environment and lessen window clutter, the new Application Frame was born. It confines all things Photoshop to a single resizable and movable window. You can grab the whole mess—documents and all—and move it to the side of your screen (or better yet, to another monitor) so it’s out of the way. If you open more than one document, they’re displayed in tabs (just like in Safari).

At the very top of the frame, you’ll notice a new row of tools called the Application Bar. Here you’ve got one-click access to handy stuff like Extras (grids, rulers, guides), zoom percentages, and more. The real gems, though, are the new Rotate Canvas and Arrange Documents menus. Rotate Canvas will make tablet users squeal with delight because it creates a more natural way to paint or draw. The Arrange Documents menu lets you view several open documents side by side, which is handy for before/after evaluations or just managing a bunch of open windows.
New masks and adjustments panels

With Photoshop CS4, palettes are out and panels are in. In an effort to reduce dialog box clutter, adjustments like Levels, Curves, Hue/Saturation, and so forth now happen in a single Adjustments panel, meaning dialog boxes will no longer litter your screen. The new Masks panel is a little more exciting because it lets you feather masks on the fly (nondestructively) and control their density, which lets you make them partially see-through. (Why it’s not called opacity is a mystery.)

Also new are “on-image” adjustments for Curves, Black & White, and Hue/Saturation adjustment layers. Instead of making a selection, you can apply the adjustment to a specific tonal range by clicking on the image itself and dragging up or down with your mouse.
Extended exclusives

If you pop for the $999 Extended version, you’ll notice a couple of new tools gracing your Tools panel called 3D Rotate and 3D Orbit, as well as a new menu stuffed full of commands like New Mesh from Grayscale, Invert Visible Surfaces, and Create UV Overlays.

With CS4, Adobe has stepped rather firmly into the realm of 3-D modeling, giving you the ability to convert 2-D into 3-D, along with a fair amount of control over object textures and lighting. You can even paint directly on the surface geometry of a model in real-time and open models downloaded from Google right there in Photoshop. Adobe also added a reparameterize command that can quickly rebuild the surface geometry of your 3-D object for smoother painting.

If you’re a video editor, you may appreciate Extended’s single-letter keyboard shortcuts, smooth display of no-square pixels, and the ability to preview and export audio.

Other features

Among the other enhancements are smoother screen display at odd zoom levels, the ability to “toss” your pixels with the spacebar, a bird’s eye view quick-zoom, a new Vibrance adjustment layer (straight from Camera Raw), spring-loaded tools allowing you to temporarily switch from one tool to another, a pixel-grid view above 600-percent zoom, linked masks for Smart Objects, drag-resizing for brush cursors, and the ability the delete layers by pressing the Delete key. (You can’t believe how handy that latter feature is!).

Camera Raw 5 also has major improvements like the ability to edit selectively using an Adjustments Brush or Gradient Filter. Adobe Bridge wasn’t left out either and now boosts faster performance, one-click previews, Spotlight integration, a super handy path bar (like a trail of breadcrumbs), and more.

Source: macworld.com

What’s new in Photoshop CS4

Earlier today, Adobe announced major upgrades to their entire line of products - except for Acobat - to the new Creative Suite 4. Since most of the applications in the various incarnations of the Creative Suite 4 are not necessarily relevant to this blog, I’ll just focus on what’s new in Photoshop CS4.

Already, there seems to be a lot of questions out there by designers and photographers wondering “should I upgrade to Photoshop CS4″. I think there is and I’m not just saying that because I work for a company that develops plug-ins for Photoshop. I really believe it and here’s just a few reasons why.

1. Photoshop CS4 is taking advantage of your GPU (Graphics Processing Unit). This makes rendering of effects or processing of filters ridiculously fast. I was in the audience at CS4 launch event in San Francisco and watching Johnny L from Adobe spin a 2 gigabyte file around like it was 100 kb JPG was incredible. Accessing the GPU for more processing power isn’t anything new. Video applications and 3D applications have been doing it for years, but it is great to see it happening in Photoshop CS4.

2. The new Mask palette. This may not seem like a big deal to some, but I like how Photoshop CS4 has brought the options from the Refine Edge dialog box into the new Mask Palette. When I use Mask Pro 4, I like to save those selections because sometimes I need to go back and refine them depending on the situation. Having these options available in the palette as opposed to the Refine Edge dialog is a nice time saver for me. Your mileage may vary.

3. The new Adjustments Palette. Adjustment layers are nothing new to Photoshop. In Photoshop CS3 and earlier, you would typically access these by going to the bottom of the Layers palette and then clicking on adjustment layer and then choosing the type of adjustment you wanted to make. Or you could go to the Layer menu and choose New Adjustment Layer. Now in Photoshop CS4, you get the option to click on the new Adustments Palette (which happens to be grouped with the Mask palette) and you get a nice icon representation of the various adjustment layers that can be added. Maybe this hasn’t gotten you too excited yet, but what’s nice is that right below those icons are a bunch of Adjustment Layer Presets.

For regular readers of this blog, you’ll know that I’m a huge fan of presets (onOne makes presets for Lightroom and Adobe Camera Raw in addition to our new onOne Exchange site for PhotoTools presets). They can save you tons of time. Well, now Adobe has given us Adjustment Layer presets and they are written in a way that they are easy to understand no matter what your skill level in Photoshop is. The presets are very similar (perhaps identical, I haven’t checked yet) to the adjustment presets in Adobe Camera Raw. I love having access to these in Photoshop CS4 though.

4. Share My Screen. This is a great new feature that will be very familiar to those who have ever used Acrobat Connect before. It lets you share your screen with another person (client, co-worker, etc) over the internet so they can see what you are trying to communicate. Also, you can grant access to the other person so they can take control of your mouse. It’s pretty cool. We use Acrobat Connect all the time at work, but having the ability to stay within Photoshop CS4 and say Share my Screen, well, I think that’s kinda cool. Not everybody needs this feature. For example, you work alone and never need to show anybody anything. This feature isn’t for you and won’t entice you to upgrade to Photoshop CS4. But I’ll use this feature all the time and will be very valuable to me.

5. Improved Auto Blend Layers. This feature was in Photoshop CS3 and I used it to blend my panorama shots that I stitched together using PhotoMerge. Now in Photoshop CS4, when you select two or more layers in a document and choose Auto Blend you get a Blend Method dialog box (you didn’t before, it just did its thing) giving you two options. The first method is the Panorama method and pretty much does what it did in Photoshop CS3. But new in Photoshop CS4, you get a second option called Stack Images.

This is cool. What you can do with it is take areas of focus in the different layers and have Photoshop CS4 automatically mask out the out of focus area leaving you with an image that has everything in focus. This is going to have a lot of application and use for macro photography and for landscape photography where you want to be able to have pretty much unlimited depth of field. Just take a bunch of shots (on a tripod) and manually focus to get the areas you want in focus. Bring them into Photoshop CS4 and with this feature, you’ll get a final image that has everything in focus. Pretty cool stuff. If you’re having a hard time envisioning this, I’ll prepare some examples for a future blog post.

That’s all for now. I think this is a pretty compelling upgrade for the serious Photoshop user that will provide lots of new benefits.

Source: ononesoftware.com

Rabu, 24 September 2008

Basics of Web Layout

When you create a Web design, one of the more overlooked aspects of the design is the layout. Now, many people think about how to do a layout (CSS, tables, frames, etc.), but the basics of Web layout are often completely ignored.
Space and Whitespace

Use the whole space, but don't be specific in your use. In other words, use relatively sized layout sections on your Web pages, so that they expand and contract to fit the browser window.

Keep screen resolution in mind. While the majority of computer users have moved away from 640x480 resolution, keep that in mind when you're designing. Having customers leave because all they can see is a logo on their monitor is not good customer service.

Use color to define spaces. If you want to have a page that's a specific width, why not center it on the browser screen and make the background color of the page a different color? This will help the page appear to resize for different browsers; larger browsers will just have more background color showing, while smaller browsers will have less or none showing.
Images and Graphics

Align your images. One of the most common newbie layout mistakes is to slap images into a page willy-nilly without thought to layout. If you just use an img tag and then write text to follow it, you'll have the image and then one line of text to the right of it. Using the align attribute will help make your images part of the layout.

Balance the graphics and text on a page. It's easy to get carried away with lots of images and animations, but they can make a page very hard to read. When you're considering your layout, remember that images are a major part of the design, not just afterthoughts.
Text Width

Think about text width. This is often called the "scan length", and refers to how many words are displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Longer than that, and the text is hard to read, shorter than that and it's disjointed and distracting. When designing your layouts make sure that the major text area displays the text in a readable width.

Centering text is inadvisable. One of the first layout techniques that a new designer learns is the center tag, and they center everything on their pages. However, centering is very difficult to do well and it's often hard to read.

Articles source : http://webdesign.about.com/od/layout/a/aa062104.htm

Adding a Favicon or Favorites Icon

Have you ever noticed the little icon that shows up in your bookmarks and in the tab display of some Web browsers? That is called the favorites icon or favicon.
First Create Your Image

Using a graphics program, create an image that is 16 x 16 pixels. This is small, so try out many different versions until you create the image that will work for your site.

Save the image as a GIF or BMP file with 256 colors or less. Icon files, like Web images, have to display on computer monitors, so they can't reliably display millions of colors. However, since an icon file is for Windows displays only, it can be 256 colors, rather than the Web standard 216.
Converting it to an Icon

Once you have an acceptable image, you need to convert it to the icon format. There are many icon editors available, and Sue Chastain, the Graphics Software Guide, has a list of some good ones. I used IconForge by CursorArts. Be sure to save the file as favicon.ico.
Publishing the Icon

It is simple to publish the icon, simply upload it to the same directory as the file you want bookmarked. For example, for this page on the HTML site at About, I would place it at
http://webdesign.about.com/library/weekly/favicon.ico

You can also put a different icon on every page of your site (if you like), or point to one icon in many folders. To do this, you add a link reference to the head of every HTML document that you want the favorite icon associated with. e.g.[blockquote] [/blockquote]

Article Source: http://webdesign.about.com/od/advancedtutorials/a/aa070300a.htm

To Flash Or Not To Flash: That Is The Question

The Downfalls: This is one of those popular debate topics in web design forums. What types of web sites should use this new technology and what types of sites should not? If you have ever visited a site that asked you to download the Flash 3 or 4 plugin, then you know exactly what this article is trying to portray. For those that are not familiar with Flash: Flash is a plugin and program developed by Macromedia that gives sites dynamic animation and interactivity. The only downfall is that in order to view sites that use this technology, you must first download the plugin, which on some computers can take anywhere from 5 minutes to 15 mintues depending on your connection speeds. This is not an obstacle for most surfers, since many are now leaning towards cable connections. But for some, it isn't a matter of fast or slow loading - some surfers are very cautious about what they download from the internet, and they may see this "Download Now" box as threatening to their system. Some surfers do not even go into sites that require plugins for this reason only. And some do not enter because they do not like waiting for components and animations to load. These are the people that want the information that they went to the site for - not to watch an animated bear introduce them to the site.

E-Commerce and Flash Don't Mix: It is not advised for E-commerce sites to use Flash Technology. The purpose of an e-commerce site is to sell items to consumers that visit their site. The visitors want to see the products and get the information quickly and easily. By implementing an e-commerce site in Flash, that company is limiting the amount of consumers that go into the site, and could potentially lose sales because of this. Most sites that use Flash also offer an HTML version for the customers that do not have the plugin, or that choose not to download the plugin. This is strongly advised for all companies to do that use Flash in their E-commerce site. Let's put it this way: If you owned a company that sold products, and this company was on an island in the pacific very close to the shore, would you require that everyone that wants to go into your store obtain a boat to get to your store? Or would you build a bridge for them to cross? Better yet, you probably would have been better to build it on the main shore in the first place for "easy access". This is the problem with Flash today. Until at least 98% of the consumers out there have their Flash plugins already installed, it is not advised to implement an E-commerce site in Flash. Of course, that is ultimately the company's decision.

The Good Side of Flash: Yes, Flash does have its good points. Flash is very beneficial to Entertainment web sites. Sites that are mainly for entertainment purposes and do not run the risk of driving sales away are ideal for Flash Technology. Informational sites are also starting to use Flash in parts of their sites to depict moving images and sound as a guided tour or clips of information that make the site more interesting. Flash is also great for children and game sites. With Flash Technology, your site can interact with the visitors in the form of games or funny cartoons. It adds fun and excitement to the web with sounds of music, voices, and colorful moving images and pictures. So yes, Flash can be very good for some sites.

Bottom Line: If you have an E-commerce site, do not limit those that can view and purchase from your site. If you own an Entertainment or Artistic site that needs the technology of Flash, but that will not hinder the purpose of your site, then by all means, Flash like there's no tomorrow.

Article Source: http://www.edezines.com/article2.shtml

How screens diplay colors

Technically speaking, colors are the way our brain, by use of our eyes, interprets electromagnetic radiation of a wavelenght between 350 and 750 nanometers.
The different wavelengths are seen as different colors, as in the spectrum below. You have probably seen a spectrum like this before. Electromagnetic radiation with a wavelength of over 750 nm is called infra-red, and radiation under 350 nm is ultra-violet.

As discussed in my section about, Color Theory, a computer monitor is made up of thousands of tiny little red, green and blue dots which are grouped three and three. These little dots are close together-- so close that we don't really see them as dots, but rather our eyes mix them up to form one homogenous color.
All colors in the spectrum can be generated with this system of dots. For instace, if the red and green dots are shining at 100% their strength, while the blue not lit at all, you will see the result as a pure yellow color. Each of the three dots can have any value from 0 to 255, which means that the total number of possible colors is 256*256*256 = 16,777,216.

Any color can be represented by a specific combination of three numbers. The yellow mentioned before would have the number 255, 255, 0. The first number represents the red dot, the second represents the green dot, and the last represents the blue. Therefore, a pure blue color would then be 0, 0, 255. The lower the number, the less that color dot is lighted. For instance, by lowering the number for the blue dot-- to the color identified as 0, 0, 100-- you can produce a darker blue. White is produced by the combination of the highest amount of all three colors, so the code for white is 255, 255, 255. Black, on the other hand, is produced by a lack of other colors, so the code for black is 0, 0, 0.

From Sitepoint