An advanced Photoshop tutorial if you want to be a pro

Sometimes I see these amazing computer generated images and, even though I am pretty proficient in Photoshop, I wonder how did they manage to do that. Seeing this tutorial opens up opportunities and really gets down to nuts and bolts of the more advanced techniques. Like for instance, I had no idea you could take a remote apart and then change each part to look how you need it to look. To me a remote was a remote, a single element in the design, and they went and made sub-elements from it. That is great!

So above is what the finished product looks like, and here is a quick run through how it go there. This all started with 4 components, a remote control, a bullet and a couple of circuit boards.

The remote underwent surgery and was chopped up into it’s parts and some additional parts were created using the circuit boards. The buttons were extracted form the remote and some were created fron thin air.

As I said before, each individual part was ripped, warped and bent. Did I mention that Photoshop is amazing? Yeah, it is. Now each part is ready for assembly.

Put it all together and slap some background behind it and here you go, an awesome shot, a slow motion freeze frame.

To see the entire tutorial, and if you’ve read to here you have to see it, go here:

Photoshop Tutorial: Create A Slow Motion Bullet Shot Effect

Adding depth with small adjustments in Photoshop

It’s easy to take a few elements together into an image and arrange it to look nice. Then to make it have depth and give it the eye candy effect so the image doesn’t just look good but also feels good, takes a bit more. It’s not something you need to really have a talent to do but more of  a knowledge of what it is that adds the “flavor” to the image and the technique for applying it. The techniques I talk about in this article can be applied to almost any design and it will add the awesomeness to the design that you will love, so grab a pencil and make notes.

In this business card design I created for my bookkeeping software business I did exactly that. I found a nice background image at iStockPhoto.com and used it as the main background. Then I added some elements like the logo, some text and a color background block in the bottom section. It looks ok as it is at first but the design is dry, the text doesn’t pop, I just don’t feel it.

As a rule of thumb, the first thing I do to my designs is add depth, and this is done very simply with a gradient effect. Instead of using just one color to fill an area, I use a gradient of two colors, one just a shade lighter than the original and the second a shade darker. Just doing this will give the element almost a 3-D look or I like to call it depth.

I did this to the logo text first by double clicking the logo text layer and selecting the Gradient Overlay on the left and then clicked on the Gradient selector. There I chose the two colors for the gradient and clicked OK. As my logo consists of two colors, I did the same to the second section.

This small adjustment gave the logo the look I was looking for. A little darker green at the bottom of “cake” and a little gray at the in “io” makes the logo pop and stand out nicely.

Now I want to adjust the background mesh image as it is a bit too bright and too static. I want it to look like it’s more than just a mesh wall, want to give it some depth. To do this I will just use a black soft brush and will add some black around the edges.

I am using a black color Brush tool at size 500 and 100% opacity and flow. On a new layer just above the mesh image layer I trace the edges but I have to do this out side the image with only about 20% of the brush inside the image area as the 500px brush is very large and I only want the faded out edges of the brush to be inside. This will create a gradient look that goes from black at the edges to transparent in the middle.

To let off on the black a bit I adjusted the layer transparency to 75%. This gives the background a nice depth effect that I wanted, I can still see the mesh on the edges but it’s nicely darkened giving it almost a 3-D spherical look.

To finish this design off I will add a little bit of a gradient effect to the gray background in the bottom section by double-clicking the background layer and choosing the two gradient colors as I did in the first couple of steps for the logo.

This little enhancement completes the design, it takes the business card from a boring looking collage to a one sweet looking business card. I ordered the cards to be with rounded corners which will add to the design even more.

Once I receive my business cards I will post a scan of them so you can see the final product.

The bookkeeping software that I created called CakeIO is designed for small business owners and freelancers to save time on the dreaded task of bookkeeping. As a small business owner my self, I’ve struggled with this my self and have tried different solutions that are on the market but most of them are way to complicated for what I need it to do and so I’ve settled with the good ol’ Excel spreadsheet for years. At the end of 2010 I finally decided that I need to build something simple that small business owners can just dive right in and get things done quickly. That is how CakeIO was born. Check it out for free for 30 days, you might like it. Click here to find out more.  ;)

Top 3 Of My Favorite Web Design Creativity Inspiration Blogs

