App Icons on iPad and iPhone

Take a look

Advertisements

Hidden Photoshop Hotkeys

Source- http://www.picturecorrect.com/

Vedio Editing by Reaper- http://www.reaper.fm/videos.php

  1. Enter Precise Painting Mode while in Brush Mode — CAPS LOCK
  2. Insert Clipping Mask — CTRL/CMD + ALT/OPT + G
  3. Fill Layer while Preserving Transparency — SHIFT + ALT/OPT + BACKSPACE/DELETE
  4. Switch Panels in Camera Raw — CTRL/CMD + ALT/OPT + 1-9
  5. Create Filled Layer Mask — ALT/OPT + New Layer
  6. Copy Multiple Layers — CTRL/CMD + SHIFT + C (To paste, CTRL/CMD + V)
  7. Load Channel as Selection — CTRL/CMD + SHIFT + ALT/OPT + Layer #
  8. Show and Hide Layers — CTRL/CMD + “,”
  9. Cycle through Brushes while in Brush Mode — Next Brush “>”; Previous Brush “<“
  10. Make Adjustment with Previously Used Settings — CTRL/CMD + ALT/OPT + L

open previous levels settings Continue reading

A Collection of Free Flat UI Icons

A Collection of Free Flat UI Icons & Web Design Elements

flat icons, flat ui, flat user elements, minimal design
With the rise in popularity of flat UI,  there has been an ensuing battle between minimal design andskeuomorphism. It appears that for some, an apparent melding of the two design styles is happening. For those who love texture and depth, these characteristics have surfaced in some of the new design resources out there on the web. Whether you prefer a completely flat ui, or elements with a bit of skeumorphism mixed in, this hand picked list of free web design resources is likely to strike your fancy.

468x60
skeuomorphism, flat UI, free icons, web design
flat ui design, flat ui, skeuomorphism, free icons, coffee icons
Free PSD:  Flat Social Icons by Pixeden
flat ui, skeuomorphism, free icons, minimal design
free icons, flat design, free flat icons vector
flat design, free icons, clock icon, notes icon, mobile icons
free icon set, flat ui, icon design, mobile icons, rocket icon
free camera icon, notes icons, clock icon, speech bubble icon, flat ui, flat design
apple ios psd, free psd, monitor psd free, laptop psd free
monitor psd, laptop psd, tablet psd, ios psd, free design
wireframes for responsive design
flat ui, flat design, flat style, free design resources

28 Technically Advanced Photoshop Tutorials

These tutorials offer an opportunity to harness your Photoshop skills, take your skills to the next level or simply learn something new.
They are all relatively new tuts, and all come from the best and most professional of Graphic Designers. They make it look so easy!!!

