Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 03 2013

08:00

July 30 2012

10:00

How to Turn Photographic Textures Into Masks in Photoshop

screenshot

Texture is a key element of design. Learning how to wield and apply textures effectively will really open up your level of skill and proficiency in Photoshop.

Today we’re going to learn about a super quick and easy way to take a photographic texture and turn it into a mask that affects the transparency of a layer. No matter how proficient you are with Photoshop, you should be able to pick up this technique and begin using it on your projects today.

The Easy Way

Everything you want to accomplish in Photoshop can be done in a dozen different ways. You’ll find as you experiment more and more that some methods yield nearly identical results, but others that seem like they’re pretty similar can actually lead to dramatically different results.

Your task then is not to learn one way to do something and stick with it, but to explore different ways of working so you can reach a point where you instantly know which method is best in a given circumstance.

Let’s start off with an extremely basic design that could use a little texture to make it interesting. All we have is some text on a solid color background:

screenshot

Let’s say you wanted to distress this a little, age it up. How would you go about it? One thing that you might try is to grab a photograph and then use it as a texture. I want to add some cracks and random lines, so I grabbed this image.

screenshot

image source: Virginie Moerenhout

There’s a reason that I picked this one: because it seems all wrong. It’s an image of cracked ice, that’s not what I want at all is it? What you have to learn to do is see resources differently when thinking about Photoshop. Consider that they could be, not what they are.

“What you have to learn to do is see resources differently when thinking about Photoshop. Consider that they could be, not what they are.”

</ br>

So let’s say we grab this ice photo and throw it into Photoshop, now what? The easy answer is to throw it on top of everything, reduce the opacity and maybe apply some different blending modes to see what works. This will give you something like the image below:

screenshot

Pretty cool right? Unfortunately, this isn’t what I want at all. It still looks like a photo of cracked ice, just heavily styled and thrown behind my text. Let’s think about how we can go about this differently.

Masks to The Rescue

The problem with the effect above is that we’re just mixing the pixels of two images together. What we really want is a way to take the intricate crack pattern on the ice and somehow apply that to the text so that some parts appear to be worn off with time.

“The cracks on the photo are darker than their surrounding environment, so we can use those pixels to build a mask that knocks out parts of the text in that same pattern.”

</ br>

The trick to accomplishing this is of course to use a mask. The cracks on the photo are darker than their surrounding environment, so we can use those pixels to build a mask that knocks out parts of the text in that same pattern. The question is, how do you turn a photo into a mask? I’m glad you asked.

Step 1: Select The Channel with The Best Contrast

In order to understand why we’re going to turn to channels for this task, you need to understand the nature of a mask. A mask is a collection of grayscale pixels that affect the transparency of a layer: black means hidden, white means visible and everything in between is, well, everything in between. If the image below were a mask, each circle would equate to a different level of transparency.

screenshot

We cover this topic in-depth in our beginner’s guide to masking. A channel is very similar in nature and also uses grayscale values. The cool thing here is that you can turn a channel into a selection, which of course then becomes a mask in a single click.

To start this process, click on your Channels panel and try to find the channel with the best contrast ratio. In my case, it was the blue channel.

screenshot

Step 2: Duplicate The Channel

Once you find the channel with the best contrast, duplicate it. This can be done by dragging the channel to the little page looking button next to the trash can near the bottom of the Channels palette (just like copying a layer).

screenshot

Step 3: Use Levels to Increase the Contrast

Select the new channel that you just created and perform a Levels adjustment that really cranks the contrast. How much you do this, if at all, really depends on the effect that you’re going for, but in this case we want to crank it.

screenshot

Step 4: Turn the Channel Into a Selection

Now that you have a really good contrast ratio on a non-destructive channel, it’s time to turn this channel into a selection. This is really easy, just Command-Click (Control on a PC) on the channel and it should bring up a live selection.

screenshot

So what’s happening here? The color of the pixels are being used to determine what is selected, just like we saw how they affected the mask earlier. So black pixels will not be selected but white pixels will.

Step 5: Apply the Selection as a Mask

Now that we have an active selection, you probably already know how to turn that into a mask. All we have to do is select our text layer and click the little mask button at the bottom of the Layers panel. Voila, now we have the effect that we’re going for!

screenshot

Notice that this doesn’t look anything like a broken chunk of ice. In fact, you can barely tell that we used the photo at all. We’ve simply borrowed the complex pixel structure so that we don’t have to manually draw in cracks and faded areas.

“We’ve simply borrowed the complex pixel structure so that we don’t have to manually draw in cracks and faded areas.”

</ br>

If you’d like to tweak the result, try running a Levels adjustment on the layer mask and watch how it affects the end result.

Going Further

Don’t stop there! Try the effect again, mix it with different textures, throw in some layer effects, and you can really come up with something cool:

screenshot

Here I added in some faded text as a background image, then copied the mask that we built before but adjusted the Levels so that it was barely having an effect. Then I applied an inner-shadow with the blending mode set to Color Burn.

The result is a really dramatic, faded parchment look that’s a far cry from where we started.

Conclusion

This was another one of those posts that resulted from a friend asking how to accomplish a specific effect. I think a lot of new Photoshop users know that this kind of thing is possible, but it seems like it might be overly technical and too advanced for them to execute. Fortunately, the reality is that, despite being a very powerful technique, it’s not really difficult at all to implement!

Leave a comment and let us know what other tasks you struggle with in Photoshop so we can whip up some tutorials to help you out.

Tags: Software

July 05 2012

20:10

The Best New Features of Fireworks CS6

Advertise here via BSA

Almost every program in the Creative Suite 6 family received an overhaul or a big boost in tools and functionality. Fireworks is definitely no exception. In previous versions, it was hard to find what you were looking for, especially when it came to patterns and  styles. Parts of Fireworks have been completely redone, and Adobe has made several handy additions to increase productivity and make Fireworks an excellent tool for any web designer’s or web developer’s arsenal.

Colors

The entire Color system in Fireworks has been updated to make it more intuitive to make color choices. Hex values are readily available and different colors are broken down into tints and shades. Shades of gray are broken down to create an intuitive interface for choosing colors with Fireworks.

Screen shot 2012-07-03 at 10.28.07 PM

Fill and Stroke

Fill and Stroke have been completely overhauled in CS6. It is completely different, but much better and more intuitive. Everything is broken down and organized so that it makes more sense. Fill, Gradient and Pattern are all divided into their own sections, so that you can easily find what you are looking for, without sifting through a lot of the stuff that you really aren’t looking for.

Fill and Stroke

On a side note, Patterns are scalable, so they can meet your needs. This is really handy, because sometimes it simply isn’t suitable enough to have it scale proportionally. It makes it look generic. However in Fireworks, you can grab the handles and stretch the pattern and even tilt it at an angle to create some interesting results. This makes Fireworks so much more relevant when creating graphics for the web.

patternstretch

Common Library

The Common Library filled with Symbols has been updated and Fireworks has added a lot of new symbols. The symbols vary, but they are much more relevant to web design and development than ever before. You will find symbols such as an iPhone keyboard, a dropdown menu, banner ads, horizontal menus, and more. You will find icons for Twitter, Dribbble, RSS and just about anything else you could image that is relevant.

Screen shot 2012-07-04 at 12.40.58 AM

Templates

Fireworks has updated its template system to include wireframing templates for ipad, iphone, mobile apps, and even grid systems. This will help any designer jump into a project and get started designing user interfaces for their work quickly and effectively. These templates include common items such as menu bars, search bars, menus, icons and much more, helping you to slice your work time down and greatly increase productivity. Below, you can see the template that is available when you choose iphone from the wireframes folder.

Screen shot 2012-07-05 at 11.52.10 AM

CSS Properties

This is one of those features that simply blows my mind and is a huge time saver. Any type of design element that you can think of can be viewed within the CSS Properties Panel. Inside this panel the effects applied to your design is analyzed and replicated as CSS Styles, which you can easily copy and paste within the CSS stylesheet for your website. This includes gradients, drop shadows borders, rounded corners, and other CSS properties that can be a pain to code from scratch.

Screen shot 2012-07-05 at 3.33.54 AM

Screen shot 2012-07-05 at 3.34.04 AM

jQuery Themebuilder

jQuery themes are okay, but many designers would like to create their own themes. You can do that inside Fireworks CS6. Simply go to Commands> jQuery Mobile Theme> Create New Theme. A template opens up where you can create your own custom theme that fits your vision as a designer. Simply highlight the icons that you want to change and edit their colors, and customize their look.

Screen shot 2012-07-04 at 1.00.48 AM

Screen shot 2012-07-04 at 1.01.41 AM

Paths Panel

The Paths Panel received a complete overhaul and is much more intuitive than ever before. You can do things with paths that you never could do before. You now have control over the points you have selected, and how you interact with them. Select inverse points, turn paths or strokes to fills, invert them, and anything else you could think of. It is all organized into this neat little panel, making it easier to complete tough tasks without having to sift through menus.

Screen shot 2012-07-04 at 1.11.16 AM

Styles Panel

This panel now makes much more sense. Not only has the interface been overhauled, but the way that the file structure of your styles exists makes it much easier to find the styles that you are looking for. Also, now you can save styles for later, and they will still be there when you come back.

Screen shot 2012-07-05 at 3.37.20 AM

Screen shot 2012-07-05 at 3.37.57 AM

File Formatting

Adobe fixes an issue with opening certain png files in Photoshop. They way that they have done this is that now you can save Fireworks png files as fw.png files. This does 2 things. The first is that it solves the Photoshop opening bug, and the second is that it identifies .PNG files that were created in Fireworks. This is excellent when trying to determine where something was created.

Screen shot 2012-07-05 at 11.54.24 AM

Conclusion

Fireworks has really been upgraded in CS6. Many things such as colors and styles have been completely restructured, and Adobe has included many industry relevant templates right out of the box. Also, with the inclusion of the CSS Properties panel, you can worry more about how your work looks than how to keep up with all of the coding. Fireworks is a huge time saver for any serious web designer or developer that wants to concentrate on getting their work done quickly and efficiently.

Tags: Software
11:00

How to Organize Your Shoots and Catalogs in Lightroom

screenshot

Typically I stick to strictly design related topics, but today we’re going to stretch that a bit with a quick discussion on Adobe Photoshop Lightroom. Tons of designers take photos for their projects whether they consider themselves “photographers” or not so I’m sure lots of you will find this to be a useful topic.

The main struggle that I see with Lightroom users is simply organization. How can you keep multiple shoots separate? Where should you import your files? These are important questions and the answers aren’t very intuitive so today I’ll walk you through my basic process for keeping various shoots organized.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is a Catalog?

screenshot

The most significant concept that you need to wrap your brain around when working with Lightroom is what a catalog is and how that relates to the photos that you take.

Instinct tells you that a Lightroom catalog is a sort of box that holds all of the photos that you throw into Lightroom. This is an entirely false misconception though that likely comes from years of Photoshop experience.

Lightroom ≠ Photoshop

In Photoshop, when you open a file, edit it, and hit the “Save” button (not “Save As” but plain old “Save”), you actually write over the file that you started with. When you close your newly update file, the version that existed before is gone forever unless you’ve made some sort of backup.

screenshot