Being a creative professional, the creativity bucket only goes so far before it needs to be refilled. Some like going out for a walk, some read a book, I like to visit the 3 of my favorite blogs. Why only three? Because, honestly, I just don’t have time for any more and these 3 consistently deliver the creativity ideas by the truck load. You may already have heard of them and you night have not, either way you should take another look and make sure you add them into your favorites and visit them often to reload.

Continue reading “Top 3 Of My Favorite Web Design Creativity Inspiration Blogs”

I Heart Post-Its, Why Post-Its Is An Effective Designer Tool

by Giancarlo Gallegos

gian4

Now, that I got your attention. I want to tell you a secret.

I love Post-Its. Period. I think they are one of the best inventions in the world. If there is anything I cannot live without, it would probably post-its. Okay. Maybe that might be an exaggeration. But, who has not benefitted from that yellow 76mm squared colored adhesive piece of stationery? I could never think of a more effective tool in reminding me of the things I need to do, of creating a stick man flip book, of communicating with others during meetings, of flagging emails print outs, bookmarking the last read chapter of my favorite novel, etc.

Lets Travel Back

If you are one of those unfortunate ones who is not familiar with Post-Its, here is a brief description of what they are. A Post-It note is a piece of stationery with re-adherable strip of adhesive on the back. It was designed to temporarily attach notes to documents and other surfaces such as walls, desks, computer screens, and so on. The most common color you would see is the yellow 76 cm square note (see image below). The unique thing about Post-Its note is that it uses low tack adhesive the can enables the note to be easily attached and removed on any surface without leaving marks or residues.

It was co-invented by Art Fry and Spencer Silver of the Minnesota Mining and Manufacturing Comapany or 3M, in March 9, 1970. Leveraging its yellow note success, 3M decided to manufacture other product related to the Post-It brand such mini post-its, highlighter pens with post-it tabs, etc. Computerized versions came out soon after.

Continue reading “I Heart Post-Its, Why Post-Its Is An Effective Designer Tool”

Eye Catching Flash Website

badtaste

When thinking about a completely Flash based website, one (me) thinks, “that’s so early 2000’s”, integrating traditional HTML/CSS with Flash works a lot better and turns out cleaner and takes up less resources. Then, once in a blue moon, you find a site that is done so well that you can’t say much to criticize. Here’s an excellent example of what a real professionally done fully flash website could be. Love it.

Source: aToastToBadTaste.com

Design Spectrums as a Balancing Act

iStock_000002067017XSmall

Building a design spectrum is a method of visualizing the overall aesthetic and functional elements in a web design. It is important to use a gauge when measuring these properties to maximize the web site and ensure a balance is achieved between form and purpose. In web design, there are usually three spectrums that you can employ to measure if you are creating the right end result based on your objective. Spectrum one is to design the website to influence its users to generate a certain impulse, emotion or finish an objective. Spectrum two is used when your web design is focused on maximizing assistive tools to help the user complete the task generated by the design. The third spectrum is utilized when a product has functional and an aesthetic agenda, which require the web design to be attractive yet of good use.

A purely aesthetic approach would put your plans in spectrum one, where the design’s significant objective is to create sensory fulfillment, visual properties as well as color and stimulation are most important. Generating tools and creating portals or registration pages belong to spectrum two, where physical and behavioral stimulus is reinforced. In this spectrum, aesthetics are not important. Ergonomics and proportion is important in spectrum three; thus designs for projects like crafts, construction as well as objectives that mix visual and kinesthetic elements are best put in this category.

Usability against Aesthetic Value

This has always been a concurrent discussion in the design community, often referred to as “design versus usability” or a running argument that the elements of purpose completion is directly opposite to overall visual stimulus. One must need to consider that the overall design is influential; therefore an eye in aesthetic requirement is also important. It is practical to use one spectrum as compared to multiple design spectrums, it has often failed to deliver when a web design becomes a jack of all trades; trying to excel in both aspects.

A fundamental key to this is maintaining a balance between pleasing additions to a design and completing its functions. There are superior aesthetic sites that are functional and useful due to the developer’s diligent efforts to balance all elements in the layout, although this is not a concrete definition that all websites need to be on the aesthetic side.

When does your site need to be beautiful?

