Helping ordinary people create extraordinary websites!
HOME TUTORIALS SCRIPTS WEB HOSTING BLOG FORUM
Get Our Newsletter
Your Email:
Blog Feed

Posts Tagged ‘photoshop’

Designing and Coding a Wordpress Theme From Scratch (Part 2)

in Design, PHP, Photoshop, WordPress by JonGos


Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 1)

in Design, PHP, Photoshop, WordPress by JonGos


In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

(more…)





Five Point Form: Mastering Professionalism as a Freelance Designer

in Design, Photoshop by JonGos


One thing many of my young designer friends tend to forget is that being self-taught, fast learning and full of raw talent is no guarantee for steady work. I should know because I consider myself many of those things yet for a while when I began freelancing I couldn’t get clients to save my life.

How did I turn things around? Well for one I had to force myself to adopt a five point system for improving my own work habits as a designer. I explain the five points that I mastered (Fundamentals, Versatility, Humility, Efficiency and Audacity) below:

1) Fundamentals: Learning Your Quick Keys

A great Photoshopper knows how to make amazing work. A better Photoshopper knows how to make amazing work while also knowing the fundamentals. I learned this when applying for work at a creative staffing agency called Aquent. At Aquent you can get some great work, make great contacts and make great money. The problem is Aquent only tends to work with talent that take and pass their assessment test. Does the assessment test measure talent? No, like most tests, it just wants to see you get the job done in a way that proves you know fundamentals, standards and how to work quickly. Aquent is corporate and they can’t risk hiring people who run the risk of embarrassing them. That isn’t to say most of my work for comes from them but being able to count on work from there and other corporate clients when I need it isn’t a bad thing.

Now, I like you, don’t agree with this method. Give me a job, tell me to do it, and I’ll do my best to get it done quickly and to the client’s liking. Well, the world doesn’t seem to agree with me because there are quite a few jobs that are more concerned with your history than your actual ability.

Aside from the fact that you’ll be able to quantify your knowledge to people who have no clue how to quantify the knowledge of a designer, you’ll work faster. You can’t tell me that using a mouse to jump around different layers changing fonts is faster than using quick keys to do the same task if you know them well. It’ll save you time, make you faster and thus increase your output.

2) Versatility: Learning to Work With Standards

I once heard a guy complaining about failing Aquent’s assessment test because they asked him to work only with em measurements. His argument was that it was absurd, that no one uses em because the real standard is pixels. Really? Clagnut makes a brilliant argument:

If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with. IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes. So unless you know (not think) your audience won’t be using IE/Win or will never wish to resize their text then pixels are not yet a viable solution…..Using ems, however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

So this is why companies like Aquent err on the side of IE compliant standards. As much as we hate to admit it, most of the world is surfing the web through Internet Explorer on a PC, a fact that isn’t going to change any time soon. The point is most website owners want to reach as wide an audience as possible so for your own sake, you should learn to be versatile. Work with measurements that will translate universally regardless of the platform the end user is viewing them on. It’s a pain, it’s time consuming and annoying to have to rework an entire site or design because you didn’t use universal measurements. If none of this matters to your client then it’s entirely your choice but as long as you can work in whatever they’re asking for you’ll never have to turn down a project for lack of ability in this area.

em, en, px (Pixels), pt (Points), pc (Picas), mm, cm, in, %. Find out what all of them mean, when and why you should use them. Start here and continue here.

3) Humility: Letting the Client Be an Ass

Another thing I had to learn was how to respectfully disagree or, (in some cases, silently disagree) with a client. The person who pays you, or contracts you or hires you will sometimes end up being a real jerk. They want what they want now and you’re the person in their way. In my experience, the more money they make, the less patience they have for your input whether you’re the voice of reason or not.

Hopefully the majority of your clients won’t be like this but when they are, you just have to learn to take it in stride. I once worked for a guy just would not let me leave a job. I tried to tell him I’d be more effective the next day, that we weren’t making any progress, that his expectations were unrealistic but he insisted. Sure, he paid me more for my time, but at some point it’s not about money, it’s abut not wasting time the clients or yours. I would have rather left and come back the next day well-rested to complete the task then stay all night beating my head against the wall. Despite my feelings, I did my part, we didn’t make much progress and after I realized he wasn’t going to listen to me I just tried to keep a positive attitude about the situation. The client realized he wasn’t helping and backed off.