Lightroom however, performs a pretty neat trick. No matter what you do to a photo in Lightroom, even if you move every single slider and press every button to jack up the appearance of an image beyond recognition, the original file remains completely unchanged. The workflow is a purely “non-desctructive” one that always keeps your photos as they were taken completely intact.

What Voodoo Is This?

screenshot

Wait a dang minute you say, how can Lightroom perform this crazy feat? The answer is that the entire application is built on a different foundation than Photoshop. In Photoshop, you open, edit and save images individually. As I just stated, the original file changes as soon as you hit that “Save” button.

Lightroom though looks at an entire folder of images all at once (or several folders of images). It’s more like Bridge in this regard than Photoshop. A catalog then is a container or database that holds information about the original images: where they’re stored, what the camera settings were when the photo was taken, metadata, etc.

“The only thing that has been changed is the catalog’s interpretation and presentation of the photos, not the photos themselves.”

</ br>

The awesome part is that Lightroom can change much of this information instantly in a live setting without affecting the original source image. It stores these changes as a part of the catalog.

As an example, imagine that you took a trip to the Grand Canyon and shot three hundred full color photos. If you import these photos into a Lightroom catalog and change them all to black and white, the only thing that has been changed is the catalog’s interpretation and presentation of the photos, not the photos themselves. If you navigate your computer’s file browser to the original folder of images, you’ll find that they’re still full color photos.

If you want these changes to actually take affect on the photos, you have to perform an export action. This will effectively open each file, perform the actual destructive changes that you told Lightroom that you’d like to make, then do a “Save As” so that new files are created in the location of your choosing, still leaving your originals untouched. This all happens behind the scenes so all you see of this process is a progress bar.

The Bottom Line: A Lightroom catalog is merely a database that holds information about your photos, not the photos themselves.

screenshot

So What?

“If you have your catalog backed up but you lose the original files, you’re hosed.”

</ br>

Why should you care how Lightroom works? As long as it does its job, that technical stuff is all useless information right? Wrong. This knowledge has major implications for how you organize your images.

The common expectation is that when you import photos into a Lightroom catalog, the photos will be somehow contained inside of that catalog file. The danger here is that while you might think that you’re backing up or storing your photos in an external hard drive, you could in fact merely be working with the Lightroom catalog.

If you have your catalog backed up but you lose the original files, you’re hosed. All of your hard work will be gone. Educating yourself on file organization practices could save you tons of time and frustration in the long run.

My Process for Organizing Lightroom Catalogs

Now that we have a solid grip of what a catalog is, how it’s different than the source folder and how important it is to keep track of both, let’s take a look at how I personally organize all of my photo shoots so you can get a good idea of what a professional Lightroom file organization workflow looks like.

Note: I’ll be using Lightroom 3, if you have a different version, things might look slightly different but the basic process will be virtually identical.

Step 1: Make One Directory for Everything

The very first thing that you need to do, before you even open Lightroom is to manually create a file directory, either on your computer or on an external drive.

screenshot

As you can see in the image above, I have a “Clients” folder inside of my Lightroom directory. Inside here, I create a new folder every single time I have a gig and name that folder after the people or subject for the shoot.

Inside of a shoot’s folder, I place literally every file relating to that shoot. The reason for this is so that everything is extremely portable and easy to find. If I click and drag the “Kim&Tru” folder shown above to an external hard drive, the shoot and associated Lightroom files are entirely copied over and can be transported to another machine or saved as a fully functioning backup.

screenshot

Step 2: Create a New Catalog

Once you’ve created the empty folder for a shoot in your photography directory, then it’s time to launch Lightroom and create a new catalog. This command can be found under the “File” menu item.

screenshot

It’s very important that you place this new catalog inside of the folder that you already created for the shoot. Once again, the goal that we’re shooting for is everything related to a shoot resting in one convenient location.

Every Stinking Time?
You may be scratching your head at this point wondering if you really have to create a different catalog for every shoot. The easy thing to do is import everything into one huge catalog, so why not do that?

The answer is easy: If you take lots of photos, throwing everything into one massive catalog is a horrible, messy way to work. Not only will you toss out the benefits of having individual shoots that are easy to move around and back up, you’ll also cause your main Lightroom catalog to become bloated and slow. Keeping your shoots organized into individual catalogs ensures a lean, speedy working environment.

Step 3: Import Your Photos

Now you’re finally ready to import your photos. To do this, go to File>Import Photos…

screenshot

This will bring up the Lightroom Import Dialog. On the left side, you’ll choose your source. This is wherever the images are coming from. Typically, this will be your camera or card reader (this dialog often pops up automatically when plugging in a card reader) but can really be any drive that holds photos.

screenshot

Once you find the photos that you want to import, your instinct will be simply to hit the “Import” button and be finished, but you’re not done yet!

It seems logical that your photos would automatically be imported to wherever your catalog has been created, but that’s not the case at all. By default, Lightroom will import photos into its own self-created directory. To fix this, make sure you set your destination folder in the column on the far right (you’ll have to do this every time you import a shoot).

Just like before when we created the catalog, it’s absolutely critical that you choose the folder from step one that you created for this shoot. When I shot “Luke’s Senior Session” I created a “Luke-SeniorShoot” folder in my clients directory, then I put the “Luke-SeniorShoot” catalog in this folder and chose it as the destination for my import. Keep in mind that Lightroom will typically create a subdirectory or two when performing these actions.

screenshot

Step 4: Edit and Export

From here you can perform all of your typical organization and editing. I typically go through a five step editing process:

  • Browse through all of the photos I took and apply a single star to those that I like (just hit 1).
  • Create a Smart Collection of single star photos.
  • Edit the single star photos, applying a second star to each once it’s finished.
  • Create a Smart Collection of two star photos.
  • Export the two star photos.

Once you reach the export step, once again you’ll return to that one folder that you’ve placed your entire shoot in up to this point. In this folder I create an “edited” subfolder where I place my finished images.

screenshot

As a completely optional step, I choose some “favorites” that I spend some extra time working with in Photoshop.

Step 5: Changing Catalogs

Using the process outlined above, we’ve met our goal: the entire shoot is wrapped up nicely in one parent folder and all of our shoots are contained in a single directory. At this point, you might be wondering how to close one shoot and open another in Photoshop.

The answer here is simple, navigate to that shoot’s folder and find the file with the “.lrcat” file extension. This is the Lightroom catalog file. To launch it, just give it a double click.

screenshot

You can also open Catalogs right from Lightroom through the “Open Catalog” option in the file menu. I particularly like to use the “Open Recent” menu any time I want to open something that I’ve recently worked on.

screenshot

Changing catalogs requires a Lightroom relaunch so it can redirect all of the connections to where they’re supposed to go, but this should only take a few seconds.

Stay Organized and Never Lose Files

Reading through this tutorial makes it seem like managing Lightroom catalogs is an awful lot of work. In reality though, it’s actually really simple. Keep in mind that what takes you minutes to read about can be accomplished in seconds.

Besides, the payoff is worth any extra effort. If people pay you to take photographs that you then take into Lightroom, then you simply can’t afford to not understand how the application works with your files so you can set up a system that’s clearly organized and easy to backup/transfer.

Several parts of my process can be performed differently, it’s the ultimate goal that you really want to keep in mind. If you have a different or better way of achieving the same results, I’d love to hear about it. Leave a comment below and explain how you organize your Lightroom files.

Tags: Software

July 04 2012

01:43

The Best New Features of Dreamweaver CS6

Advertise here via BSA

FYC-Dreamweaver

Much has been written about the updates to key applications like Photoshop and Illustrator in Adobe’s Creative Suite 6, which shipped in May. But Dreamweaver hasn’t been discussed nearly as much, and that’s partly because designers and web developers alike have derided it and other WYSIWYG editors since they appeared on the scene in the mid-90s — generally for good reason.

While WYSIWYG is still a big part of Dreamweaver, more and more designers and front-end developers are using it as an IDE for the web of sorts, allowing them to work with the code and see a preview of the design in real time, and make use of some shortcut features from time to time that you just don’t get in a text editor. Let’s take a look at the best new features in Dreamweaver CS6, and you can decide for yourself whether it is worth reconsidering your favorite text editor.

Fluid Grid Layout

Fluid Grid Layout gives you the ability to develop a site that is flexible and displays consistently across different browsers, and even different screen sizes. The fluid layout is supposed to be adaptive. The thing that Adobe boasts is that you can design the site visually and they take care of the rest. Adobe continues with Live View, where you can preview your site in a live environment, but of course you can go into code view and work from there. Adobe is aiming this technology towards people who may be designers, but aren’t necessarily coders. The source code is generated in HTML5 and CSS3.

This is excellent, because now you can design how your site will look on a monitor, design the layout for an ipad, and then design a vertical layout for a mobile device, such as a cell phone, and preview how they will look while you are working. You  have control over the grid and the number of columns for structuring  your work exactly how you want it.

To create a Fluid Grid Layout, go to File> New Fluid Grid Layout. A new dialog box will come up, asking your preferences for a mobile, tablet and desktop layout.

Screen shot 2012-07-01 at 4.05.35 PM

Dreamweaver will ask you to specify the percentage of space that your content will take up in the browser. You can specify different percentages for each platform. Under Mobile, it will ask you what you want the gutter width to be. This is the space between each column, and is based on a percentage of the width of the column itself. Another great feature is that Dreamweaver asks you to specify how many columns you want to use in the layout for each platform. I left mobile and tablet the same, but I changed Desktop to 16. Specify the Doctype as HYML5 and then you can specify the CSS file that you would like to have attached.

Screen shot 2012-07-01 at 4.18.29 PM

The shot above is similar to what you should see. My stylesheet is has a blue background specified, but yours will most likely be white. The first view that showed up is the mobile view, but you can toggle between views by clicking one of the icons circled above. This is where you can specify the layout for each platform.

The interface is meant to be created visually. If you are comfortable with code, you can always switch to code view. To start building your layout, make sure you are inside of the main container div and click Insert> Layout Object> Fluid Grid Layout Div Tag. Remember to try and use semantic tags when marking up your site, such as header, article, aside, etc. If you aren’t familiar with these tags, you can find them online.

Screen shot 2012-07-01 at 4.40.44 PM

CSS3 Transitions

Adobe has integrated CSS3 transitions into its arsenal, giving designers the ability to create cutting edge CSS3 transitions to their websites via the CSS Transitions Panel. Here you can select which element you want to apply a transition to.

Simply go to the CSS Transitions Panel and the the “+” symbol to add a transition. A dialog Box will come up, giving you several options to enable you to create your transitions.

Screen shot 2012-07-01 at 7.56.20 PM

The first thing it will ask you is what rule you want to apply the transition to, and it will give you a list of all of your divs and classes via the dropdown menu.

Screen shot 2012-07-01 at 8.03.59 PM

The next option will ask which state that you would like to apply the transition to. This includes active states, hover, target and more.

Screen shot 2012-07-01 at 8.04.17 PM

Duration determines the duration of the transition, meaning how long it takes, delay determines the amount of time before the transition starts, and timing function determines how the transition behaves. For example, ease-in will make it slowly come in.

Screen shot 2012-07-01 at 8.04.52 PM

Property determines what style you would like to change during the transition, and end value determines what the final outcome will be.

Screen shot 2012-07-01 at 8.05.28 PM

