Nifty Photoshop Workflow Tips!

Posted in Tutorials & How-To on July 27th, 2009
Tags: , , , , ,

Photoshop has a lot of little tricks and shortcuts that aren’t always apparent.
Some of you may already know these things, some of you may not, and latter is who I’m trying to educate :)
Listen up! You might learn something!

- Experiment with how Ctrl and Alt/Opt affect every tool. For instance, while the brush tool is selected, hold Alt/Opt to temporarily change to the eyedropper tool. [A few other significant uses of this are explained through this list.]

- The Caps Lock key toggles between Standard Cursor and Precision Cursor. If your cursor suddenly looks different than usual and you don’t know why, you must have accidentally hit the caps lock key.

- The F key toggles between modes of full screen. This is indispensable for getting the most screen real-estate you can get to view and work on your image, as well as minimize other distractions. Full screen modes also allow you to drag the canvas far off the screen. This is useful for placing areas you need to work on near the canvas edges at the CENTER of the screen, while not having to worry about accidentally clicking outside the window.

- You can right click the background matting around your canvas in full screen mode to select different matting colors! From alexds1 While in fullscreen mode, shift+click the background with the bucket fill to automatically change it to the current foreground swatch color!

- The Tab key toggles all on-screen elements on and off. If you want all the screen space you can get, especially in full screen, learn to use the Tab key like second nature. This is universal to almost all Adobe apps.

- With any brush or drawing tool selected, the number keys on your keyboard select opacity instantly. 1 for 10%, 5 for 50%, 0 for 100%, etc.

- Don’t forget that you can use the [ and ] bracket keys to change the brush size of any drawing tool on-the-fly! The , and . keys switch between brush presets quickly! From alexds1 Shift+[ and Shift+] can change Hardness on-the-fly!

- The eyedropper tool can reference any color currently on screen — NOT just on your canvas. To do so, click within your canvas to begin eyedropping, then drag the cursor outside of the Photoshop window to the color you want to reference. The eyedropper will still record the color despite not being within Photoshop. This is useful, for instance, eyedropping a websites background color so you can make an image that will match. Or, this is good for quick eyedropping color samples from Colourlovers without importing the swatches into your image.

- Holding Alt/Opt while eyedropping will select colors for the Background Color swatch in the tools palette. Likewise, in the Color palette don’t forget you can click on the foreground or background swatch to keep one selected for eyedropping priority!

- The / key toggles Lock Transparency on the current layer! [Recommended by ELStalky.]

- Ctrl+Z [Win] / Cmd+Z [Mac] is different than Ctrl+Alt+Z [Win] / Cmd+Opt+Z [Mac]. Ctrl+Z is undo while Ctrl+Alt+Z is “History State Backwards.” Undo toggles between the last significant change, and History State Backwards backtracks through the history palette going back through as many history states as you’ve preset in Preferences. [Recommended to be added to the list by acid-creature] You can use these in tandem by using History State Backwards to backtrack to the point before a major edit was made, then use Undo to toggle the Before/After to see if the changes were worthwhile.

- Do you have multiple files open and you need to go back and forth between them, especially in full screen mode? Don’t use the “Window” menu to select the other open document, use Ctrl+Tab to switch instantly!

- We all know, for instance, that the B key is for Brush Tool, M for rectangular marquee, G for bucket fill… But did you know you can hit Shift+[key] to toggle between the sub-set tools? Shift+G will toggle between the Bucket Fill tool and Gradient tool, for example.

- When working on a new document that hasn’t been saved yet, remember that hitting “Save” is different than “Save As…”, despite both options opening the Save As window. “Save” will have the “As a Copy” checkbox already unchecked, so the file you save will become the one you’re working on. Hitting “Save As…” will assume that you want to save this file as a copy, and have the option checked. The file will save to the chosen destination, but the open file you’re working on will remain “Untitled” unsaved. When you hit “Save” again thinking it will save normally, a “Save As” window will appear again, which could just be irksome. However, remember it is good practice to use Save As at least every couple hours or so [depending on the project] to create a duplicate file of your work. If something terrible happens to your most recent file, you’ll be thankful you at least have a version from an hour or so earlier.