If you let an unreasonable person remain unreasonable long enough they’ll end up in a corner where their choices end up making things worse at which point they’/// either a) blame you anyways or b) appreciate your tenacity for putting up with them. Stressing yourself out will only make the situation that much more unpleasant.

4) Efficiency: Working on a Schedule

I’m a naturally bad procrastinator so the only way I can get a job done is if follow a strict schedule of milestones and goals. To force myself to stick to that schedule I give allow my clients to subscribe to a calendar or rss feed like gCal, 30boxes or Basecamp. This will do two things, it will force you to recognize when you’ve slacked off during a particular period of the project, and it will let your client know when you’ve done so.

Project management tools are a big part of my workflow and have helped me become a more productive individual.

5. Audacity: Presenting Yourself Like You’re Ansel Adams

Another thing I’ve learned is that most people are completely incapable from recognizing real talent from anything else that might be put in front of them. If they aren’t designers, they don’t think like designers and they don’t really know what makes one designer better than another. Thus, they need to be convinced. I’ve seen people who choose horrible color palettes and layouts make upwards of $10K while people making photoshop designs that are nothing short of brilliant make pennies. The average client is waiting on you to tell them that you’re great, that you know your stuff and to prove it to the best of their understanding. This is why presenting yourself with confidence (not arrogance) is key to getting class “A” projects.

Of course once you actually are proficient and you’ve mastered all the previous steps, you’ll more than believe in yourself, you’ll know that you’re the right person for the job and if a potential client can’t recognize it then it’s completely their loss…





20 Time Saving Keyboard Shortcuts for Photoshop

in Photoshop by JonGos


Remember when you used to play Street Fighter at the arcade and you would time that Hadouken just right to counter an attack from that jackass who wouldn’t stop throwing you around? Well, just like a video game Photoshop is chock-full of secret key combinations that will have your clients and peers asking “How did you do that!”

LAYER SHORTCUTS

  1. F7 - Open and Close the layers palette
  2. Shift+Ctrl+Alt+N (Win) / Shift+Command+Option+N (Mac) - Creates a new layer quickly
  3. Ctrl+J (Win) / Command+J (Mac) - Duplicates a layer or copies selection to a new layer
  4. Hold down Alt (Win) / Option (Mac) key and use the left and right bracket keys ( [ and ] ) to scroll through layers in the Layers palette.
  5. Ctrl+A (Win) / Command+A (Mac) to select the entire layer (not just the contents).
  6. Merge multiple layers by selecting the layers (in versions of Photoshop before CS2 you’ll have to link them) and pressing Ctrl+E (Win) / Command+E (Mac).
  7. A very useful trick for comping quickly is to merge all layers into a new layer while keeping the originals (for editing). Create a new layer at the top of the Layers palette and press Shift+Ctrl+Alt+E (Win) / Shift+Command+Option+E (Mac).
  8. To cycle through all the different layer blend modes, hold down your Shift key and use the + and - keys. This is the same on Mac and Windows machines.
  9. Ctrl+Y (Win) or Command+Y (Mac) allows you to Color Proof.
  10. Num Keys 1 thru 0 - quickly set Opacity levels

TOOL SHORTCUTS

  1. [ or ] - Decrease and Increase Brush Size
  2. Shift+ [ or ] - Decrease and Increase Brush Softness
  3. Ctrl+Alt+Shift+K (Win) or Command+Alt+Shift+K (Mac) - Display Keyboard Commands Menu