When you are done, simply tell Dreamweaver which stylesheet to put the transition into.

Adobe Business Catalyst Integration

Adobe Business Catalyst is Adobe’s way of created a website in a modular fashion. They create a template for you to use, and only leave certain parts editable. You can create anything from a simple html website, to a full-blown e-commerce solution. If you are a member of Adobe’s Creative Cloud service, one of the perks of this is that you are allotted hosting for up to 5 websites. You can Create your site using either Dreamweaver, or Adobe Muse, and you can publish it using Business Catalyst.

In Dreamweaver CS6, they have integrated Business Catalyst and given it its own panel. Here you can view your files, integrate modules, such as e-commerce solutions, menus, web forms, and even social media.

jQuery Mobile Support

Adobe upgraded their support for jQuery Mobile, which means that you can build better mobile applications for iOS and Android. They have upgraded and overhauled this feature for a better and more streamlined workflow. You can them your jQuery mobile applications much easier now, and you can decide what theme or skin to use at any time, and you can also integrate your own custom skins. You can also change elements like icons and button styles in seconds with the built-in interface.

PhoneGap Support

Development for iOS and Android updated so that you can build better native applications quicker and easier. They have integrated emulators in order for you to preview your work. Now you can package your work up and export it for different native devices, such as Blackberry, Android, and iOS.

To Get to PhoneGap to start working, go to Site> PhoneGap Build Service. It is going to ask you for your login, so if you don’t have one, you will have to follow the steps to make one. It will ask you to login with Github or your Adobe email and password. It will ask you to name your app, and you have different options. For mine, I pointed to an index.html file, which the interface asked for me to point to via a file browser.

Phone Gap

Once You are logged in, you can get to work Via the PhoneGap Panel. You can that the popular platforms are available, especially iOS and Android.

Better Live Preview

Dreamweaver’s Live Preview has been updated this time around to support the latest webkit technology, so that you have better HTML5 support. I have to say that I really like Live Preview this time around. Many times in the previous versions, I had loading problems, errors, and sometimes it caused a lot of lag. I used MAMP as a testing server because it performed better. In CS6, Live Preview behaves how it should. I still test in multiple live browsers, but this is really handy just to check right inside of Dreamweaver.

This is the Actual Live Preview in Action

This is the Actual Live Preview in Action

HTML5 Support for Multiscreen Preview

You can now preview how your HTML5 content will be seen on multiple devices before you publish. This is great because you can test your work for consistency before ever sending the site live. This way, you don’t have to set up intricate testing sites to debug your work, because you can do that all inside of Dreamweaver CS6’s interface.

Multiscreen Preview

This interface is really handy, considering you can control media queries and dedicate different media queries to different stylesheets. This is great because it gives you the capabilities to work how you want to. If you have a particular workflow in your development, you can implement it exactly how you like.

Media Queries

You also have control over Viewport sizes here, which lets you dial in the sizes of screens that you are building for.

Viewport Sizes

Conclusion

Dreamweaver has made a few vital upgrades to Dreamweaver CS6 to make it easier to develop mobile sites and applications. It has added a lot of functionality to help designers and developers with their workfow, making them more productive. Now, you can build apps for multiple platforms, from iOS to Blackberry, and make sure that they are consistent and functional.

Tags: Software

July 02 2012

10:00

Help Prevent User Screw-Ups With These Awesome Tips

screenshot

As a user, don’t you hate it when you click a button, only to realize that the resulting action really isn’t what you wanted at all? Sometimes this is a minor annoyance and sometimes it’s a complete disaster that ruins hours or even days of work.

As a designer, it’s up to you to help your users avoid these tragic mistakes whenever possible. Today we’ll look at some methods that you can use to achieve this goal.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What’s The Big Deal?

When you’re designing an interface, whether it’s on the web or in some sort of native application, you always want to carefully consider what can go wrong. Try to imagine the worst case scenario for every particular action that a user will take in the course of using your app and do whatever you can to make sure they understand the consequences of a click.

Why go through all of the trouble? Because there’s nothing that will make a user hate an app quicker than if they make a big mistake with it. Whether it’s completely their own fault or not, they’ll blame the application or, at the very least, develop a distrust for your product. When you give users the chance to discuss your product, “regret” and “distrust” are two words that you don’t want to come up in the conversation.

Tip: Warning Messages Suck

screenshot

Now, when given the goal of making sure that a user never makes a mistake, some UI designers will go overboard and institute warning messages for every little action that the user could possibly take. Unfortunately, from a user’s perspective, this is the most annoying thing that a developer could do.

If I feel like you’re holding my hand too much through the process of using your app, I’ll resent you for thinking that I’m an idiot. I’ll also quickly get frustrated that everything takes so long because I have to work through the same warning messages over and over.

So When Can I Use a Warning Message?

The real trick for you as you’re planning the app is to decide what actions merit warning messages. There’s a happy medium between never warning a user and overdoing it, and it’s a tricky spot to find.

The guiding question is a simple one: “How easy is it to fix the problem if something goes wrong?” Put yourself in the user’s shoes and try to imagine the worst case scenario.

screenshot

Let’s imagine a situation where you’re building a simple todo app similar to Wunderlist shown above. One action that the user might take is to check off a task and make it disappear. If they do this on accident or change their mind, ideally, they’d be able to get it back. But even without that functionally, typing in a simple todo title again really isn’t that much work. It should only take a second for the user to rectify their mistake. Given this fact, a warning message probably won’t be necessary for deleting a todo.

screenshot

Now, what about if the same user wants to delete an entire list of todo items? This is something that could potentially be disastrous. If I have over a hundred todos and accidentally delete an entire list, I’m going to freak out if I can’t get it back. In that case, a warning message is definitely appropriate.

Help Prevent Screw-ups

Now that we have a feel for how warning messages can be good or bad, it’s time to take a look at some different methods that you can use and how they help prevent user screw-ups. Some of them use warning messages, others are a little more clever and tactful.

Preemptive Warnings

The reason that warning messages are so annoying is that they stop you dead in your tracks. This is only pleasant if you realize that you were about to make a big mistake, the rest of the time it simply blocks your progress.

One way to eliminate this while still helping your users prevent mistakes is by using preemptive warnings. These don’t get in your way or inhibit your progress, but they do help you realize that you may have made a mistake.

You see this most often in live form validation. Check out how the Mailchimp sign up form tells me that I’ve made a mistake after typing in a user name that is only three characters long.

screenshot

Are You Sure?

This is the most common type of warning used throughout web and native apps. It’s what we saw before with Wunderlist: a box that pops up, stops whatever you were trying to do and asks whether or not this is something you really wanted to do.

You likely see these pretty much all day every day if you work on a computer. For example, Mac users see one when they try to empty their trash.

screenshot

If we weigh Apple’s decision to put this here against the criteria that we set up earlier, then it checks out. As the window states, emptying the trash is not something that a user can do. Once you hit that button, those files are completely gone unless you’re the type of tech savvy nerd who knows how to get them back.

What Do You Want to Happen?

Sometimes a given action could be interpreted in more than one way. In these situations, you either have to choose between the interpretations as the designer or give the user the power choose what consequences the action will have.

Photoshop is an excellent example of this. When you drag a layer mask to the trash can, you get the following window.

screenshot

Here Photoshop is saying, “Hey, I know you want me to ditch this layer mask, but should I apply it first?” This is a helpful option because sometimes it is indeed the case that I want the mask to disappear completely and other times I want it applied to the layer. They also provide a hidden keyboard shortcut (Option) for pro users who want to skip this window.

Never Show This Again

There’s another interesting lesson to be learned from Adobe’s warning message. Notice that it has this little box that says “Don’t show again.” This is a really clever way to get the best of both worlds as a developer. You do your duty to always warn your users of an risky action, but also give them the choice to opt out of such warnings if they don’t need them.

screenshot

Adobe’s Creative Suite is positively overflowing with annoying warning messages and this opportunity to opt out saves me from going insane while using their apps.

Timed Cancel

Today as I went to delete a YouTube video I noticed a UI trick that I had never seen before. A warning message popped up to inform me that I was about to delete all of the movies in my account, which is obviously a pretty big deal and is probably more often than not an accidental choice.

The weird part was that rather than allowing me to proceed with the action right away, they gave me the message, a cancel button and a button with a timer on it.

screenshot

Only after a brief countdown did the second button turn into something that would allow me to delete the videos. Until then, it actually forced me to either cancel or read the message and make sure I knew what I was getting into.

screenshot

This is a pretty nifty little idea, but keep in mind that users are likely to find it extremely annoying. Reserve this level of caution for actions that truly have dire consequences from which there is no return. Perhaps if a user wants to scrap his/her account completely or delete a large amount of data.

Show the Result Before the Action

One of my favorite ways that I’ve seen developers prevent screw-ups isn’t a warning message at all. Instead, it’s a simple preview of what things will look like after the action is taken.

There’s a great free Mac app called NameChanger that does a fantastic job of this. The app is meant to help you batch rename a bunch of files. On the left, there’s a column that shows the current filenames and the text to be replaced. On the right, there’s a column that shows the text you want to insert and the resulting filenames.

screenshot

The clever part here is that this is all just a preview, no files are renamed until I hit the “Rename” button up top. This allows me to closely examine what I’m about to do and decide if everything is correct. I’ve also seen FTP apps use this same technique when syncing the contents of two folders. Given that you could be deleting valuable information by accident, it’s awesome to have a preview that shows what the folders will look like after the action.

How Do You Prevent User Screw-ups?

If you’re creating an app for anyone but yourself, you can pretty much guarantee that there’s going to be confusion over some aspect of the interface. Carefully considering user error is a must in all aspects of design and the tips above should help get you started in the right direction when you’re structuring app workflows.

Now that you’ve seen my examples, it’s time to chime in with your own. How do you help your users prevent mistakes? What other sites have you seen around the web with interesting solutions like the one we saw on YouTube?

Tags: Software

April 18 2012

21:00

Introducing Breezi CMS Meant For Designers: Review

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Are you looking for a good hosted CMS solution for designing your next website? If so, a good option for you to consider might be Breezi.

Breezi is a visual CSS Editor and Edit-in-Place CMS meant especially for designers. The Breezi CMS is supplemented by to-the-mark style control and multiple apps that lend great functionality to your website.

Major Features

Breezi: A CMS Meant for Designers

