Clazh » Photoshop

CS3: Best way to be creative?

Arpit Jacob — Wed, 25 Jul 2007 11:59:36 +0000

I’m Nathan Chapman, Guest Blogging on Clazh from Pixl Design.

Adobe’s Creative Suite is one of the best productivity products of, perhaps, all time. And yet, does it really serve to be the perfect product for everyone?

With Adobe’s not-too-recent acquisition of Macromedia, the next release of a Creative Suite would be sure to include Dreamweaver, Flash and Fireworks. CS3 sure did, but at a cost: over AU$2,000 (US$1,500) and that’s just for Dreamweaver, Illustrator and Photoshop! For both Macromedia and Adobe’s Products, you would fork out AU$4,445 (US$1,399). There just has to be a better way!

Luckily, there is. There are several open-source and shareware/freeware options out there.

Photoshop

The Gimp is a open-source “photo manipulation program”. With excellent flexibility, loads of plugins and a interface that looks suspiciously similar to the real thing, The Gimp is an excellent alternative to Photoshop.
Paint.NET, which utilises the Microsoft .NET Framework to create a stable, lightweight app with nearly every major function the home user could want, from a Lasso tool to Gaussian blur. The interface is completely familiar, with the added benefit of translucent panels that make it easy to see what’s going on when the windows get cluttered. Paint.NET doesn’t yet support RAW format, however, which certainly limits its range.

Illustrator

The only major free competitor for this vector image editing program is Inkscape, again open-source, which is very responsive and extensible. Easily a very good, well written program. Sure, it looks a bit different, but when it comes down to it, Inkscape’s interface is still very easy to use.

Adobe Acrobat

Adobe’s Own free version of Acrobat. Mind you, it’s laggy and is for viewing pdf files only.
Foxit Reader is the pdf viewer that I personally use, and is very compatiable with different forms of pdf files. It also has basic editing tools, and may, in the future, come with a built-in OCR software.

Dreamweaver

Nvu is an excellent, intuitive program that I was using at one point. The interface is very clean, and Nvu can (like Dreamweaver) edit in WYSIWYG or code view. The produced code is very clean and user-firendly, validates and uses CSS.
RapidWeaver, (Mac only) is very similar to Apple’s own iWeb software in both its looks and designs. The code produced is valid, although not as nice-looking as Dreamweaver or Nvu.

Edit

Notepad ++ is an extraordinarily useful replacement for Note pad. However, its main feature (for me) is that it supports automatic code highlighting, enabling it to be a replacement for Dreamweaver’s Code View. Open-source, useable and light-weight, Notepad ++ is perfect for coders (it supports many languages, Python, HTML, CSS, C, C+ etc etc).

Summing Up

Here are the best alternative that I would use to replace the Creative Suite. However, with these programs, you don’t get the “combined” interface that CS3 has, and there are not (due to licensing restrictions) alternatives for every product.

Me? I use CS3 (a legal copy; remember, pirates are losers) and because I could afford it, I prefer it to these Alternatives.

© Arpit Jacob for Clazh, 2007. | Permalink | 8 comments | Add to del.icio.us
Catergories: Design, Open Source, Software Tags: Adobe, Free, Open Source, Photoshop, Software

How To: Conjure Your Own Site Design

Arpit Jacob — Tue, 24 Jul 2007 06:29:08 +0000

I would guess that if you are reading this blog, you are somewhat interested in some form of graphics design. If that is the case, than you’ve probably wanted to design a website for yourself, or maybe you already have. But are you completely happy with the originality of your design? Or maybe you just feel like your site needs a refresher. Well, than you have found the right place to help kick-start your attempt to create your own, stylish, and original web site layout.

Part 1: Choosing Your Colors

A good choice of colors can make-or-break your design. That is why the first step is to pick your colors, and pick them wisely.

The first part of picking colors is to decide between light or dark. While you’re subject matter could way in on your decision (like choosing light colors for a site about flowers), it should also be about what you are looking to accomplish with your. If your site is a blog with tons of text (like Clazh), light colors for your layout, with dark text, is a good idea because it improves the readability of your site. If your site is all about showing off your graphical expertise, than dipping into the darker end of the spectrum may help to accentuate the graphical aspects of your design.

Light Color Scheme

Dark Color Scheme

