- 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!

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.]

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 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.

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!

[[ DOWNLOAD WILDERNESS THEME ]] plasticshards mirror
[right click, hit "save target/link as" if song plays within browser.]

Just as before with the Gardens Music Theme [seen here,] I’ve recorded the Wilderness / Bunker Theme from LittleBigPlanet. One step closer to helping people complete their LBP soundtracks!

Overall, the end result is a decent three-loop rendition of the song with a pretty legitimate intro and outro, instead of just diving head-first into the full mix.

48,000KHz 320Kbps stereo MP3, recorded over optical input on a Creative E-MU 0404, Adobe SoundBooth CS4.

Other LittleBigPlanet Songs:
Gardens Theme: [click to view]

Added to the “Studio” section of the gallery is part one of a three part tutorial all about Perspective and Composition. Part one centers exclusively around understanding and drawing one, two, and three point perspective. If you’re an artist who needs some help in this subject, I’d highly suggest giving it a read. The tutorial is on-par with most college-level classes :)

Coming up in part 2, we’ll be looking at building meaningful compositions and looking into how they work through compositional theory. Stay tuned!

Click the big banner above to see Part 1 now.

While I’m glad he’s concerned about this sort of thing [and I'm glad you think my stuff is cool :D], I want to take the time to explain a few things, especially if sometimes some people don’t stop to think about chains of influence and origin.

In some of my work, it has notable influence from Mirror’s Edge, and I don’t deny their origins [quite evidently since I do actually list Mirror's Edge as one of the influences for each of the inspired artworks.] For the following statements, I’m leaving [Being Alone] out, and I explain why in its description. For the other two artworks, [Now Arriving] and [Searching For] however, are original works — not Mirror’s Edge fan arts. They do contain influence from Mirror’s Edge in the form of minor color choices, but both images actually contain nothing from Mirror’s Edge itself. For some who aren’t aware, Mirror’s Edge does not actually contain a unique visual style, even its developers know this, as they’ve talked about where its visual style comes from in several interviews. Mirror’s Edge gets its main visual distinction by following basic color theory — the same color theory that you would be taught in your first year at any art college. Within the primary colors, blue recedes while red comes forward. That is, in essence, Mirror’s Edge’s entire design concept. [And believe me, N.C. Wyeth discovered the power of primary colors far before they did.]

Mirror’s Edge borrows influence from two other major sources: Swedish graphic design and Asian Architecture, [namely Tokyo and Hong Kong.] Mirror’s Edge is one HUGE reference to Tokyo, and if you weren’t aware I’d suggest to go look up some photos. Like… [this one], [this one], [this one], and [this one.] I’ve always been in love with Japanese urban development and mass transit, which is a big reason why it shows up in my work even before Mirror’s Edge’s release. One of the biggest influences Mirror’s Edge uses is the Sewers level, which is based nearly 100% on the Japanese G-CANS project. [See the G-CANS here,] and compare it to the Mirror’s Edge level seen [here], [here], and [here.] I first knew about the G-CANS before their appearance in Mirror’s Edge, so I was stoked that I’d get the chance to run around inside of them when it was released. The point is, if I were to do a picture involving the G-CANS, I’d reference the fact they’re influenced by the actual location in Tokyo rather than the level in Mirror’s Edge.

Swedish graphic design plays another huge role, as even my latest work colleague Kacper Antonius [editor in chief of Level magazine, Stockholm Sweden,] mentions by saying, “Compare the look of Mirror’s Edge to things like IKEA.” Such as [this] and [this.] “Swedish graphic design consists of solid high saturated colors with bold, white or colored solid text. Mirror’s Edge is a tour-de-force of Swedish Graphic Design.”

While I found Mirror’s Edge to be a fun and inspiring game, the truth behind the matter is that I’m not being influenced by Mirror’s Edge: the game itself. Mirror’s Edge did not invent these influences, it instead acted as a transporter to allow me to discover its own influences in greater detail.

A good example: the current design for Plastic Shards is entirely influenced off of Swedish graphic design. I can thank Mirror’s Edge for showing me how wonderful Swedish Design can be, but I’m not crediting Mirror’s Edge itself for infleuncing this design.

For people who say that my work is reminiscent of Mirror’s Edge, that’s fine, and you are accurate to say so :) However, if you say that my work IS Mirror’s Edge and I should credit Mirror’s Edge, then you’re vastly mistaken. Besides, my very most recent work barely even feels reminiscent of Mirror’s Edge anymore, hahaha. :) I think I’ve fallen in love with the color magenta lately.