Breezi: A CMS Meant for Designers

  • Edit-in-Place: To begin with, Breezi CMS lets you edit your website simply by clicking on the item that you intend to change. Thus, you can change your layout, styles and content – all by simply clicking on respective regions.
  • Control Over Style: Breezi provides precise control for many design features such as drop shadows, line-heights, opacity, etc.

    Style Control features in Breezi

    Style Control features in Breezi

  • Working with Images: Breezi lets you edit and resize your images in a simple drag-and-drop interface. Of course, the standard functionality such as crop and/or zoom is there as well

    Edit Image Feature in Breezi

    Edit Image Feature in Breezi

  • Applications: Breezi’s apps are, to a great extent, the equivalent of WP’s widgets. You can add them to your website to provide enhanced features, such as Facebook boxes, live Tweets, forms and so on. Apps can be added via a drag-and-drop interface, and the number of apps is growing at a steady pace.

    Breezi has several in-house apps to extend its features

    Breezi has several in-house apps to extend its features

  • WYSIWYG: Breezi’s WYSIWYG Editor lets you edit text and other content quite easily. Apart from standard WYSIWYG features, the Editor also lets you adjust factors such as drop-shadow, line-height and letter-spacing. Plus, you also have many website backgrounds at your service!

    Different Backgrounds in Breezi

    Different Backgrounds in Breezi

  • Map Your Own Domain: Even though Breezi is a hosted CMS, and it provides you with a sub-domain for your site, chances are you’d prefer to use your own domain. You can easily point the domain to your website.
  • Fonts and Forms: Breezi offers many fonts from the Google Font Library. Plus, you can use the Breezi Forms app to create as many forms as you like.

    Breezi supports several fonts from Google Fonts Library

    Breezi supports several fonts from Google Fonts Library

  • Pages and SEO: Breezi allows you to have unlimited number of pages for your website. Of course, you also get to configure SEO settings such as meta keywords and description.
  • External Embeds: Don’t like the default functionality within Breezi? You can embed code from other services using the Embed app. For instance, you can embed code from services such as MailChimp for newsletters, and/or Google Analytics tracking code for site stats.
  • Multi-Site: If you’re into franchise web development and would like to have a multi-site version of Breezi, you can consider using Empowerkit.
  • Support: Support is offered via Live Chat, email, video tutorials and Knowledgebase articles.

Modus Operandi

At present, Breezi has just one pricing plan – $12 per month. Comparing it with other hosted CMSs, the pricing is reasonable, though not super-cheap. There is a 30-day free trial, so you can check things well before deciding to spend money.

Currently, Breezi is still in BETA, so there aren’t many themes. However, for a simple website, the available options will suffice. In the screenshot given below, I decided to go with the Minimal theme. As you can see, there are blocks in place for adding images and other widgets.

In-context editing in Breezi

In-context editing in Breezi

When it comes to adding Apps, your options include Text/Photo Block, Image Gallery, Video Gallery, FB Fan Page, RSS, Twitter, Scribd, Contact, Embedded HTML, Slideshow, and few others. All in all, you have the required ingredients for a decent website.

Major Apps in Breezi

Major Apps in Breezi

You can also edit the layout or add new pages from within the same toolbar.

Managing Pages in Breezi

Managing Pages in Breezi

The sitewide settings page is rather bland – your domain, administrator’s name and email, and Analytics code (if any) are the only options.

Website Settings in Breezi

Website Settings in Breezi

Verdict

So, is Breezi worth it?

Well, at $12 per month, it is a decent deal when it comes to hosted CMSs – the pricing includes the CMS features and addons, as well as web hosting. If you are a designer who’d like to use a hosted CMS for managing and creating websites, Breezi should be definitely considered, though you should also bear in mind the fact that Breezi is still in BETA. Further more, considering the fact that Breezi is still in its infancy and there are many new features yet to be added, it surely looks to be an interesting CMS in near future. In my opinion, Breezi’s popularity can be further enhanced if they offer a free package for their CMS, perhaps with limited number of websites per account – much like CushyCMS does.

However, on the downside, a hosted CMS is not everyone’s cup of tea. Often times, you find them lacking in terms of functionality – there is no PHP to dig into, no grand CSS tricks to perform magic! While such drag-and-drop functionality can make life easy for you if all you need to do is build websites for the average user, and the applications can help you implement even a decent looking blog, at the end of the day, if you need highly advanced features and customization, you’d be better off without Breezi (or any hosted CMS for that matter).

Of course, you can try Breezi for free for 30 days to decide whether it is meant for you.

Links:

April 05 2012

23:00

18 Hosted CMS to Solve Your Needs and Grant You Unlimited Jedi Power

When it comes to choosing a CMS, there are a lot of options to choose from. One can go with traditional ones, such as WordPress, Drupal or Joomla! Alternatively, one can opt for a hosted solution too.

Hosted CMSs tend to be quite popular with designers. While they may not be able to compete with self-hosted ones in terms of scalability, they have several advantages of their own. Apart from included hosting, they also come with A+ grade support from the CMS manufacturer, and thus you know that if something were to go wrong, you won’t be left feeling lost. Secondly, most of them feature intuitive interfaces to help you develop websites easily.

Apart from that, almost all hosted CMSs come with Reseller Tools – you can re-brand and re-sell the websites you create to your clients. Thus, using a hosted CMS allows designers to not just work in an easy manner but also gain a residual flow of income. You have ready-made hosting, support and CMS deployment at your service – all you need to do is create websites and receive payment! Also, almost all hosted CMSs nowadays offer a free trial, so you can try before you buy.

In this article, we take a look at some of the major hosted CMSs. However, before we take the plunge, it is worthwhile to point out that this article, for the sake of clarity, mentions CMSs that project themselves as Content Management Systems in the proper sense of the term. Thus, awesome services such as WordPress.com have been left out (although WP.com offers WordPress as a hosted solution, it projects itself as a blogging tool and not a regular CMS).

1. Agility CMS

Agility CMS lets you manage your content and create websites in a snap. The CMS comes with its own Content API. You can also use Agility CMS to manage websites built with ASP.NET

Agility CMS

Agility CMS

Pros: Great Rich Text Editing, support for JSON API and ASP.NET.

Cons: Bit overpriced, may seem too sophisticated for some clients.

Pricing: Basic Plan at $200 per month (includes two content editors).

Website

2. LightCMS

LightCMS is a CMS specifically meant for designers. You can create a free website with 3 pages, but if you wish to resell and create unlimited websites, you’ll have to opt for the paid plans. The CMS does not have the typical Admin Dashboard – instead, it features in-context editing, that is, you can edit your website simply by clicking on the respective regions.

Light CMS

Light CMS

Pros: e-Commerce Tools, Reseller options, special plans for web designers.

Cons: Needs better documentation.

Pricing: Basic Plan with 1 GB storage at $19 per month.

Website

3. Squarespace

Squarespace is another hosted CMS that lets you create a blog, website or portfolio. The CMS offers excellent templates, stats and specialized features for particular websites such as photo galleries.

SquareSpace

SquareSpace

Pros: Awesome apps for iOS and Android, Importers for WP, Blogger and others.

Cons: Virtually nil

Pricing: Standard Pack at $8 per month (billed annually) with 500 GB bandwidth and 2 GB storage

Website

4. HiFi

HiFi lets you create websites with zero design constraints. It offers a slick API and intuitive interface.

HiFi

HiFi

Pros: Excellent SEO settings, easy to use interface.

Cons: Plans should be limited in terms of bandwidth instead of pages.

Pricing: Starter Plan for $19 per month (maximum 25 pages).

Website

5. Adobe Business Catalyst

Adobe Business Catalyst is an all-in-one platform for building websites, online stores and managing businesses. As the name suggests, it is useful only if you have enterprises and businesses as your clients. Apart from content management, BC can also help you with turn-key eCommerce, CRM, email marketing and other similar tasks.

Adobe Business Catalyst

Adobe Business Catalyst

Pros: Ideal for businesses and organizations.

Cons: May not suit the needs of non-businesses.

Pricing: The Basic+ Plan is available for roughly $12 per month. It includes 1 GB of storage and 1 TB of bandwidth, along with hosted emails.

Website

6. Webvanta

Webvanta lets you build websites with ease. You can embed functionality such as blogs, photo galleries, slideshows, forms, etc. As a designer, you also have the option to become a partner and re-brand the CMS. For end users, there is a free plan with limited functionality.

Webvanta

Webvanta

Pros: Special plans for designers, priority support, monthly webinars.

Cons: Pricing on the higher side.

Pricing: Starter Plan at $149 per year (includes Premium Hosting).

Website

7. Webpop

Webpop is another cloud-based hosted CMS for designers. Unlike others, Webpop does not offer unwanted abstraction and instead allows you full HTML and CSS control. In fact, Webpop’s pricing plans too are modeled around designers’ usage – Personal, Freelance and Agency!

Webpop

Webpop

Pros: Excellent stats and analytics, gorgeous layout.

Cons: Virtually nil, though it can use a limited features’ Free Plan.

Pricing: Personal Plan is at $19 per month, which allows you to have 1 GB storage, 5 projects and 1 client/collaborator.

Website

8. Edicy

If Webpop is meant for designers, Edicy caters to end users. It offers out of the box SEO, responsive templates and layout, and support for building multilingual websites (native support, that is – you don’t have to do the translation).

Edicy

Edicy

Pros: Multilingual features, Competitive pricing.

Cons: Edicy’s own website seems to be slightly slow in loading (compared to others).

Pricing: Pro Plan at $9 per month, with 5 GB storage (Free Plan also available).

Website

9. Shopify

Shopify is a hosted CMS meant for creating e-commerce websites and stores. It provides you with all the functionality you need to run your e-commerce website, such as product/inventory/customer management, payment gateways and even fraud detection.

Shopify

Shopify

Pros: Ideal for running an e-commerce website, good tools for designers.

Cons: Not useful for non-e-commerce sites.

Pricing: Basic plan at $30 per month with 1 GB storage and unlimited bandwidth.

Website

10. Magento Go

Magento Go is another hosted solution for e-commerce websites. Basically, it is the hosted version of the famous e-commerce web application Magento.

Magento Go

Magento Go

Pros: Terrific features for e-commerce stores.

Cons: Awkward pricing (after 800 MB, the next storage option is 5 GB, with no other price point in between).

Pricing: ‘Get Going’ Plan at $15 per month with 200 MB storage and 4 GB bandwidth.

Website

11. Highwire

Yet another e-commerce CMS, Highwire lets you manage orders, customers, products and marketing in an easy manner. As a designer, you have full HTML and CSS control, and as an end-user, you have unmatched e-commerce tools at your service! There is also a free ‘Facebook’ Plan for users.

Highwire

Highwire

Pros: Awesome stats and analytics, good tools for e-commerce.

Cons: Can use a better documentation.

Pricing: Bronze Plan at $19.95 per month (unlimited features, but your sales volume cannot exceed $1500 per month).

Website

12. SolidShops

SolidShops is a solution for e-commerce stores. Bored of e-commerce already? Well, SolidShops is different from the rest in the sense that it focuses on designers, not end users or store owners. The feature set is mere essential, and the focus is on simplicity. Also, it offers full design control.

SolidShops

SolidShops

Pros: Meant for designers of e-commerce websites.

Cons: Simplicity in features may not suit everyone.

Pricing: Basic Plan at $29 per month with 100 MB storage.

Website

13. Volusion

Volusion is a hosted CMS meant for (yes, you guessed it right) e-commerce websites. It offers several beautiful templates, management tools for orders, customers, products, as well as many unique features such as email newsletters, customer wishlists, daily deals, etc.

Volusion

Volusion

Pros: Many unique features for e-commerce websites.

Cons: Needs better documentation.

Pricing: Steel Plan at $19 per month with 1 GB data transfer.

Website

14. Concrete5

Concrete5 is primarily a self-hosted CMS like Drupal and WordPress. However, they also offer hosting and thus, Concrete5 can be run as a hosted solution too. Speaking of the CMS, Concrete5 is easy to use, features many unique elements and can power many different genres of websites, from enterprise entities to blogs. I once did a two-part review of Concrete5 here and here.