Just a personal note to add, this article probably defines the difference between Adobe Fireworks and Photoshop. Photoshop is clearly all about the small details taking us to the overall masterpiece, and Fireworks is for the bolder and brasher graphic that can be compiled in no more than 10 minutes. I am not a Professional Graphic Designer, so I will stick with Fireworks. I can only aspire to design up to the level of these tutorials and Graphic designers. Thanks to them.
(This is a comment regarding my previous article 75 Powerful Adobe Fireworks Extensions – It really can be as Great as Photoshop!.

Trendy Circle Brush in Photoshop

Advanced Photoshop Tutorials and TecniquesLink: Trendy Circle Brush in Photoshop.
TUT Quote: “There’s a design trend that’s blown up over the past year and it’s based around one simple shape—the circle. Not just one circle, though, lots of them. In fact, it’s circles within circles…

Seamless compositing in Photoshop

Advanced Photoshop Tutorials and TecniquesLink: Seamless compositing in Photoshop.
TUT Quote: “Learn how to fake unbelievable fantasy images, like this giant warrior lizard, using some clever Photoshop trickery”.

Creating fireballs and explosions

Advanced Photoshop Tutorials and TecniquesLink: Creating fireballs and explosions.
TUT Quote: “Fabio Sasso uses custom brushes and layers to create an explosive scene in Photoshop”.

Making pictures with the ‘wow’ factor

Advanced Photoshop Tutorials and TecniquesLink: Making pictures with the ‘wow’ factor.
TUT Quote: “Do your colours fail to dazzle? Do your lines lack oomph? Sebastian Onufszak shows some nifty Photoshop and Illustrator tools for getting great results every time”.

Vintage Clouds Photoshop Tutorial

Advanced Photoshop Tutorials and TecniquesLink: Vintage Clouds Photoshop Tutorial.
TUT Quote: “Learn how to make ordinary blue skies look dramatic with a simple and easy color and contrast adjustment.

Make your own pop art

Advanced Photoshop Tutorials and TecniquesLink: Make your own pop art.
TUT Quote: “The pop art movement of the 1950s celebrated the birth of consumer culture, taking mundane things like the humble soup can out of the supermarket and into art galleries – often for the very first time.

B-movie poster art

Advanced Photoshop Tutorials and TecniquesLink: B-movie poster art.
TUT Quote: “Prepare to shock! Terrify! Amaze! Photoshop and Illustrator guru Mark Mayers demonstrates how to recreate the shlock B-movie posters of cinema’s golden age.

Animating characters

Advanced Photoshop Tutorials and TecniquesLink: Animating characters.
TUT Quote: “Alexis West shows how to bring your vector characters to life in Flash, turning an Illustrator image into a cool interactive animation.

Animate the Splash Using Photoshop and After Effects

Advanced Photoshop Tutorials and TecniquesLink: Animate the Splash Using Photoshop and After Effects.
TUT Quote: “In this Olympic-inspired tutorial, Corey teaches an effect where he extracts areas of an image in Photoshop and then animates them using After effects in order to create a 3D movement effect with the image.

Discover the art of grunge

Advanced Photoshop Tutorials and TecniquesLink: Discover the art of grunge.
TUT Quote: “In this world of gradients, logo reflections, horizontal stripes and rounded edges, the web has become bloated with sites obsessed with looking Web 2.0, when in fact the term is meaningless when applied to pure aesthetics.

3D effects in Photoshop

Advanced Photoshop Tutorials and TecniquesLink: 3D effects in Photoshop.
TUT Quote: “By combining the versatility of Photoshop with a range of rich, home-made 3D textures, it’s possible to produce some truly original 3D effects. The secret is in the textures…

Anaglyph images

Advanced Photoshop Tutorials and TecniquesLink: Anaglyph images.
TUT Quote: “Creating custom anaglyph images may sound tricky, but it’s not. With the help of Photoshop and some specialist 3D software, you can easily create convincing 3D images.

Age your images

Advanced Photoshop Tutorials and TecniquesLink: Age your images.
TUT Quote: “Photoshop expert and retro-kitsch enthusiast Don Sparrow reveals the tricks and special techniques he uses to digitally age his images in this step-by-step guide to giving your work that familiar styling of the forties and fifties.

Add Another Dimension

Advanced Photoshop Tutorials and TecniquesLink: Add Another Dimension.
TUT Quote: “It’s relatively easy to spice up your photos in Photoshop. But how about taking it one step further? The key to success is to fix your colours and enhance them.

Vivid colour effects

Advanced Photoshop Tutorials and TecniquesLink: Vivid colour effects.
TUT Quote: “Photoshop wizard Jort Braam combines abstract images with black and white photography, using gradients, blurs and Blending Modes to create a stunning composited image that’s bursting with colour and movement.

How to Create a Super Shiny Pencil Icon

Advanced Photoshop Tutorials and TecniquesLink: How to Create a Super Shiny Pencil Icon.
TUT Quote: “The Pencil is one of the visual metaphors most used to express creativity. In this tutorial, I will show you how to draw a pencil icon. We will have a look at gradients, selection tools, and basic transform operations. Lets have some fun with this.

Create A Natural Composition with Light Through a Fence

Advanced Photoshop Tutorials and TecniquesLink: Create A Natural Composition with Light Through a Fence.
TUT Quote: “Replicating the beauty of nature has always captured the interest of many. In this tutorial, you’ll learn how to create a sunlit sky, an old rusty fence with a few winding vines with spring flowers, and the dramatic light thats shining through.

Create a Wicked-Worn Vintage Pop Art Design

Advanced Photoshop Tutorials and TecniquesLink: Create a Wicked-Worn Vintage Pop Art Design.
TUT Quote: “Pop art is alive! As I am a big fan of grunge style, I will show you how to design a simple but nice vintage pop art piece with some wear and tear. This is a basic to intermediate tutorial, so you do not need to be a guru to work with this effect and get an awesome result!

Vintage collages in Photoshop

Advanced Photoshop Tutorials and TecniquesLink: Vintage collages in Photoshop.
TUT Quote: “Layer found images and handmade elements with Photoshop and Illustrator techniques for a witty, retro style that’s got dozens of uses.

Rendering a Striking Matchbox in Photoshop

Advanced Photoshop Tutorials and TecniquesLink: Rendering a Striking Matchbox in Photoshop.
TUT Quote: “This tutorial consists of creating a digital illustration in Photoshop of a box of matches. We will be creating the matchbox cover design, the striker on the matchbox from a pattern, and placing the cardboard texture on the box. We will also create the matches and align everything into a 3D perspective.

Create a Stunning Stone Cursed Man

Advanced Photoshop Tutorials and TecniquesLink: Create a Stunning Stone Cursed Man.
TUT Quote: “In this tutorial you will learn how to create a stone cursed man.

Create A Stylish Surfing Fashion Label Tag

Advanced Photoshop Tutorials and TecniquesLink: Create A Stylish Surfing Fashion Label Tag.
TUT Quote: “As I live in a country where surfing is quite popular, I can confidently assure you that surfing fashion is different from other fashion brands…

Planetary Rings Photoshop Tutorial

Advanced Photoshop Tutorials and TecniquesLink: Planetary Rings Photoshop Tutorial.
TUT Quote: “Solid rings around logos and web-based graphics are a staple diet for the graphic designer – simple to create, and with proven results…

High Clarity Photoshop Tutorial

Advanced Photoshop Tutorials and TecniquesLink: High Clarity Photoshop Tutorial.
TUT Quote: “Learn how to make ordinary blue skies look dramatic with a simple and easy color and contrast adjustment.

Floating Clothes Photoshop Tutorial

Advanced Photoshop Tutorials and TecniquesLink: Floating Clothes Photoshop Tutorial .
TUT Quote: “A fun way to learn the Clone Stamp tool (as well as adding a virtual drop shadow) is to create an invisible man or woman. We can transform an ordinary portrait or action shot to make the person disappear, leaving floating clothes around a space.

Flickr Box Photoshop Tutorial

Advanced Photoshop Tutorials and TecniquesLink: Flickr Box Photoshop Tutorial.
TUT Quote: “Learn how to use the tools in Photoshop to draw a Flickr thumbnail box.

Airbrushing On Photos

Advanced Photoshop Tutorials and TecniquesLink: Airbrushing On Photos.
TUT Quote: “This tutorial details a technique to turn a perfectly normal photograph into a piece of art that looks as if it has been painted from scratch by a very skilled artist.

Create a Graph with 3D Effects

Advanced Photoshop Tutorials and TecniquesLink: Create a Graph with 3D Effects.
TUT Quote: This tutorial is a video presentation“In this tutorial, Corey demonstrates how easy it is to create 3D graphs using Illustrator.

10 Killer Adobe Photoshop Tips For Designers

10 Killer Adobe Photoshop Tips For Designers

By . Filed in photoshop

Believe it or not, if you’re using Photoshop to design website, you’re on the right path to become a successful web designer. This is simply because Photoshop is one of the most advanced tool in the design industry that can make your creative imagination comes true with its plethora of professional tools which boost your productivity at the same time.

But how well do you know about Photoshop? Sometimes we’re wondering why certain web designer can design a website layout with extremely heavy graphics in 5 days, while we need around 10 days to complete that kind of design. It’s probably not about how fast you can click, it’s about how well you know about Photoshop, how you gonna unlock its full potential to boost your productivity.

adobe photoshop killer tips

We want you to know how to unlock its full potential. Yes, that’s why we created this post, to provide you 10 extremely useful Photoshop tips to boost your design speed. There can be shortcut, feature or setting you don’t know about, but not anymore. With this article you gonna learn them all, and you will design faster, and faster.

Note: Shortcut keys mentioned in this article are in Windows Photoshop format. If you are using Mac, be sure to know that Ctrl = Cmd (Command) and Alt = Opt (Option).

10. Undo, More Undo Please

I totally believe that we designer are very addictive to undo something, even until when we made a mistake on sketching, we tend to ‘undo’ it.

Well as you might know by pressing Ctrl + Z in Photoshop you can undo the previous action you made, but when you press the same key combination again, it will redo the previous action. This is quite unnatural and troublesome as you always need to undo multiple times to get to the state you want.

keyboard shortcut panel

Believe it or not, Photoshop has a specific button for multiple undo, and it is Alt + Ctrl + Z. Yes, by using this key combination you can undo multiple times, according to the value of History States you set in Edit > Preference > Performance.

If you’re used to common Undo’s key combination which is Ctrl + Z, you can simply press Ctrl + Shift + Alt + K to access Keyboard Shortcut panel and change Undo’s key combination under the Edit section to Ctrl + Z.

9. Sampling Color, anywhere!

Stumbled upon a nicely designed website and wondering which exact colors is it using? This happens very often when I’m seeking inspiration during the time I’m doing site layout in Photoshop. For me I will launch a color picker, pick the color and get its hex number, then click on the color palette in Photoshop, then input the hex number then get the color, pretty annoying isn’t it?

sampling color anywhere

Well you don’t really need to suffer like that, you can actually just click on Eyedropper tool or pressing I to activate it, then click on the Photoshop’s work screen and drag the Eyedropper icon to anywhere on the monitor screen to get the color you want. Yeah, it’s really that easy.

8. Flexible Guide

Tip #8 is actually combination of 2 tips, I hope you don’t mind about getting more tips. As web designer we have to deal a lot with guide to position an element correctly, in other words is pixel perfect.

How do you create a guide? Click on View, New Guide then decide it’s horizontal or vertical guide, input its position and click Enter? Alright, you can save these works by just pressing Ctrl + R to activate the Ruler tool, click on the tool and drag it down to create a horizontal guide, or vice versa.

flexible guide

Besides instant guide creation, here’s another useful tip for you. While dragging a guide with Move tool which can be activated using V key, press and hold Alt key to change the horizontal guide to vertical guide, or vice versa. Now you can probably consider yourself as professional on using guide.

7. Fun Layer Style Cloning

Layer styles are very entertaining when you can just apply them to make, let’s say, a social media icon looks pretty charming and unique, but it will be very tiring if you want to apply same layer styles to all social media icons which usually come in multiple pieces.

Have you ever realized that there’s an fx icon beside your layer? Well everything exists for a reason, if you press Alt and drag the fx icon to another layer, it will copy first layer’s styles to the one you dragged to, convenient isn’t it?

layer style cloning

Also if you are interested about the common use of that fx icon, it allows you to move a layer’s styles to another and all you need to do is simply drag the icon to another layer without pressing Alt key.

6. Element Centering Made Easy

In order to achieve a pixel perfect design, we oftenly have to position element to exactly where it should be. This seems easy as you can just create some guides and snap the element to those guides, but it will be daunting if you want to absolute center an element in certain area, which requires a lot of guides, measurement and focus.

In fact you have a way to make this entire process a lot more easier, click on the element’s layer which you want to absolute center, then press Ctrl + A to select the entire document. After that, fire the Move tool and you will see some icons beside the option, Show Transform Controls. Click on the 2nd icon to vertical center the element, then click on 5th icon to horizontal center the element, there you go, an absolute centered element.

absolute centering

You can not only absolute center the element in entire document’s area, but also absolute center it in certain area. Let’s say I want to absolute center an element in footer area, I can simply select the footer area by using the Selection tool which can be activated by pressing M key, then absolute center the element in that specific area.

footer absolute centering

You can study other alignment options beside the Show Transform Controls option, they are very useful for aligning your elements in a wide range of situations.

5. View Selection, One At A Time

Often in designing a layout you need to check how an element looks exactly by its own or by few elements, for example in website layout below, I want to check slider’s buttons to confirm that they do not have transparency so they look exactly the same with or without slider’s image.

view one selection

In past I have to turn off the visibility of slider image’s layer, slider background’s layer and even content’s background layer, but now I can just simply hold down the Alt key, then click on the ‘eye’ icon beside the button group to turn off all layers’ visibility so that I only view those buttons. After I checked them, I can just repeat the trick again to bring all layers’ visbilibity back.

This trick is also extremely useful while it comes to image slicing. You want to slice slider’s button without any other element like slider image, so you can use this trick to turn off all layer’s visibility to just slice the button, then repeat the trick to recover all layer’s visibility so it saves a lot of time wasted on turn on and off layers’ visibility.

4. Customize Font’s Tracking, Anytime

This particular tip shows you how to increase the font’s tracking in certain part of the type easily, so it might only be used on certain specific situation like logo or button creation, but it’s a professional tip that can save lots of time on finding fonts with suitable typography for your logo or button creation.

decrease font tracking

Alright, let’s say I want to decrease the tracking of the type, ’360′ so my logo’s type looks unique that visitor remembers it easier. I can select ‘POLO360′ by using Type tool which can be activated by pressing T key, then hold down the Alt and press < button to start decreasing the type’s tracking, which will bring the result above.

You can use this trick to tackle tracking issue of some artistic fonts, so there’s no worries about tracking next time you want to find graphical fonts for your logo creation!

3. Instant Layer Selection = Win

Layout design is an exhausting job as we have to tackle lots of issues such as typography, spacing and graphic, but it will be overwhelming if we want to find a specific element’s layer from hundreds of layers.

instant layer selection

Let this trick makes your designer’s life easier. Activate the Move tool using V key and hold down the Ctrl key, then click on the element and you will automatically select the element’s layer. It’s really that simple but keep in mind that if you put elements into a group, then by using the same trick you will be selecting the group’s folder that contains the element you clicked, as shown above.

2. Smart Object For Smart Designer

Just as its name, Smart Object makes your editing smarter by carrying out 2 primary functions: perform nondestructive transforms and perform filtering. This feature comes in very handy especially when you’re producing a site layout with heavy graphics like stock photos, social media icons and UI kits, and all you need to do is right click a layer, then click ‘Convert to Smart Object’ to enjoy its benefits.

The first function says that once a layer is converted into a Smart Object, you can transform it anyway you want without losing its original quality. In our case we want to make the image slider smaller so we convert image slider’s layers to Smart Object and transformed it into something smaller.

transformation

Ouch, it’s just too small so I decided to change it back.

backward transformation smart object

Looks like everything’s okay and nothing happened right? Below is the result if you applied a backward transformation without converting layer to Smart Object.

backward transformation

So you can probably see the difference here, especially slider’s buttons part. The backward transformation without Smart Object applied on layers makes the slider and slider’s buttons lose their quality. So by converting a layer to Smart Object, you can transform it to any smaller size you want but once you regretted about your decision, you can change it back without losing quality.

Another benefit by converting layer into Smart Object is once you applied filter on a Smart Object, a filter’s layer will appear under the Smart Object’s layer so you can disable filter easier by just turn off the visibility of the filter’s layer, and that’s called nondestructive filtering, great time saver for your project.

1. A Snapshot Of Beautiful Past

Now you learned how to undo multiple times, copy layer styles, faster layer selection and using Smart object these great time saving tips. Well, these are really handy skills that greatly boosts your productivity but how about after 2 hour’s work, you regretted your editing and decided to start from the middle? Redo it completely will be very exhausting and boring even you applied all killer tips you learned before, so that’s when Snapshot kicks in.

snapshot

Snapshot allows you to create a temporary copy of any state of your editing so when you have trouble on improving your design and decided to go back, you can simply click on a snapshot to bring you back to the state you desired. To take a snapshot, you just have to open History palette, and click on the 2nd icon you see on the bottom of the palette.

There are also some useful features for snapshot like you can take multiple snapshots so you have more choices and you can name them so you remember them easier. Ultimately you can also use these snapshots to compare different effects you created for your design.

However, be sure to remember that once you closed the document, snapshots will be deleted instantly so if you want to keep those states, you can click on each snapshot and save the document as another file.

Reflection

You’ve come to the end of the article, great job. By this time you should got enough time-saving killer tips to boost your design speed, but always remember that learning is the best way for you to know more about your Photoshop, thus increasing your productivity. So keep learning more, and you will become a more competitive web designer of all time.

Well we’ve shared our best, how about you? If you don’t mind, please share your Photoshop killer tips to let us know the better way to use Photoshop, thanks for your generosity!