- There are three different ways to activate Free Transform on an object, and they have different effects. Hitting Ctrl+T [win]/Cmd+T [mac], or accessing “Free Transform” from the Edit menu, will initiate Free Transform and you can freely scale and rotate your selected object. However, accessing Free Transform from the Right Click menu on the object will create a copy of the object, and then free transform the copy — leaving the original intact.

- While in a free transform, the object doesn’t lose its orientation until you accept the changes. For instance, if you tilt an object back in perspective, you can switch back to Scale transforming and extend it, and it will actually remain IN the perspective you’ve placed it in! [That is, it will extend to a vanishing point in the distance.] Once you accept those changes, Photoshops understanding of its perspective will be lost and it will be very difficult to transform again. When making large edits or transforms, make a duplicate of the object before doing so — just in case you need to go back to the source object later on.

- When using the Polygonal Lasso tool, don’t fret if you’re making a large meandering selection through an object and you click in a very wrong spot ruining the path. Hitting the Backspace key will delete the last clicked point, allowing you to continue on without having to start the selection over!

- With the Move tool, you can hold the Alt/Option key and drag any object to instantly duplicate it and move the duplicate to a new position. If you have a mask around the object, the duplicate will be created WITHIN its current layer. If there is no mask on the layer, the entire layer will be duplicated and move separately from the original below it. Likewise, you can hold Alt/Opt and hit the arrow keys to incrementally create a duplicate on each press. This is useful for creating pseudo-3D text.

- Have to move many objects together with the Move tool, or select many layers to create a group, but don’t want to pick out each from the Layers palette? Hold the Ctrl key [win] / Cmd key [mac] and drag out a selection in your canvas to surround just the layer objects you want to move or edit. Likewise, hold Ctrl [for win+mac] and click a stack of objects on your canvas, and a menu of each layer currently active under the cursor will appear allowing you to accurately select which layer you want to edit. This is why naming your layers is important!

- With the move tool, Ctrl/Cmd click an object to automatically move to its layer, provided it’s the top-most visible layer. If the layer is inside of a group, change “Group” in the drop-down layer in the options bar to “Layer” in order to avoid selecting the entire group.

- To do a Barrel Roll, press R or Z twice! [From ELStalky "Set both R and Z keys to "rotate image 180°" in the Keyboard Shortcuts preferences, then you can really do a Barrel Roll!"]

- Did you know that the Crop Tool can be dragged to OUTSIDE of your canvas borders? When accepted, this allows you to visually increase your canvas size in the direction(s) you want without even accessing a menu. This is useful for making quick matte borders on images.

- Surprisingly, a lot of people have not played around with the Crop tools option bar features! The Height & Width options allow the crop tool to crop AND scale an image in one swoop. This is great for creating thumbnails for artworks. If you set it to 80×80 pixels for example, you can crop an area you want of a large image, and the resulting crop will be 80×80 pixels, ready for saving. The “Perspective” check box is great for cropping elements from a photo such as Signage or a surface texture. When you match the perspective of the crop box to the object in the scene, the resulting crop will automatically tilt the object to appear flat, and cropped, ready for use.

- Don’t forget that Photoshop will listen to the Esc key no matter what’s going on! If Photoshop is processing something — ANYTHING — and you want it to stop, hit Esc!

Hope some of these helped one or two of you out there! :3

Check out the comments left at DeviantART for some additional ideas from readers!

Adding CSS Image Rollovers to Wordpress PHP Page Nav Links

Posted in Tutorials & How-To on July 14th, 2009
Tags: , , , , , , , , ,

