Default Green Orange
Davis Calvert
Web and Media design
RSS
  • Home Page Home
  • About

Photoshop: Masking and non-destructive manipulations

Graphics 1 Comment »

I can stress enough how important masks are to learn in Photoshop. Chances are, if you don’t already use masks you’ve either never heard of them or can’t be bothered to learn or care. Let’s explain why you should care. So you’ve been working hard at this photomanip for hours, you’ve got the effects you like. But something is just off. Oh no! A part that you erased earlier shouldn’t have been.  You can’t undo that far back so you have to either go with it or (shudder) start over.

This is where masking comes in. If you want to erase partially, or wholly, part of an object, you can add an alpha mask to it (or even to groups!) and paint in grayscale onto the mask which changes the layer’s transparency in that spot. It’s a lot like using the eraser tool but…not. You see, the eraser tool is what we call a destructive manipulation and masks are non-destructive.

Let’s jump into an example. Here’s a butterfly. masking0

It looks like crap.

So let’s erase the background and make it blend better. You probably whipped out your eraser tool, or more accurately; kept reading this paragraph and did not touch Photoshop at all. But fret not, I will humor the destructive method first.

masking1

Here you can see that I used the eraser tool to get rid of the background and draw a new gradient behind it with a cloudy texture. THIS IS BAD. No, bad designer! Here, take a look at this useful little button:

masking3

That rectangle with a circle in it applies an alpha mask to the layer (you can add multiple masks) and as you can see, the layer’s mask was altered instead of the beautiful butterfly itself this time.

For you old hats out there, don’t laugh at the newbies reading this (or this poster) because there was a time when you didn’t know about the mask feature and erased all your images manually too!


November 23rd, 2009  
Tags: layer, mask, photoshop



Businesses realize the power of video on their site

Video 0 Comment »

Only within the last few years have regular Joes and Janes started adding video of themselves to their business sites but for many years before, they’ve had access to managing their own rich content. So why now? Well, I have no idea. Most people tend to wait for something to become so easy that it’s practically cakewalk or so trendy that you’re uncool for not doing it. Integrating rich content like video is both.

Every Windows computer now comes with Windows Movie Maker and every (good) web host offers enough storage to put video files of the CEO/VP/staff of a business on their site. Lots of people use this approach to ‘wow’ their users or keep it real with their clients. In today’s world, people like for you to really connect with them and lose all of that corporate-marketing jargon B.S. The businessman/woman of 2010 realizes that and seeks to humble themselves at the level of their clients rather than perch themselves atop a high cliff of untouchableness. This is where putting video on your site comes in. If you video your staff simply talking about the roles they perform, people will be more empathetic and much more warmed toward your huge evil corporation (or small business) :)

That’s what people really feel like; that huge corporations are evil empires and small businesses are scam artists. The businesses that are trusted are the ones with genuine reputation and a knack for personally connecting with each of its clients. That’s really hard to do with the random person cruising into your site–unless you add video.

So your homework for tonight. Make a 1.5-2 minute video of at least one of your staff members (maybe you) casually telling your users what they do at your company. Do it, now. Post it on your site. And let me see. Heck, if you absolutely can’t then just have me do it for you.


November 14th, 2009  
Tags: business, integration, Video



Why save as .png?

Uncategorized 5 Comments »

First of all, what the heck is png? It is a MIME (multimedia) format for images and it stands for Portable Network Graphic. As the name implies, this particular form of image is specifically used for networks, or more accurately; the internet. PNG is web-compliant in that it best supports 72-dpi (web size) and 24-bit coloring. Of each of the three common file types for Web have specific uses. Gif, Jpg, and Png. Here I’ll compare them for you so that you can better understand the differences and make the right choice in the right situations.

Let’s start with GIF. It stands for Graphics Interchange Format, and the most notable features of GIF are the support for transparency and animation. Back before PNG was widely used (or even created) you had to use GIF to get either of these two effects. But the problem was that gif only supports up to 256 colors (8-bit). So you either had to split a large, colourous image into bite-sized chunks to get your transparency or just deal with extreme color loss. Since it is lossless, you don’t see grody compression artifacts when you lose your color, but you do see dithering, the result of approximation of color using it’s 8-bit pallette. To this day I only ever use gifs as 1pixel completely transparent “spacer” images. These are used by web designers to create invisible blocks on their sites to space text and web elements precisely.