With websites whose primary objective is to promote product functionality helping the user achieve the completion of his task and fulfill the end goal of a specific objective is more important that creating an aesthetic feel to the project. In some cases, products that have a serious functional objective may be perceived as negative if drowned in high-end aesthetics and coloration. One must take into consideration that the more graphics embedded in a page, the slower it loads. This is often a disadvantage especially if high speed access to a specific site is detrimental.

The important thing to remember is to figure out the site’s ultimate objective. This will increase the chances for success and objectify the purpose of the product which will save you a huge amount of time avoiding redesigns. Placing specific markers at the start, middle and final review of the design to see if you are following your design spectrum will make sure that the objectives are met and you have a perfect balance between use and form.

Incredible Magazine-Style Designs

voyager

For those times when you need some inspiration for a magazine-style website layout, this nice list of 25 incredible examples form Vandelay Design should do the trick. I especially like the 1st one – bmi Voyager, it is really cool looking. Check them out, let me know which one you like the best.

Source: 25 Magazine-Style Layouts for Your Design Inspiration

Unique, Simple & Clean Blog Design

roquealonso

The cleanliness, the amazing use of “white” (shades of gray) space is what caught my eye on this blog design. The bold reds bringing important elements out. This blog design allows the visitor to be able to navigate with ease thanks to it’s simple navigation and pretty standard layout structure.  I think this blog’s ease of use approach is the best that I’ve seen in a while.

Source: RoqueAlonso.org

Stunning Fantasy Style Website Design

coolbrush

Wow! This amazing piece of work belongs on a canvas hanging on a wall somewhere with a $3,000 frame around it. The beautiful castle, with the under water workings, the vibrant colors, the detail. It’s just not often you find a design that just grabs your attention, stuns and amazes you that the only thing you can say is Wow! These guys have talent.

Source: CoolBrushDesign.com

Web Design and Global Considerations

The information superhighway spans across the globe, people who access your website come from all corners of the word and from various cultural influences.  It is important to consider this when designing your web pages to ensure that the appeal of your objective speaks to the worldwide population and not one specific demographic.

Consider the following; you have no knowledge of how a user was able to access your page or their previous experiences in dealing with your company its products services and affiliations. There is no assurance of the path that the user took to arrive at the page, which links he used to arrive at the website or which search tool he utilized to research your information. These factors are helpful to consider when generating a design that is culturally neutral and is pleasing to all.

There is a chance that the user will connect at lower than ideal speeds. Sometimes users will even have a connection of .5kb for mobile phone access. It’s not just the nominal connection speed that is a modifier in the users transfer rate. A typical consumer on a standard modem will get a 3kb transfer rate but will even get slower as lines become busy. Minimizing the overall schematic of the web design and its size will greatly improve the access experience and speeds up loading time for pages.

Using ideas such as CSS will lower the render time. Building your pages in sequential chunks and avoiding pages wrapped in large tables will also help with loading time. It’s ideal to save imagery for content whenever possible and remember that important content should be CSS based and not image based. These factors which tell users where they are, what the functions are and where the site can direct them need to load first to maximize the user experience.

Computers will always have different fonts that they use. PC’s will have a different font list than a Mac. Some of the fonts that you think are universal might not be available for a lot of people. To be on the safe side, it is a wise option to design your website with a globally utilized font such as Verdana for windows based computers. Sans Serif or Helvetica, Arial are some other options that you can use to set the general body font of your design content. For aspects of your design that do not require mass readability such as headers you can use fixed-pitch fonts like Courier for snippet code.

Take into consideration that some computers will have less capacity in displaying full spectrum color. Some PC’s are so ancient out there that they can only display 256 colors. Remember that the color scheme can be different on a Mac compared to your regular PC. It is a wise practice to use white for background and choose universally present colors found in all color schemes. Use web safe colors for large portions of your content and accept the fact that the coloration will always be compromised for a small percentage of your users; this is a limitation of their machine.

If you plan to use the latest coding then provide links for browsers that can easily be downloaded to maximize the viewing capacity of your users. Some websites post recommendations of which browser will be compatible for the web content. There are numerous freeware browsers that identify and are updated to read and maximize the usage of current programming, it is advisable to provide a download link or mention the platform so that your users can take full advantage of your design.