Some people are curious how to do this, because the PHP links for Wordpress can be a little confusing. Well, I’m here to provide a simple solution to your problem. It’s quick and painless, so listen up!

Step 1. First thing’s first. You have to make the images for your rollovers, [provided that you don't know how this works, I'll take a moment to explain. If you have your rollover images ready, then just continue on to step 2.

In CSS mouse hover rollovers, both the "on" and "off" images are contained within the same single image, usually directly above or aside each other. Observe the following button from my own Wordpress theme: [note: i've changed the colors of this image to make it easier to see against the background.]

olderpostsblue

You can see how both versions of the button are directly above each other. [The button is 360 pixels wide, 50 pixels tall. So I made the image 100 pixels tall to accomodate the second button.] When this image is applied as a background to a div, the “off” version will be showing. We can give it some simple code to instantly shift the background exactly 50 pixels vertically to show the “on” image when we hover our mouse cursor over it. The overall benefit of this is that it’s lighter weight in resources, and the rollover “on” image is instantly preloaded with the “off” image.

When you create your own button images, remember to make sure everything is in the same spots and shifted the exact amount as the other image! If not, you’ll notice the misalignments when you mouse over the final button.

Step 2. You need to add some CSS to your stylesheet. The following is the CSS I used to make my buttons:

.buttonprev a{
background:url(http://www.plasticshards.com/interfaceparts/images/olderposts.png) repeat 0px 0px;
width: 360px;
height: 50px;
display: block;
}

.buttonprev a span {
display: none;
}

.buttonprev a:hover {
background: url(http://www.plasticshards.com/interfaceparts/images/olderposts.png) repeat 0px -50px;
}

.buttonnext a{
background:url(http://www.plasticshards.com/interfaceparts/images/newerposts.png) repeat 0px 0px;
width: 360px;
height: 50px;
display: block;
}

.buttonnext a span {
display: none;
}

.buttonnext a:hover {
background: url(http://www.plasticshards.com/interfaceparts/images/newerposts.png) repeat 0px -50px;
}

Copy and paste this CSS into your own stylesheet, but change the links to reflect your own button image sets, and adjust the “repeat 0px -50px” for the “a:hover” classes to tell which direction your rollover will shift once hovered over with the mouse. The first number in “repeat” affects horizontal shifting. The second number affects vertical shifting. Since my button images are placed vertically in relation to each other, I used the second number set to -50px to move the image UPWARD 50 pixels once hovered over. [For instance, if my buttons were placed side by side, I'd wanto to set the first number to "350px".]


Step 3.
Now that you have the CSS, its time to make the link. Depending on where your theme needs the links, such as in your Main Index Template (index.php), add the following code:

<div class="buttonprev"><?php previous_posts_link('<span> </span>'); ?></div>

<div class="buttonnext"><?php next_posts_link('<span> </span>'); ?></div>

After you add that to the spots you want, load up your page and give it a try! Your rollovers should be working now just like the ones on my blog’s front page.

Enjoy and hope you found this helpful :)

The sites all different lookin’! Plastic Shards official V1 now live.

Posted in Updates on July 14th, 2009

Things have been slow around here on the website because I’ve been hard at work on the first official version of Plastic Shards.

The new design of the blog here is what the new design will mostly look like, with the new identity, look and feel.

Expect the design here to shift around, break, or mess up every now and then as I try to hammer out specifics on it.

New Plastic Shards Art Gallery Posted

Posted in Updates on May 9th, 2009
Tags: ,

new_gallery

I’ve finally updated my gallery so that it no longer requires manual updating. The new look is based after a gallery theme available for WordPress, called “Gallery.” See the original theme here by Chris Wallace: [click]

I had to do a hell of a lot of editing to get it to match my site, but the end result is hard to believe it’s actually WordPress! I decided to keep my gallery dark like the original Gallery theme. I liked how the images fight less against the dark theme versus the harshness of my old white backgrounds.

I’ll finally be able to update more often. Hope you like the new look!