Concrete5

Concrete5

Pros: Awesome CMS with in-built Sitemaps, Stats and SEO.

Cons: Slightly expensive (CMS itself is free, but the hosted version isn’t).

Pricing: $45 per month with 5 GB storage and 25 GB bandwidth.

Website

15. Breezi

Breezi is a visual CSS Editor and edit-in-place CMS meant for designers. It offers great control over style, useful apps, powerful WYSIWYG, custom tracking codes, integration with Google Fonts Library, and several other features.

Breezi

Breezi

Pros: Interesting set of features, good support.

Cons: Still in BETA, so may not be everyone’s cup of tea.

Pricing: $12 per month.

Website

16. CushyCMS

CushyCMS is a simple CMS meant for designers. It is versatile and swift in operation and offers several features.

CushyCMS

CushyCMS

Pros: Extremely easy to use.

Cons: Features may seem limiting as compared to others.

Pricing: Pro Plan at $28 per month (Free Plan also available with limited functionality).

Website

17. Vae Platform

Vae Platform is an integrated CMS and e-commerce solution along with redundant hosting. It includes support for shopping carts, newsletters, analytics, etc. Also, the CMS offers full support for PHP, CSS, MySQL, and Subversion. It also comes with a 90-day money-back guarantee.

Vae Platform

Vae Platform

Pros: Perhaps the best pick for e-commerce websites.

Cons: May seem expensive if you do not need the advanced features.

Pricing: Solo Plan at $299 per month which allows hosting 10 websites.

Website

18. PageLime

PageLime is a CMS meant for designers. It offers reseller tools and support for mobile devices. We did a detailed review of PageLime here.

PageLime

PageLime

Pros: Reseller tools, iPhone app.

Cons: Feature set not as advanced as other CMSs in this league.

Pricing: Professional Plan at $19 per month which allows you to have 50 websites (Free Plan with limited functionality also available).

Website

With that, we come to the end of this round-up. Do you use a hosted CMS? If so, feel free to share your thoughts with us in the comments.

March 28 2012

08:00

3 Fantastic & Fresh Tools for Web Designers

screenshot

I love to keep an eye on the every growing world of single purpose web apps that are specifically aimed at making part of your job as a web designer a little bit easier. Today we’ll check out three of these tools that I’ve found fun and helpful recently.

We’ll start by looking at Colllor, a great way to turn a single color into many. Next we’ll jump into Warp CSS and create some amazing CSS typography that you probably didn’t even think was possible. Finally, we’ll check out Bear CSS, a way to quickly generate a starter stylesheet based on your HTML. Let’s get started!


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Colllor

screenshot

The first new tool we’re going to look at is Colllor, a fun app that will help you add some variety to your color palettes. The concept here is simple: “Turn one color into an array of alternative ones.” Let’s see how it works.

How It Works

Step one is simply to pick a color. Take that starting color, type it in and hit the “Pick Color” button. You can type in a hex code or even a standard named color. Alternatively, you can hit the random color button just to give it a test drive.

screenshot

From here the output is quite impressive. You get four horizontal bars filled with new color swatches to choose from: shades/tints, tones, mix, and similar. Your original color is clearly highlighted for reference.

screenshot

You are presented with over fifty related swatches, each of which is nicely labelled, has a cool 3D hover effect and can be copied to your clipboard with a single click.

screenshot

My Thoughts On Colllor

I’m a sucker for color apps and this one drew me in immediately. It’s really well designed and interactive enough to make finding colors a really enjoyable experience. I was a little confused at first as to why standard options like generating complementary swatches weren’t included, but there are plenty of apps out there with that functionality and I like that Colllor seeks to be unique in its approach.

Generally, for finding different shades of a single color, I use 0to255, however, that site tends to be quite sluggish. Colllor is both faster and more versatile. Particularly unique is the “Mix” option, which allows you to choose two colors to see a gradient of individual colors between the two.

Another thing that works well is the “copy to clipboard” feature. Many color utilities feel the need to include the “#” when the color is copied, which is useful for CSS, but bad for Photoshop (CS6 addresses this). For now, I prefer that the symbol be left out, which is the route taken by Colllor.

I really have no complaints here. Colllor is a fantastic and free color utility that you should absolutely add to your list of bookmarks.

CSS Warp

screenshot

CSS Warp is a crazy tool that allows you to create live web type that follows a complicated path. The tool is remarkably similar to the path type functionality in Illustrator, so the workflow should be familiar enough for you to pick it up pretty quickly.

How It Works

Let’s walk through a test to see how it works. The first thing that you do is enter some text. Because the final generated code can be massive (we’ll talk about this in a minute), I recommend keeping your text short and sweet. Once you’re finished, click the warp button.

screenshot

Your next step is to define the curve that your type will follow. The options here are pretty flexible, you can either define your own bezier style path or choose a circle. The points create rounded curves by default but there’s an option at the bottom of the app to change them into sharp corners.

screenshot

You do the actual hands on molding in the little preview window that appears next to all of these controls. This updates live with any changes you make so you can always tell exactly what the final product will look like.

screenshot

You can also define several options regarding the font as well, this includes the ability to set the size, line height, kerning*, and font. I love that you can choose from the Google Web Font library here. You also have some options for how the text aligns to the path.

*I used the term “kerning” here because that’s the name of the control on the actual app. It’s actually mislabeled though, this slider really controls the type’s tracking. The difference is important. Read this for more information.

screenshot

Once you’re all done and have the type just how you want it, click the “Generate HTML” button above the preview to get the snippet of text to copy and paste into your code.

screenshot

My Thoughts on CSS Warp

I can honestly say that I’ve never seen another tool that pulls this trick off so well with live web text. The results are completely impressive and simply not something you would ever want to do by hand. I love it when developers take the initiative to push the boundaries of what’s possible on the web and distribute their work freely.

My only real problem here is really something completely out of the developer’s control. CSS and HTML don’t actually have built in functionality for typing along a path, so the only way to do it is wrap each and every letter in a span, then independently position and rotate the letters. This leads to a massive chunk of code that isn’t easy to interpret. As I said, the developer really can’t help this, other tools that target individual letters such as Kern.js are forced to work the same way.

Overall, I was blown away by how well developed the app is as a whole. It’s extremely easy to get the effect that you want and there are a ton of options to tweak along the way. There’s also a JavaScript version that you should check out.

Bear CSS

screenshot

Bear CSS does only one thing: it serves up a starter stylesheet when you upload an HTML file. It doesn’t do the job of styling your web page, it merely gets you started by typing out the obvious style hooks for you.

How It Works

Bear CSS doesn’t really require any thinking or effort on your part. All you do, in fact all you can do, is upload an HTML document.

screenshot

Once you upload your HTML doc, it’s time to click the “Download CSS” button. I grabbed a random document that I had laying around just to test it out and received the following output.

html { 
 
 
} 
 
body { 
 
 
} 
 
 
/*******************************************************************
LAYOUT
*******************************************************************/
 
div { 
 
 
} 
 
#header { 
 
 
} 
 
#mainsection { 
 
 
} 
 
#footer { 
 
 
} 
 
 
/*******************************************************************
TYPOGRAPHY
*******************************************************************/
 
h1 { 
 
 
} 
 
p { 
 
 
} 
 
 
/*******************************************************************
IMAGES, VIDEO & AUDIO
*******************************************************************/
 
img { 
 
 
}

</ br>

My Thoughts On Bear CSS

I was pretty skeptical about this tool. I like to write my own CSS and I wasn’t crazy about the idea of something attempting to do it for me. That being said, I was pleasantly surprised by the output. The organization, though not appropriate for every project, is definitely logical and fairly widely applicable. I like that without any effort I’ve got a nice starter CSS document with the major hooks that I might want to target, clearly separated into categories like typography and layout.

Obviously, it isn’t a magic tool. It doesn’t read your mind and create any complex selectors, it’s just the “bear necessities” (get it?). Not everyone writes up the full HTML of a web page before starting on CSS, but if you do then this is definitely something that you should try out.

One of the features that I’d really like to see is the ability to paste in some HTML as opposed to uploading a file. It would be nice to just do a quick copy action from my open text editor. Also, in a few of my tests that contained repeated classes, the generated CSS also repeated that class selector, which is obviously redundant and unnecessary.

Another thing I’d like to see is a few extra options for pro users to tweak. A few different organization methods, whether or not to include hovers with for anything wrapped in an anchor, and maybe a reset/normalize inclusion.

Conclusion

I hope you’ve found a new tool or perhaps three new tools to add to your web development goody bag. The three apps above won’t drastically affect your workflow, but they can make certain parts of it a little bit easier.

Leave a comment below and let us know what you think of the three apps above. Have you used any of them before? What other great tools have helped you out recently?

Tags: Software

January 19 2012

04:20

December 28 2011

06:00

The Ultimate Beginner’s Guide to Using Scatter Brushes in Photoshop

screenshot

In web design we often focus on using Photoshop to create pixel perfect designs that are meticulously shaped and layered until they’re absolutely pristine. Repeated patterns, tiny strokes, complex gradients and reflections are trademarks of this design style.

But what if you’re going for something more organic? How can we use Photoshop to create complex and random particle arrangements that don’t look cheesy and contrived? The answer of course is to utilize scatter brushes. This awesome tool seems fairly simple on the surface but there’s a ton functionality and limitless possibilities to explore so even if you’re a Photoshop pro, read on to see some great ideas for how to use scatter brushes in your work.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Every Brush Is a Scatter Brush

Photoshop gives you a remarkable amount of control over every single brush that you use, whether you built it yourself or downloaded it from the web. This means that any brush that is currently in your Photoshop brush palette is potentially a scatter brush. Which is great news, because this equates to scatter brushes being super easy to implement.

To start off, simply open up your brush palette and select a brush. As I just mentioned, any brush will do, but I’m going to pick a star because its complex shape really helps show off the varying level of effects that you can achieve.

screenshot

Spacing

Built into the brush you just selected are various attributes which are unique to just that brush. One of the most important attributes to our discussion today is the spacing. A default round brush is really just a circle shape that has the spacing set to 0. This creates a solid line when you click and drag. Some other brushes however, have a slightly higher spacing setting. Here’s what my star brush looks like when I click and drag with it:

screenshot

As you can see, instead of dragging a solid line, it looks more like a series of closely spaced stamps that follow my drawing line.

So how do we control this behavior? If we go to our Brush palette (Window>Brush), we find a ton of settings for controlling pretty, much every aspect of the brush. To start, make sure you have the “Brush Tip Shape” category selected on the left. At the bottom of this palette you’ll find the spacing options for the brush.

screenshot

Cranking the spacing up decreases the frequency with which the star is stamped in our line. If we repeat our click and drag maneuver, we get something like this:

screenshot

We’re moving in the right direction, but we still haven’t really created a nice scatter brush yet that’s capable of creating some nice particle effects.

Making It Scatter

Adjusting the spacing on a brush is nice, but in order to effect a scatter we need major vertical and horizontal shifts between each stamp. To do this, go into the “Scattering” section on the left side of the Brush palette.

screenshot

Here you can crank up the Scatter slider to really create a nice and random distribution. Adjust the Count slider to play with the frequency of the stamps. Now our brush is really starting to look like a scatter brush!

screenshot