JPG, unlike GIF, is a “lossy” image type which incorporates compression (yep, just like .zip and .rar) to reduce the filesize of images. It was created as a means to accurately display photographic content, and was widely accepted as an internet standard since it could do 24-bit color (about 16 million). It does not support transparency or animation and often looks extremely bad unless saved at 100% quality (which is usually as big or bigger than a png in filesize). Jpg files also have junk bytes reserved for meta and exif data, so lots of digital cameras rightly accepted this as their default format since they could put all of the information about the taken picture hidden inside the file.

A lot of people I talk to have never even heard of PNG files before.  They are the ultimate balance between GIF and JPG as they support transparency, animation, metadata, exif, and interlacing all through extensions of png like APNG and MNG. Macromedia, now Adobe, heavily rely on a special 32-bit version of the PNG to encode things like vector locations and editable spots or layers so that owners of the image can open it and edit the source file. Think of 32-bit pngs as displayable photoshop PSD’s. It should be pretty clear to you by now that png is the way to go almost all of the time. 99% of my graphics are png, the other 0.9% and 0.1% are jpg (slightly reduced quality for filesize) and spacer gifs respectively.

Stop using ugly jpgs with horrible compression for your web graphics, NOW.


October 31st, 2009  



Video tools: Vegas vs Pinnacle vs Premiere vs Ulead

Video 1 Comment »

BATTLE ROYALE!

Today we’re hitting the spot on what post-production video suite is going to come out on top. The conteders:

  • Sony Vegas
  • Pinnacle Studio
  • Ulead Video Studio
  • Adobe Premiere Pro

Starting with Pinnacle Studio. This was my first real exposure to video editing and I’ll remember it forever. Because Pinnacle caused rage upon rage with its constant crashing. If you’re okay with constantly pressing save after you splice and move the timeline, then this might be the program for you. Now, this isn’t all one-sided bad as Pinnacle has some very good features embedded. If you’re starting out, it’s wonderful because the timeline is so easy to use. The chroma-key feature (the post-production term for making a green/blue-screen transparent) is far above anything I’ve seen out of most video editing programs. So if you do a lot of that, give this a spin. If I had to grade it, I’d give Pinnacle a C for effort.  It’s still just a consumer-end product and not aimed for anyone who’s going to be serious about editing. The price, $100.

Next is Ulead Video Studio. What can I say? This program is lackluster and devoid of features. I actually think Windows Movie Maker would have been an equal contender here. About the only thing you can say about it and WMM is that they are stable and … work. That’s it, really. I grade Ulead a D because it’s so lacking that I couldn’t even write a whole paragraph about it. The price runs at $100.

Sony Vegas. What an amazing and excellent piece of software! This is for the pros. If you’re the kind of person who likes software that you can just pick up and use most of the features right away and intuitively and then, as you get better, go use more of its advanced features later, then this software will dance in your dreams at night. There’s a catch though because Vegas is expensive. So if you’re not going to be serious about doing video for fun or your business, then don’t even bother wasting your money on Vegas. However, if you think you’ll make a return-on-investment, then holy crap; go get this. The amazing Vegas gets an A and is priced at $680.

Adobe Premiere Pro. This is the best, hands-down. Adobe delivers a software suite that goes beyond just your regular Pro video editor and right into high-end movie studios. I personally use this tool regardless that I don’t work in a huge studio because it’s simply the most powerful on the market. You can add hundreds of plugins from Adobe and third-parties, get templates, add custom effects, support Blu-Ray, export to Flash movies for the web, and of course it integrates with the rest of the Adobe suite like After Effects and Encore. Premiere is tough to use; the training books are 3 inches thick and that’s without you really understanding a single word of what it’s saying. But once you get over the learning curve (or I should say learning cliff), this tool is your flagship of production. The program has time remapping and shake correction. Premiere Pro gets an A++ and costs $800. But you shouldn’t even be considering a program this superfluous unless you have the cash to spend on it.


October 21st, 2009  
Tags: adobe, premiere, sony, studio, ulead, vegas, Video



Weasels

Uncategorized 0 Comment »