TEXT SHORTCUTS

  1. Ctrl+Shift+K (Win) / Command+Shift+K (Mac) - convert text selection to all caps
  2. Ctrl+Shift+B (Win) / Command+Shift+B (Mac) - changes text selection to bold. (Note: for italics use “I” instead of “B”)
  3. Ctrl+Shift++ (Win) / Command+Shift++ (Mac) - changes text selection to superscript
  4. Ctrl+Shift+Alt++ (Win) / Command+Shift+Option++ (Mac) - changes selection to subscript
  5. Ctrl+Shift+Alt++ (Win) / Command+Shift+Option++ (Mac) - changes selection to strikethrough
  6. Ctrl+Shift+Alt (Win) / Command+Shift+Option (Mac) and pressing the > or < keys enlarges or decreases text by 10 points
  7. Ctrl+Shift+L (Win) / Command+Shift+L (Mac) - Left justifies a paragraph (Note: “C” centers and “R” right justifies>

Did you Know?

To print your keyboard shortcuts, you can go to Edit > Keyboard Shortcuts and click ‘Summarize’. Photoshop will then save your shortcuts to an html document that can be opened in any text editor or web browser. From there you can print a copy or save to PDF to keep as a reference.

Summarize Photoshop Quick Keys





Understanding Scripting in Photoshop

in JavaScript, Photoshop by JonGos


Whether you want to automate tedious tasks, customize commands, or add new features, scripting takes the world of Photoshop to another level. In this tutorial I’ll make you aware of what scripts are capable, where to find them, how to edit them and how to use them. Eventually I’ll follow up with how to make your own scripts but for now that’s a topic for another day.

If you use Photoshop on a daily basis you’ve probably found yourself doing the same tasks over and over again and it would be nice to have the ability to automate those things to save yourself some time, right? Well scripts make that just a tad bit easier.

First things first, to speed up your understanding of scripting, you should probably download some existing scripts from the various repositories and websites that offer them. Here’s a list of places that offer free Adobe scripts for Photoshop and other Adobe products.

Adobe Exchange Repository

Ps-Scripts

Graphicsoft

You may have noticed that some of these sites offer ‘Actions’ as well and you might be asking yourself, how does an ‘action’ differ from a ’script’? Actions (in Photoshop) are a means to record all commands used to generate an effect in Photoshop for the purpose of re-application later. Many people say that scripts are similar to actions because they can both be used to automate tasks, but scripts can do so much more then what was possible with actions. For starters scripts have conditional logic which makes it possible to automate different outcomes based on various inputs. Essentially scripting Photoshop is programming and thus it uses various programming languages for results.

So what can you do with scripts? A few examples are using Photoshop to snatch frame grabs from a video source, turning a photo into a rainy day or to turn RGB values in an image into swatches automatically.

For the purposes of this tutorial I’ll only deal with JavaScript since it is platform independent (Mac and Windows). Also available are Visual Basic (Windows) and AppleScript (Mac) commands.

Adding and Using Scripts

  • After downloading scripts you’ll need to install by navigating to Applications >> Adobe Photoshop CS2 >> Presets >> Scripts.
  • Drop your file into the ‘Scripts’ folder and launch (or relaunch) Photoshop.
  • Open your image in Photoshop.
  • Select File > Scripts and select the script you wish to use.
  • A dialog window may pop open asking if you want to apply the script. Click ‘yes’.

Bam you’re done. Scripting is really that easy. Now for the harder part.

Writing or Editing Scripts

Regardless of whether you install a single CS3 application or the entire Creative Suite, two other applications are installed by default: Adobe Bridge and the ExtendScript Toolkit. The ExtendScript Toolkit is a coding environment that aims to allow you to add new features to Adobe products through scripting.

  • Find the ExtendScript Toolkit. Go to Applications >> Utilities >> Adobe Utilities >> ExtendScript Toolkit2. In some rare cases this may not have been installed or deleted. No worries, the toolkit can be downloaded for Macs here and PCs here.
  • You’ll see a window with Photoshop-like palettes on the left and a text editor on the right.
  • Choose File > New JavaScript. This will create a blank file with an area on the right ready for you to type. If you’re editing a script, instead of creating a new file you would simply open that script instead.
  • Understanding the window in front of you is critical. First, the ‘Select Target Application’ option tells ExtendScript which application you are writing the script for. In the top left dropdown menu select Adobe Photoshop CS2 or 3 (depending on your version). When asked if you want to start the application, choose ‘yes’.
  • If you aren’t familiar with scripting or you’d like a reference guide, download the Photoshop JavaScript Reference Guide.

This concludes our tutorial. Stay tuned to this column because in a future lesson I’ll help you go beyond these steps to actually writing and creating your own scripts from scratch.





Creating Energy Spheres in Photoshop

in Photoshop by JonGos


For this tutorial you’ll want to find a photo of someone doing something that looks a bit larger than life. I used this photo that I found at the stock photo website Stock Exchange. For this tutorial you’ll need a photo that you want to manipulate and some special brush sets which I downloaded from here.

This will be the final result.

(more…)





Creating a Realistic Sun in Photoshop

in Design, Photoshop by JonGos


creating a sun in photoshop

(more…)





Blog Categories Blog Archives