Do you have your scheme chosen? Good. Now moving on to the actual color selection. I am just going to assume that you are older than 10, and can tell what colors go together, and what colors do not. For example, Pink and Light Blue go together, while Bright Green and Bright Yellow could potentially make your eyes bleed. So now, it’s really up to you to choose your colors, based on what you think visitors will find attractive. I would recommend choosing about 5 colors, even if they are only variations of each other. If you just can’t seem to pinpoint a color set, than use Adobe Kuler to help you choose an attractive set.
Part 2: Finding Inspiration

Pablo Picasso once said, “Good artists copy, great artists steal.” As a designer, you are obviously an artist. Being such, you should definitely take his advice, but not in a literal sense. You don’t want to peruse the web, find a shnazzy looking website, and then just rip-off their design. But what you do want to do is to take inspiration from the work (in this case the designs of websites) of others. There isn’t really much to elaborate on, except for the fact that you should just look at the layout of the site, the navigation, the way ads are handled, and the way the content is handled. But don’t think that you’ll be doing everything the same as the sites you use as base material. That would be stealing. ;)

For some sites you can visit to see galleries of other sites to then take inspiration from (what a confusing sentence), you can try these links:

Part 3: Deciding on Your Own Layout

Leah Culver’s Stupid Blog

Notice the way that all of the site content has the same background color, and is aligned in the middle of the page, taking up the same width.

Glenn Wolsey

In this example, you can see how all of the content is spread across the width of the screen, with the header being the dominant element.

Ordered List

Here you can see (vaguely in the screen shot) that each category of content is given it’s own “space, where nothing is attached.

One last thing to think about when dreaming up the basic layout is the number of columns you will need. For a blog, you may need 2 or three, where as with a portfolio site, you could get away with one.

Part 4: Making a Mockup

You’re almost there! Just stick with me and you’ll be ready to whip out your HTML editor of choice and start hammering away. But before you do that, you should have a full idea of what the site should look like when the (X)HTML and CSS is complete.

For this step, you will need to have a graphical editor. Now, you COULD skip this step entirely, but it helps tenfold to be able to see what you’re trying to achieve. It’s also much easier to make tweaks this way.

If you do not have a graphical editor (like Photoshop), than you have some expensive, and free options. The two I would recommend would be Adobe Photoshop, or the GIMP. The GIMP being a little less user-friendly but free.

Note: Save repeatedly. I prefer to save every 5-10 minutes or so. Laugh now, but if something ever goes wrong, I never have too much to make up.

Alrighty. The first step in making your mockup is to make a basic layout of content. In other words, you make a bunch of squares based on where you want your content to go. No color, no nothing. Just rectangles with black outlines. Don’t forget to label them, for future reference.
The next thing you should do is start to add colors, rounded corners, and the basics of the design. The boxes are no longer necessary, although you may want to still have labels of what area is for what content.
Next, you add basic text, like menus, the header/logo, the footer, and maybe some Lorem Ipsum for your post areas if you’re designing a blog.
Finally, you should now add the small graphics, and as much detail as you can. When you are finished with this step, what you should have on your screen should be exactly what you want the site to look like when you are done with your markup. If not, now would be a great time to tweak everything until it’s perfect. Another good idea would be to save the layout as an image, and send it to a few friends to get their take on it.

Now that you know exactly how everything should look and function, it will be much easier to code the design. If you can’t do that, than that’s your problem.

© Arpit Jacob for Clazh, 2007. | Permalink | 8 comments | Add to del.icio.us
Catergories: Design, Tutorial Tags: How To, Photoshop, Tutorial, Web-Development

Tutorial To Create A Realistic Cigarette In Photoshop

Arpit Jacob — Mon, 02 Jul 2007 16:18:52 +0000

vikiworks has an Excellent step-by-step Photoshop tutorial on how to create a realistic Cigarette in Photoshop.

I am a hobbyist Web designer tutorial like these help me improve my skill. By the way I am working on my Wordpress Theme for the Wordpress theme competition, If you would like to be a beta tester let me know. Currently its being developed in stealth mode.

© Arpit Jacob for Clazh, 2007. | Permalink | One comment | Add to del.icio.us
Catergories: Design, Tutorial Tags: Photos, Photoshop

Instant Polaroid Effect on Images without Photoshop

Arpit Jacob — Sat, 31 Mar 2007 22:00:38 +0000

Polaroid-o-nizer Converts your picture/Photos into a polaroid form without using Photoshop. Though I had an annoying time trying to save it. Since it was saving only as a Html File. Firefox as usual came to my rescue Go to Tools –> Page Info–Click on the Media Tab and search for the picture.

It even lets you put in a Remark or Comment, you can also adjust the angle of the tilt and change the background color.Pretty nifty tool that you can use to impress your Friends.