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.
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.
Believe it or not, Photoshop has a specific button for
multiple undo, and it isAlt + 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?
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.
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 Altkey 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?
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.
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.
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.
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.
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 theAlt 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.
Let this trick makes your designer’s life easier. Activate
the Move tool using Vkey 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.
Ouch, it’s just too small so I decided to change it back.
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.
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 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.
No comments:
Post a Comment