However, with all of this new exposure comes a bit of the “telephone effect.” Basically, as some blogs pick up my work and publish it in a post, some facts can get skewed here and there. Most notably is some confusion about what I do, and the focus of my work.

I’d like to take the time to clarify that I do photography as a hobby. In the case of some blogs, they write that I “often use photography” in my work, when in fact I’ve only used it in two pictures within my gallery. [The "Series I" images.] All of my work is actually created from a more classic approach — that is, I start with a quick thumbnail of the scene, I bring the thumbnail to a rough sketch, the rouch sketch to a cleaned up sketch, then the cleaned up sketch to a final polished drawing. I have some supporting imagery to show the processes in a couple of my images.

[Click the image below to see a larger version.]

I also have a video recording of one of my one-hour speed paintings, start to finish, compressed into about 10 minutes. You can see how I work directly!

So I like to use photography as a method to improve my visual memory, composition, and value, however photography is actually RARELY present within my work :) This would make me a Matte Painter if I did use photography — but the truth is that I’m not a matte painter. I like to be a conceptual designer and illustrator. I like to sketch and draw things from my head, quickly, and then embellish the sketches after the initial speed sketch. [Much like the video above.] Of course if anyone has any questions, feel free to drop me a comment here!

Just wanted to clear that up, and hope you found those examples interesting!

Thanks again!

1) How do I turn off the zoomed in grid [the pixel grid] in CS4?

In Photoshop CS4, when you zoom in beyond 500%, a grid appears outlining the pixels. This can be great when working in big fields of solid colors, but not so useful when doing something like pixel art or spot-photo-retouching. To turn off this grid, go to View > Show > Pixel Grid. If checked, clicking it will uncheck it and the grid will not appear when zoomed in beyond 500%. Similarly you can find many other things in this menu like guides and 3D axes.

2) How do I get anti-aliased rendering when zoomed out in Photoshop CS4? Why do my open pictures still look jagged when zoomed out in Photoshop CS4?

In CS4, Adobe finally addressed the issue of open documents looking jagged and partially unreadable at non standard zoom levels. [like 33.33%, 66.66% etc.] Using hardware acceleration, CS4 renders the images with filtering, anti-aliasing the pixels to appear smooth at any zoom level. Unfortunately, this rendering requires graphic acceleration. On some Mac computers, this can be tricky, as it uses the Mac OS OpenGL acceleration to render open documents. Sometimes the graphics acceleration will break because you have a secondary monitor attached to your system. This is rare, but it does happen, especially on MacBook Pros. Detach your second monitor, open Photoshop, then plug your second monitor back in again. You should find that the graphics acceleration works all of the sudden. Also be advised that the acceleration does not always work in some releases of the Windows 7 Beta, and under normal Windows [Xp/Vista] releases, having your absolute most recently updated graphics drivers can help.

If you’re not sure if your Photoshop CS4 graphics acceleration is working, you can check it in the preferences. Open the Photoshop CS4 preferences, [Photoshop > Preferences > Performance for mac. Edit > Preferences, go to Performance for Windows.] There’s a box that will list your currently active video card and rendering method [DirectX, OpenGL.] If this box displays empty with  no information, then something isn’t working correctly. The best troubleshooting methods are
1) updaing your OS
2) updating Photoshop CS4
3) Updating your graphics drivers
4) Hardware issues like an attached secondary monitor, Cintiq Tablet, or your computer just may need a restart.

The speed paintings are apart of a new stylistic experimentation I’m conducting. I want to explore doing work looser and faster. I’m taking a break from doing super-tight technical work for a while, that stuff hurts my brain after so long.

More work like the speed paintings coming soon. ]]> http://plasticshards.com/blog/archives/102/feed 1