Jitter Bug

Throughout the Brush palette you’ll see various “Jitter” sliders. You might be asking yourself, “what the heck is jitter?”, which is a perfectly legitimate question. The word itself refers to deviations from a standard, so when you apply that to a brush setting it means that you’re introducing more variation into the result within a given range.

Size Jitter

Let’s take a look at a good jitter example. In our next step we want to start varying the size of our stars. Repeating the same basic shape is boring and jitter sliders allow us to make the scatter much more organic.

Under the “Shape Dynamics” category, you’ll find a Size Jitter Slider. Crank this to the max:

screenshot

With that, click and drag your brush and the stars should come out in all different locations and all different sizes. Fancy!

screenshot

Angle Jitter

Notice that, even though the sizes are different now, the stars all still look a little too similar. One reason for this is that they all share the same exact orientation. To fix this, jump down to the angle jitter:

screenshot

Now any semblance of uniformity is really starting to disappear. Our stars are all over the place with different locations, sizes and rotations.

screenshot

Opacity, Color and Roundness Jitter

Under the “Transfer” section, you’ll find the Opacity Jitter, which helps you fade the stars in and out:

screenshot

And under the “Color Dynamics” section, you’ll find the option to jitter between the foreground and background, and adjust the hue and saturation:

screenshot

If we want to really go nuts, we can go back into the “Shape Dynamics” category and turn up the Roundness Jitter. This will make our stars look like they’re tilted in 3D space. The result is seems really layered and impressive for something that only tooks a single swipe.

screenshot

Fun With Scatter Brushes

Armed with the knowledge above, you can create some really amazing things with scatter brushes. The possibilities are limited only by your imagination. Here are a few examples.

Bokeh Textures

Bokeh textures are really popular in design right now. These utilize the blurry spots that result when lights are photographed out of focus (bokeh itself really refers to aesthetic quality of the blur, but that’s a different discussion entirely).

Creating these with scatter brushes is super easy. Just grab a nice hard round brush and set some of the parameters we just learned about. Here I kept the size constant but increased the scatter, spacing and opacity jitter.

screenshot

The result looks photographic but the dots were created entirely in Photoshop. The cool lighting effects are the wonder of Color Dodge in action. Let’s see how this works in a new example.

Disintegration Effect

To utilize this effect, create two layers, make the one on top black and the one on bottom “almost black” (really really dark gray).

One the black layer, grab a soft white brush and paint with a size a roundness jittered scatter brush. The result should look pretty weird at this point, like this:

screenshot

Now, if we take the top layer with all the scatter brush work and set it to Color Dodge, we get a nice glowing effect.

screenshot

Now throw in some text, mask out the bottom and apply some more bright spots with tighter scattering around where the letters disappear and you’ve got the title image for this post:

screenshot

Custom Shapes

Also be sure to experiment with various shapes, especially those that occur in nature and therefore tend to be scattered organically when we see them. Here I had some fun with a leafy arrangement:

screenshot

Conclusion

To sum up, scatter brushes are a quick and easy way to make your designs more organic, interesting and complex. Absolutely any brush can quickly be turned into a scatter brush and you have lots of simple controls to vary the effect however you like.

Leave a comment and let us know if you learned anything. Do you ever use scatter brushes in your work? Leave a link to an example if you have one.

Tags: Software

December 08 2011

13:23

So You Want To Build A Software Product





 



 


If you like the idea of being your own boss (I certainly do), chances are you get the itch sometimes to create your own product — a product whose direction you control, that you do not have to compromise on with someone else, and whose fruits you get to fully enjoy, instead of being paid by the hour or a flat rate. It could be a Web service, a WordPress plugin or a desktop application, but the core problem is the same: how do you pick an idea that will succeed?

Most of us take a very simple approach: we stumble on something that doesn’t work well for us or we identify a problem that we have a lot of experience with, and we think, “All right, I’ll just build x for y and make a mint.” The problem is that we don’t have any indicators of whether others feel the same pain and would be inclined to pay for a solution.

This post presents a systematic approach to finding inspiration for a good software product, and to validating that there is an actual need for it in the real world. No product is guaranteed to succeed, yet our goal should be to minimize risk and maximize opportunity by picking the ideas that will most likely succeed.

(Please note: this article concerns developing commercial ideas. If you want to build an open-source project and do not care about commercialization, then it might be less relevant to you.)

Finding A Good Idea For A Software Product

Some of us develop a product after naturally coming up with the idea while performing a certain task. But what if you want to start your own venture but don’t yet have an idea of what to build? How do you find inspiration for a new software product?

Community Websites

A great source of inspiration is community websites, such as Q&A platforms, forums and social networks such as Facebook and Twitter, where your target audience hangs out. Want to build a WordPress plugin? Visit a forum for professional bloggers. Want to build productivity software? Visit a LinkedIn group for the professionals you want to target. Searching on Twitter for your preferred platform or product type can be an amazing source of inspiration.

Find out where your potential audience hangs out and soak up the atmosphere. Read about people’s problems and pains with their current software. Pick up hints on what would make their lives easier (or, in the case of games, what would entertain them most). Search for things that most of the community agrees on, and try to develop it into a concrete concept.

Don’t expect an idea to be handed to you on a silver platter. Rather, get a feel for what your target audience needs, and from there build a concept. (We’ll go over how to figure out the potential of that concept in a bit.)

Variation of a Successful Product

Successful products have the advantage of a proven concept. Many other factors come into play, of course, such as execution, marketing and timing, but a successful product already at least has traction and a user base that you can target right away, increasing your chances of success.


(Image: Viktor Hertz)

I’m not suggesting that you simply clone an existing idea. That could work, but competing with an established product with a mere clone would likely result in failure (unless other factors were involved); and, frankly, cloning an existing product isn’t much fun. You could, however, attack a weakness in another product, turning it into a strength in yours and creating an attractive variation that feeds on the popularity of the original product.

Playing to Your Strengths

Each of us has experience with certain tools, frameworks, APIs and projects. Go over your old projects and library of code, and think of how to build on that experience to create something new. This is how I created my own product, Binpress, a discovery service and marketplace for source code.

Covering familiar ground by building on past experience instead of trying something completely new helps to eliminate some of the risk. Using old code libraries can save significant development time, thus reducing some financial risk. I’ve previously written about how to extract code from old projects, the benefits of which seem especially relevant when you’re trying to reduce risk in a new software venture.

Taking Notes for Later

You’ve probably had many small a-ha moments, when you identified a missing feature in a software product. I have those all the time, when I think “If only this had feature x” or “This junk just doesn’t do what it’s supposed to do.” Each discovery is an idea for a potential product.

Such ideas pop up and then disappear from our memory. If only we take note, one of these minor revelations could turn into an action item. It’s all about discipline. The next time you have such a thought, write it down somewhere you’ll find later. Going over these notes in a few weeks or months could lead to your next breakthrough.

Assessing The Market

By now you have a few product ideas. But how do you know which is your best bet? A few parameters will affect your choice of which idea to develop. And this information will be useful if you ever want investors to support your product financially.

Market Size and Addressable Market

The bigger the market, the higher the potential payoff. Because you will likely be putting in the same amount of effort and time regardless of market size, targeting a big market makes more sense.

The important metric here is total addressable market, which basically means the total amount of revenue you can expect to capture.

There are two common ways to calculate this number: top down and bottom up. In the top-down approach, you start with the total size of the market, and then filter down to your target audience. For example, you could start with the total amount of revenue generated for online t-shirt sales, and then multiply it by the fraction of the market that you intend to capture (let’s say, biker-themed t-shirts).

In the bottom-up approach, you calculate the addressable market size by developing a formula that calculates profit based on your business model. For example, if your model is subscription-based, then multiplying the amount that you intend to charge by the number of people in your target audience will give you your total addressable market.

This is, of course, a simplification of the process. The complexity of measuring the total addressable market will depend on the market in question and the information available for it. You might want to read “Addressable Market: Making the Estimate” by Mark Peters Davis and “Market Sizing: Numerical Narratives” by Jay Haynes.

Actual and Potential Demand

Total addressable market represents the revenue that your product can capture. But will people actually pay for it? To answer this question, more research and thinking is involved.

Search Engines
You wouldn’t believe how many ideas could have been dumped if people had just bothered to search for them. Think of several keywords that represent the problem you want to solve and run them through Google (or Bing, whichever you fancy).

If more results are for people looking for a solution than for actual solutions to the problem, then you might have a winner. Run several variations of the queries based on the search results, until you have a good sense of what is publicly available when people search for a solution.

If you find little mention of the problem, then either your keywords are wrong or the problem is not as big as you think. This is not a game-breaker, but do take note. Some products create new markets or change established ones by generating demand. The demand for such products is harder to assess through a search engine and requires that you trust your vision and instincts, if you decide to follow through.

Staking Out Your Audience
We mentioned community websites in the idea-searching phase, and your research there might tell you what the community thinks. If not, now would be a good time to read what people are saying about the problem. Relevant discussions in online communities could be a great resource for validating and improving a product idea.

If you have experience in the market, then you might already know potential customers (online or off). In that case, you can get great feedback by approaching the ones you trust and asking them about your idea.


(Image: Viktor Hertz)

You might be protective of your idea and reluctant to share it with a relative stranger, but I recommend putting it out there as early as possible and getting real-world feedback. Feedback will help you determine whether the idea is worth pursuing and how to refine it. Steer clear of feedback from family and friends, because their opinions will obviously be biased.

Don’t let negative feedback get you down either; take it at face value. Remember, despite the old adage, the customer is not always right — otherwise, we’d be all riding faster horses instead of driving cars.

Your Personal Evaluation
Despite these methods, getting a sense of the demand might still be difficult, especially if you expect the product to generate new demand. In this case, you will have to rely more on your market experience and intuition.

It all boils down to, do you personally believe this idea is worth developing? From my experience as an entrepreneur, if you believe strongly enough that something can be a big success, then you will find a way to make it happen. It might not go as smoothly as you’d like, but as long as you keep believing, you will pull through eventually. Your personal belief in the potential of the idea should be the determining factor in developing it.

Check Out the Competition

You can learn a lot about the market by checking out the competition. Even if you don’t have direct competition, you will have indirect competition that competes for the attention and pocketbooks of your target audience. Not being able to find any competition at all is usually a sign that your idea is not commercially feasible — unless it is truly revolutionary (which is rarely the case). The existence of competition will validate your idea and could be a trove of inspiration and information on what works and what doesn’t.

Check out your competition’s websites, their mentions in traditional media (news websites and blogs) and their presence in social media. You will learn a lot about where they are as a business, what people think of them, their level of success, their main problems, people’s complaints about them and much more.

Are there major players in your market already? How entrenched are they? How hard would it be to compete against them? Competition provides both validation and a challenge, and it should factor heavily into your decision on whether to develop your idea.

In The End, It’s All You

Building your own venture might be a little intimidating, but it’s an amazing experience. Reducing the risk by doing research is an important first step. That being said, the most important factor is your belief in the potential of the product.

A strong belief in the product will help you get through difficult times, when development stalls or sales decline. It will be your shield against the doubters and haters — and if you gain any traction, you’re certain to get both.