October 14th, 2009  



Web Design Mistakes

Web 2 Comments »

Uh oh, common Web Design mistakes alert! A lot of times, it’s easy for someone who is unfamiliar with design; more specifically Web Design, to break one of the many unspoken and unwritten rules of aesthetics. Lots of first-time and DIY designers tend to think it’s like any art form and you can simply “do whatever”. But Web Design sets itself apart from art by also requiring user interaction and providing a medium for information.

To equip all of you designers-in-the-rough or even refresh you Pros, here’s a list of common design mistakes:

  • Confusing pop up messages
  • Poor load time
  • Over use of Java
  • Poor overall appearance
  • Poor use of HTML tables
  • Spelling/Grammar mistakes
  • Poor organization
  • Inconsistent page design
  • No contact information
  • No ‘about us’ page
  • No privacy policy
  • Different backgrounds on each page
  • Poor content
  • Poor navigation
  • Over powering music set to auto play
  • Broken HTML code links and graphics
  • Poor browser compatibility
  • Large slow loading graphics
  • Too many graphics
  • Large Welcome banners
  • Flashing banners
  • Pages scrolling to oblivion
  • Multiple colored text
  • Multiple use of animated graphics
  • Text difficult to read
  • Animated bullets
  • No Meta tags
  • Too many graphic and/or line dividers
  • Multiple use of different fonts
  • Under construction signs
  • Busy, distracting backgrounds
  • Scrolling text in the status bar
  • Multiple banners and buttons
  • Large scrolling text across the page
  • Poor use of HTML code frames
  • Large fonts
  • Poor use of mouse over effect

Let me touch on a few of them in more detail.

Many people don’t consider load time a big deal. It is. When you design your site, save images as “.png” files primarily. But when they’re tiny images, make sure you use gif when you can. If you see a lot of color loss, then go with “.jpeg” at about 80% quality. Try to never go below that quality because jpegs dither which looks grody.

Don’t use too much Java! Why? Javascript and Java are completely client-side, meaning their computers are having to load all of that code you’re writing. Way to bog down a slow computer even more. Try to put as much of it in PHP or other server-side code as you can.

If you MUST lay out your website using tables (instead of properly in DIVs), then please for the love of the Web gods, don’t set the border. Make the border transparent and don’t overuse the tables. Now go learn how to lay out the site in DIVs.

Make sure you have a privacy policy. If you have a web tracker, you’d be surprised how many hits that page will get. People don’t like giving out their personal info (or even browsing your site) without knowing what you do with it. At worst, you could get reported to the BBB. :(

Do not ever use different background on each page. You are not Bing and this is not 1995.

Navigation these days is horizontal. Do it. If you’re not a creative designer who’s confident in their skills to make something different, just do horizontal navigation. Vertical navs cause scrolling. And scrolling = the devil.

Don’t use music, ever. If you MUST use music, don’t set it to autoplay. If you MUST use autoplay, make the music super calm and unobtrusive. The thing is, not everyone checks their volume all the time and lots of people listen to their own music when browsing the web. Music should add to your site (and people should expect it!) rather than simply “be” there.

Don’t use banners. Or flashing banners. Or have more than one flashing/animated thing on a page. That’s horrible.

USE META TAGS!!! This is how search engines find and rank you. You do want to be found, yes?

Under construction signs are good, if you live in 1996. Otherwise they’re ugly and unprofessional. If you don’t have a page, don’t even add the link. Don’t redirect to “Under Construction”, don’t let it 404, and don’t just let it have nothing.

Never use frames.


October 14th, 2009  



  • Categories

    • Graphics
    • Uncategorized
    • Video
    • Web
  • Archives

    • November 2009
    • October 2009
  • Recent Posts

    • Photoshop: Masking and non-destructive manipulations
    • Businesses realize the power of video on their site
    • Why save as .png?
    • Video tools: Vegas vs Pinnacle vs Premiere vs Ulead
    • Weasels
    • Web Design Mistakes
  • Blogroll

    • Development Blog
    • Documentation
    • Plugins
    • Suggest Ideas
    • Support Forum
    • Themes
    • WordPress Planet
Copyright © 2010 Davis Calvert Email addresses
XHTML CSS Log in