To build your own business, you have to believe in your abilities and in the product. Everything will fall into place from there, and it will be one heck of a ride. Don’t be afraid to fail; make your best effort and learn from your mistakes. If you can tough out the bad times, the good times will arrive, and they will be worth it. Good luck!

(al) (il)


© Eran Galperin for Smashing Magazine, 2011.

December 01 2011

02:51

Brush Pilot Winners!

I hope everyone got all of their holiday weekend shopping out of the way. Here are the 5 lucky winners of a free copy of Brush Pilot. And the winners are: Meredith, Carla Ceia, Josh, Adam Fondren, and Dariela. COngratulations! I hope you enjoy the software. I’ll send you license codes via email. Enjoy :)

Brush Pilot for Mac - A Photoshop Brush Previewer

November 30 2011

10:00

Designing a Website With IM Creator

screenshot

In the ever expanding world of online website builders, it’s pretty difficult to find anything that’s worth spending more than ten minutes with. This market is flooded with clunky interfaces, hideous templates and brutal freeform design restrictions.

I recently came across a product called IM Creator that stands out though both in style and functionality. Does it live up to its promises or join the rest of the sites in this market and fall short of a decent DIY website solution? Read on to find out.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Plight of the Web-Based WYSIWYG

WYSIWYG website builders are still regarded by many professional coders and designers as a bit of an abomination, web-based WYSIWYGs double so. Most of them impose strict constraints on your design freedom and/or spit out some pretty abominable code. Some even go so far as to dish out a… wait for it, Flash site! I’m definitely in the “code it yourself” camp but I still always play with these things when I see a new one just to keep an eye on how this market is evolving.

“Despite rejection by we snobby coders, the market refuses to die.”

</ br>

The thing that holds my interest in this area is that, despite rejection by we snobby coders, the market refuses to die. In fact, it seems to be not only growing, but quickly improving. Each new fancy do-it-yourself website builder that I come across is a little bit better than the last. Incremental improvement is nothing to scoff at, in the long-term it could lead to products that even serious professionals have to appreciate.

Will that day ever come? Many say it won’t. The popular argument says that WYSIWYGs will never be a tool for serious web design professionals, only amateurs wishing they were in the big leagues or entrepreneurs who can’t afford to hire a designer.

I’d wager that if I went back to the 1980s, I’d find tons of designers that would tell me the same of computers in general. Sure, they hold potential but no serious designer would ever use one. To do so would be to abandon the true art of design and the freedom of building by hand. Sound familiar?

I’m not making the argument that every web designer should run out and start using Homestead, I’m merely saying that there’s no point in forever discarding the idea that this niche of products could one day make a big splash in the professional world even beyond what we saw from Dreamweaver years ago.

With that in mind, I’ll keep trying these things. I might shake my head and wonder how some of them are so far off base, but I’m confident that one day I’ll perform that same gesture in wonder of just how far these products have come.

Meet IM Creator

screenshot

The latest online website builder that I’ve come across is IM Creator. The sales pitch is a lot like that its brethren: build your own beautiful website without typing a single line of code, free! We all know these free claims are pretty bogus because in the long run, you’ll have to fork out for the hosting if you actually want to use the site. But it’s at least truly free to sign up and start building sites.

IM Creator actually delays sign up until you want to save something so you can jump right into the site builder.

screenshot

The interface here is completely bare, in a good way. It looks simple and approachable. There’s a ton that you can do but it’s cleverly structured to be easy enough that practically anyone can use it.

Building a Web Page

I chose to build my own site from scratch so IM Creator started me with what is essentially a blank page with a simple navigation menu at the top.

To add something to the page, you click the “Add an Element” button at the top, which expands a fairly large strip of buttons with options for adding a picture, title, paragraph, video, gallery, slideshow, etc.

screenshot

To start, I choose to drop in an image. Right away, an attractive photograph of a bird shows up in my canvas, ready to be resized and dragged into place.

screenshot

Clicking on the little link button above the image brings up a dialog that allows you to easily set up an internal or outgoing link so that when you click the picture, it takes you to a specified destination. Elsewhere you can add a title, alt text, etc.

screenshot

With the picture selected, I click on the “Advanced” options at the top right of the screen and select the “Borders and Background” option. After a look at my options, I decide to see if I can turn this photo into a circle by cranking the border-radius (which is how I would do it in CSS).

screenshot

Unfortunately, this does a whole lot of nothing. It seems to work on boxes, but not on images. Also, the border radius controls max out at 99px, which makes it almost useless for my circle hack.

No matter, I can make a circle picture on my own. So my next step is to replace the bird placeholder image with an image from my hard drive. To do this, you click on the image and then hit the big blue “Replace Pic” button.

The app quickly imports my photo and I nudge it into place. I’m quickly starting to get a feel for the workflow here and it’s not too bad. The app is quite responsive and feels much smoother than I expected. I also like that I’m not forced into a template as with apps like iWeb, I can build whatever I want.

screenshot

Adding Some Text

Next I go back to the “Add an Element” button and this time I choose a paragraph. Once again, the placeholder content is pretty awesome. The paragraph appears with a header, both of which are already fairly nicely styled.

screenshot

However, I notice immediately that I hate the squished line-height so I hit “Edit Paragraph” to see if I can fix it. From here I have basic options like setting the font family (a decent selection of popular free fonts like Chunk Five and Aller), size, color, etc. as well as some advanced options. Here I find the line-height control that I’m after.

screenshot

Cranking the line-height up to 1.5em helps immensely. Already our page is starting to look pretty good!

screenshot

Fixing the Menu

Next on the agenda is fixing that ugly navigation menu. I decided to go with something much more minimal: just plain text with simple hover effects.

I had no idea how to accomplish this, but clicking on the Menu Settings button popped up a set of controls that made it super easy. I was able to ditch the background color, set the text and text hover color, space out the items to my liking and even adjust the letter spacing.

screenshot

After a little more menu tweaking, I toss in a logo and this thing is really starting to look like a decent web page!

screenshot

Finishing Up

Following the same process, I fill out the rest of the design. There are a number of really useful tools to play with here. For instance, I was able to insert a live Google map and my Twitter feed in mere seconds. Here’s what the finished result looks like:

screenshot

Being able to actually build what’s in my head on a free online website builder is actually a pretty impressive feat. I would’ve definitely liked to have more control over CSS properties, especially those for layout, but on the whole the building experience was a pleasant one.

It Looks Good, But What’s Behind the Curtain?

If you want to see the actual page that resulted from my tests, you can check it out here. On the surface, it looks all right, but any web designer will have some serious problems with it. Just to be sure I hadn’t done anything wrong, I compared my result with one of the featured sites. They both suffered from the same problems.

For starters, the code is a mess. The HTML is completely bloated with content that seems more related to the app and its functions than the page you’re looking at in the browser. Further, the basic functionality is pretty rough. For instance, you can’t select any of the text on the page. As far as I can tell, the fonts are served up with FontSquirrel and @font-face so there’s no reason they shouldn’t be fully selectable.

Under the hood code and functionality is a critical place where just about all WYSIWYGs fall short in one way or another. It’s definitely an area that needs to be addressed before these tools and their resulting products can ever truly be respected as “real” websites.

Gorgeous Templates

IM Creator might fall far short of greatness in what’s under the hood but I have to say, from a purely visual standpoint, it really excels. The built-in templates are some of the best I’ve seen from a service like this:

screenshot

It’s really nice to see someone offering truly modern-looking web design templates in a WYSIWYG service, the norm in this industry tends to be pages that look straight out of 1999.

The Whole Package

As I mentioned earlier, the “free” element is really just for the design element. You’ll have to fork out the dough for hosting and a custom domain. The current price is $7.95/month (just short of $100 per year) but it looks like it’ll go up to $12.95 in the near future.

screenshot

It’s not the cheapest service in the world but if you’re on a tight budget, paying $100 to get an attractive website hosted at the domain of your choosing for a year is actually a pretty decent deal. If you hired me with the same goal in mind, you’d certainly pay a lot more (though you’d get a much better product).

Conclusion: What’s the Verdict?

Obviously, it goes without saying, this isn’t a product for professional web designers, and it’s not meant to be. We have better, more professional tools available to us and these sorts of services don’t offer the power or flexibility that we need.

However, if you’re a photographer, restaurant or other small business, the IM Creator package is pretty enticing. It’s decently priced and actually impresses me with its ability to build something completely from scratch with a fair amount of freedom. And for the folks out there not gifted in designing from scratch, the provided templates blow away any competitor that I’ve seen.

Online DIY site builders still have a long way to come, but products like IM Creator hint at a future where these types of tools produce truly impressive websites that both appeal to the masses and hold up under a professional’s scrutiny.

Tags: Software

November 23 2011

13:04

Free Stuff: Brush Pilot Giveaway and Cyber Monday Coupon Code

Ok, we have a holiday on our hands soon and I’m feeling like some of of you might want some free software. It’s been a while since we’ve had a Brush Pilot giveaway here on BittBox, so I think Thanksgiving week would be a perfect time. I’m giving away 5 copies of Brush Pilot to some lucky commenters, and I also have a Cyber Monday coupon code for 50% off. The coupon code is “ILOVEBRUSHES,” and it’s good starting Thursday and ends at midnight on Cyber Monday. Make sure you read the rules, and good luck :)

Visit BrushPilotApp.com to download a demo and read more details.

Brush Pilot for Mac - A Photoshop Brush Previewer

Brush Pilot™ is a fast and easy application for previewing Adobe® Photoshop® and Adobe Photoshop Elements Brushes (.abr), built exclusively for Mac OS X. Brush Pilot is designed to save you time by allowing you to instantly preview your brushes without having to load them into Photoshop.
Instantly finds all Photoshop BrushesInstantly finds all of your brushes

Brush Pilot for Mac - A Photoshop Brush Previewer

When you launch Brush Pilot, it automatically finds every brush file on your system, so there’s no need to navigate a Finder-like menu system. Brush Pilot also knows what version/s of Photoshop you have, and it separates your installed brushes from the rest.
Fast PreviewsBlazing fast previews

Brush Pilot has a small footprint, uses very little system resources, and previews even the most ginormous brush files at breakneck speed. It’s designed not to get in your way, but to make you more productive, as well as creatively inspired.
Install brushes with a single clickInstall brushes with one click

Brush Pilot is designed for productivity on more than one level. You can send files to the Trash, reveal their location in Finder, and even install selected files into all versions of Photoshop on your system with a single click, menus, Control/Right + Click, or keyboard shortcuts.

Check out some of the new features:

  • Export as PNG! When exporting, Brush Pilot will generate a PNG (with or without transparency) at full size for each individual brush inside the file and organize the collection into a folder.
  • “Show Volumes” menu command will show complete file hierarchy, arranged by volume, including mounted iDisks.
  • Double clicking on folders in file path display will open them in Finder.
  • iTunes style scrollbars.
  • File Count indicators reveal how many brush files are in each folder. (like Mail)

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 5 winners will be randomly chosen from the comments.
  • Please only comment if you have a Mac.
  • Comments will remain open for about a week.

November 21 2011

18:05

5 Simple Steps to Stunning Portraits in Photoshop

screenshot

Today’s article points out a harsh but true reality: just because you know how to use Photoshop for design work doesn’t mean you know how to edit photos. Fortunately, we’ve got you covered.

Follow along as we show you five simple and lightning fast steps you can take to transform your plain, boring portraits to stunning images that look straight out of a professional photographer’s portfolio. Along the way you’ll learn several important tips such as how to properly sharpen an image and how to draw the viewer’s attention to where you want it to go.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Different Kind of Workflow

Web designers generally know their way around Photoshop pretty well. Odds are you’ve been using it for years and could write a few tutorials on it yourself.

After years of being a designer, I found myself in this very position. From a design perspective, I was a Photoshop whiz who knew the application inside and out. However, when I began to pursue photography on a professional level, I realized that the skill set required for this task was a fundamentally different one.

A Tale of Two Photoshops

There are a million different reasons to use Photoshop, but two prominent uses come to mind. The first is how the crowd reading this blog generally uses it. We lay out websites, build typographic art, and create fancy looking UI elements from scratch. In short, we see Photoshop as a blank canvas on which we can create something.

“It’s rare that you’ll find a professional photographer these days who is satisfied with what comes out of the camera”

</ br>

On the other side, the very name of the application, “Photoshop,” indicates what could be argued as its original primary use: photo-editing. It’s rare that you’ll find a professional photographer these days who is satisfied with what comes out of the camera, they almost all take their images right into Photoshop, Lightroom (alternatively Aperture) or some combination of the two.

Let’s step away from our typical discussion of how to use Photoshop as a designer and take a brief look at a dead simple photography workflow that will help you improve the photographs that you incorporate into your work.

Step 1: Raw Exposure Adjustments

The first step we’re going to take is to open up your raw image, straight out of the camera, in Photoshop. When working with a photo shoot with thousands of photos, I perform this step in Lightroom. However, with a single image, it’s fine to just go right into Photoshop as it gives you a very similar set of raw editing tools.

“If you’re using images that you shoot yourself, make sure that you shoot in raw.”

</ br>

If you’re using images provided by someone else, you may not have the luxury of working with raw files. However, if you’re using images that you shoot yourself, make sure that you shoot in raw.

There’s only one downside to shooting in raw: file size. Raw files tend to be huge compared to their JPG equivalents. However, from an editing standpoint, raw files give you so much more freedom to manipulate and improve the image. If you’re skeptical, try shooting the same photo in RAW and in JPG, then adjust the white balance for each and you’ll immediately see the benefits of raw.

The Raw Dialog

When you drag a raw image to Photoshop, you’ll see a special dialog specifically for working with raw images. This contains a strip of tools along the top, a set of sliders along the right and shows a live, automatically updating preview of the image in the center.

screenshot

Adjusting Exposure

The first thing we want to do in this dialog is fix our exposure. As you can see, I took this shot a little on the dark side so we’ll need to brighten it up a bit. Here are the Adjustments that I made:

screenshot

As you can see, the main thing that I did was increase the brightness (not the exposure). I also added a tiny bit of fill light and upped the recovery to help reign in the highlights on the subject’s white shirt.

The result is a much brighter image that looks a lot less like the subject was standing in a shadow.

screenshot

Step 2: White Balance

The other step that I want to take in this dialog is to adjust the white balance. One of the primary factors that sets a professional’s photo apart from an amateur’s is proper white balance. An image with poor white balance has ugly, unrealistic colors that make the image look either too cool or too warm.

I’d like this image to be just a bit warmer so I take the temperature slider and move it to the right just a pinch. The result may seem subtle, but in the long run it’ll be a really important change.

screenshot

Adjusting the white balance can be tricky at first, but you’ll get the hang of it quickly after reading a good primer on the topic. I highly recommend checking out Cambridge in Colour’s “Understanding White Balance” article.

Step 3: Sharpen

Another big difference that sets professional photos apart is the sharpness of the image. If you take a close look at what you’re getting straight out of your camera compared to something from a magazine, odds are your images will look downright fuzzy by comparison.

There is a simple default sharpen command in Photoshop, but few professionals ever even touch it. You’ll find that you get much better results from more advanced techniques, the crowd favorite of which tends to be Unsharp Mask.

The Unsharp Mask command actually uses a blurred copy of the original image to reduce the dynamic range and effectively sharpen the points with higher contrast. It’s a fairly complicated scientific process dating all the way back to the 1930s, you can read more about it here.

screenshot

All you really need to know is that you can use this command to achieve nice and sharp images. I have an action set up that runs the Unsharp Mask filter twice with the following settings:

First Time:
Amount: 150%. Radius: 1.5 pixels. Threshold 6.

Second Time:
Amount: 25%. Radius: 30 pixels. Threshold 0.

Throw these settings (these are set up for large images) into your own action and you’ll be stunned by how much crisper your images will look with just the click of a button.

screenshot

Here’s an even closer look that really showcases the effect and how much it improved the sharpness of the image.

screenshot

Step 4: Draw the Focus to the Face

This step is an interesting step that you might never think to do on your own, but believe me, it makes a huge difference. The idea here is that faces are generally the most interesting part of an image. The viewer’s eyes are naturally drawn to faces but you can help boost this natural tendency by playing with the highlights and shadows of the image.

The steps we’ll be taking essentially to better highlight the face work perfectly as a sort of artificial flash; it will illuminate your subject and darken the background.

To begin, create two separate Curves Adjustment Layers: one that darkens the image and one that brightens it. Make the basic shape of your curves something close to what you see below.

screenshot

Next, apply a mask to each of the layers and fill the masks with black to hide them completely. Then grab a large soft brush and use it to paint in white on the masks. Use a brush at around 10% to lighten the face and then up the opacity to around 20-30% to darken the background. Here are the two masks that resulted from my efforts:

screenshot

And here are the resulting before and after images. The difference seems super subtle when you compare them side by side but it’s actually a fairly significant change. Click here to see an animated GIF that swaps between the before and after image. Notice how the effect draws your eyes in towards the center of the image.

screenshot

Step 5: Finishing Touches

To finish off your image nicely, I recommend two more adjustments. First, make one last, very subtle, global Curves adjustment to make sure you like the dynamic range of the image.

Finally, use a Hue/Saturation Adjustment layer to increase the saturation. Now, this is the part where newbies inevitably ruin the photo. The goal here is a slight increase in saturation, just enough to give a nice color boost without making your photo look like something from a Disney cartoon.

I usually up the saturation slider to seven and then reduce the opacity of the layer to anywhere between twenty and fifty percent. Being conservative here will pay off and prevent other photographers from scoffing at your over saturated images.

Here’s a look at the result of my final adjustments using these techniques:

screenshot

Final Image

With that, we’re all finished. In five super easy steps we were able to take an average looking photo with minor white balance and exposure problems and turn it into a professional portrait!

Here’s a look at the final image next to what we started with. This small image doesn’t do it justice so be sure to click the photo for a larger preview.

screenshot

Conclusion

Given enough time, there are several other steps that I would take to complete this image. I might brighten up the the area around the eyes a bit, smooth out the skin; the possibilities are endless. However, when I’m under a tight time constraint, these are the five absolutely essential steps in my workflow.

Leave a comment below and let us know about any tips you have for creating stunning portraits. Is your workflow similar to the one above or do you take a drastically different approach. We want to hear all about it!

Tags: Software

November 07 2011

13:00

Free Stuff: Strata Design 3D Cxi for the Mac – Comment to Win

My friends over at Strata have just added their powerful Design 3D Cxi software to the Mac App store, and I have 1 coupon code for a free copy to give away this week.

Available only through the Mac App Store, Strata Design 3D CXi is a professional-level 3D modeling and animation software that delivers end-to-end power for the entire 3D design workflow. Quickly bring your creative ideas to life with a simplified learning curve and award-winning rendering quality rivaling any software.

Be sure to read the rules, and good luck!

Contest Rules:

  • All you have to do is to tweet the post, to share it on Facebook or to leave a comment on the post.
  • Only comment once.
  • 1 winner will be randomly chosen
  • Comments will remain open for about a week

September 28 2011

16:35

10 Reasons to Fall In Love & Get Things Done – Bundle

From the legendary Fusion Ads & Carbon Ads comes a sweet giveaway that’s sure to wet anyones app palette. 10 Reasons to fall in love and get things done is the perfect bundle for designers, creatives, photographers, get-things-doner’s… (I think you see my point…) The best part? It’s been extended three days so procrastinators can unite! Tomorrow…The site is beautifully designed with a typeface by Gerram Lamson, Backgrounds via Subtle Patterns & icons by Drew Wilson.

Screen Shot 2011-09-28 at 8.36.08 AM copyFeaturing:

The Skinny

All 10 of these great apps, for one price of $29.99. Several of these apps retail for over that amount so this is a stellar bundle you don’t want to miss out on!! Theres also a change to win an iPad by tweeting about the bundle to win. Hop on over to check out the full details here.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



10 Reasons to Fall In Love & Get Things Done – Bundle

September 22 2011

00:09

Seamless Lite New Features: Custom Shapes & Shape Galleries (How-To)

COLOURlovers spend countless hours creating amazing Patten Templates using Seamless Lite. Today, we are happy to announce some amazing new feature updates to the in-site seamless pattern design process.

 

Along with the new features, Seamless Lite has been given some big love and a smoother, speedier designing experience should be noticeable.

"Save as Shape" Tool

You can now save individual elements using the newly installed “Save as Shape” tool. This will allow you to keep those wonderfully complicated design elements you have been creating for a single Pattern Template. Only NOW, you can re-use those awesome pieces in any number of Pattern Template variation by using, “My Shapes” located in your Shapes Library on Seamless Lite (when you are logged in).

 

 How To Use "Save as Shape"

In Seamless Lite, create a shape from multiple shapes using the preexisting shapes in the Shape Library. Select all layers that make up this custom shape. No need to group these either, when you save the shape as a single element it will automatically group it and give it the name you give your shape upon saving,

Select your shape layers and click, Save as Shape" in the layer tools area. 

Preview your shape element, give it a title, description if you want, tags and then Save Shape.

That simple! At this point, shapes cannot be shared with one another (unless you do that privately - it's your choice).

Shape Galleries: A Place to Show Off  Your Abilities!

A new gallery for all of your custom shapes, will be added to your profile page the moment you create and save your first shape with the "Save as Shape" tool.

 

Gallery element for your Shapes (above)

Gallery view of your shapes allows the same filter-view options as other creations on the site.

Each shape has its own information page just like the other creations on CLCOLOURlover.com. Everyone has the ability to LOVE, FAVE and SHARE this shape made by you! Additionally, you have the ability to download the .SVG file, located under the, made "with Seamless Lite" link and DELETE or EDIT the shape profile under the OPTIONS drop-down.

Shapes will also stream on to the homepage of COLOURlovers.com as they are being created. So let's see what you got?!

September 19 2011

16:48

Free Stuff: Win a MacLegion Fall Bundle – Comment to win

Alright! It’s Monday, and I’ve got some awesome free stuff! This time, I’ve got 2 MacLegion Fall 2011 Software Bundles to give away. This bundle includes 10 apps worth $630. The apps included are listed below. Make sure to read the rules, and good luck!


Included Apps:

Contest Rules:

  • All you have to do to enter is leave a comment (tweeting and liking is appreciated)
  • Only comment once.
  • 2 winners will be randomly chosen from the comments.
  • Comments will remain open until Thursday.
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl