If you like me, then you know the problem with templates in Photoshop. Everything that Adobe gave us is document size presets. It's cool, but not enough, for me at least. I have bunch of “starter-kits” for different design tasks, like iOS icon grid or iPhone screen with native navigation bar, tab bar etc. I have to duplicate them to my project folder again and again.

I think, such routine processes should be automated and be done by computer, to save our precious time for actual work. Therefore I decided to write this script.

What it is?

Here's how it works. When you create new document in Photoshop, you can add to the end of your document name special keyword, +960x12 for example:

Then our new document will have 12 column 960 grid with guides in layer group called “Grid (960x12)”:

That's it :)

Download and install

Installing

Install process differs from regular scripts, so please read carefully and do all steps as described below:
1. Move downloaded folder (!) to Photoshop/Presets/Scripts/Event Scripts Only/ (if there's no Event Scripts Only folder, then create it)
Take a notice that you need to move whole folder, not just scripts inside them.

2. Inside downloaded folder you'll find file called +install.jsx, you have to run it in Photoshop. To do this, double click on it. If somehow script will not opens in Photoshop, then run it from it manually via menu File→Scripts→Browse or just drop script file into Photoshop window/icon on dock.

It should show you message, that script was installed successfully. After this installation is completed.

Uninstalling

If you want to uninstall script, then you have to run file +uninstall.jsx, just as described above in step 2, it'll show you message that script was uninstalled, then you can just remove folder from your /Scripts/Event Scripts Only/ directory

What other keywords exist?

I decided to add few preinstalled templates, here they are:

960 Grid System: from +960x2 to +960x16

This is popular 960.gs grid with from 2 to 16 columns. Here's how it works: you write keyword +960xN where N can be: 2, 3, 4, 6, 8, 12 or 16. For example, if you enter +960x8 it will create grid with 8 columns.
Take a notice, that your document should be at least 960 px wide.

OSX Icon Template: +OSXicon

This keyword will make a grid for OS X icons with major sizes of 512, 256, 128, 48, 32 and 16 pixels. All sliced up and ready for export to PNG via Save for Web and Devices (don't forget to check All User Slices) Minimum size of the document is 850x640 px

iOS Icon Template: +iOSicon

This will create roundrects with major sizes for iPhone and iPad icons. Just like OS X icon template, all roundrects are sliced and ready for export to PNGs. Minimum size of the document is 850x640 px

User Templates

You can use your own templates and customize existing iOS and OSX icon templates. To do this, you just have to add your PSD with template inside /templates/ folder. Keyword for the template will be name of the document. For example, if you have template called test.psd, then keyword will be +test. Take a notice, that name of the file must have only latin characters and numbers (no special symbols)

Also, inside /templates/ folder you'll find iOS and OSX icon template, so you can customize or replace them if you want.

Inside document you can create text layer called %DocName%, then it will be renamed to the new document's name. Take a notice, that this layer should lay on the root of layers stack (e.g. it shouldn't be in the group)

Also, you may have noticed, that script resizes templates to the size that was entered in the New Document dialog. If you want to prevent this and use template as is, then you need to create empty layer in your template file with name Lock Size and place it to the top of all layers. Then script will not resize your new document and will use size of the template file

What else?

In future I want to add more dynamic templates like 960 grid, I have some thoughts about making responsive 960.gs. If you have any suggestions or ideas for the templates — add them in comments.

Yep

And that's it! Hope this script will help you save some time
Thanks.

What is it?

Imagine, that you have a feed with some text paragraphs and userpics:

You need to resize each userpic in 50%. If you'll select all of them and transform it via default Transform Tool, then it'll look like this:

Not cool. Alternatively, you can choose each image and transform it manually. This can be tedious process. So, here comes Transform Each, it transforms each of selected layers as it was transformed individually:

In our case, script resized each userpic in 50%, and moved it top right in 20px.

Download @ Install

Also don't forget to setup a hotkey (Edit→Keyboard Shortcuts…, look for File>Scripts>[KAM] TransformEach). My hotkey is cmd+alt+ctrl+T

Window description

When you run script you'll see this window:

All inputs are from default Transform Tool, but just in case, I'll write a bit about them:

Scale

Resizes layer
Horizontal (%) — horizontally resizes layer. 100% — is initial size, 200% — doubled size etc.
Vertical (%) — vertically resizes layer
You can enter negative values to flip object horizontally/vertically

Move

Moves layer relative to its current position
Horizontal — moves layer horizontally in pixels. Positive numbers moves layer to the right, negative — to the left
Vertical — moves layer vertically in pixels. Positive numbers moves layer to the bottom, negative — to the top:

Shear

Shears layer:

Horizontal — shears layer horizontally. Positive numbers shears layer to the left, negative — to the right. Vertically — shears layer vertically. Positive numbers shears object to the top, negative — to the bottom

Rotate

Rotates object
Angle — angle of the layer rotation in degrees. Positive numbers rotates object clockwise, negative — counterclockwise

Scale Styles checkbox

I guess it's self-descriptve—scales layer styles with layer.

Random checkbox

Allows to apply random transformation to the layers in the range of initial values to new values. For example, if you'll enter 360 in Rotate Angle and check Random, then script will randomize rotation angle for layers from 0 to 360. Same goes for scale: if you set horizontal/vertical scale to 500, then random will be in the range from 100 to 500

Some notices

There's one issue, that I'm still working on: If each of the selected layers were in their own groups, after script finish work all your layers will be in one group

I'm thinking how to walkaround this thing.
Also take in mind, that if you'll select big amount of layers it will take some time to perform all transformations

Yep

And that was another post with script for your Photoshop.
Hope you'll find it useful :)

Prologue

Let's say you have a circle on your canvas with Stroke effect on it and you have in your clipboard style with Inner Shadow. If you'll paste it via default Paste Layer Style it will replace everything and leave you with sad circle with Inner Shadow:

Not cool. Sometimes I need to apply one global layer style effect (Drop Shadow for example) to few layers that are already have their own layer styles. I have to do add this style manually. Tedious process.

Dear diary

So, to solve this problem I decided to write a script.
When I made it, as usual I wanted to assign hotkey to it. As I wrote before, for working with Layer Styles I have these shortcuts:
1. cmd+ctrl+c — Copy Layer Style
2. cmd+ctrl+v — Paste Layer Style
3. cmd+ctrl+x — Clear Styles
4. cmd+ctrl+t — Scale Effects
And I decided to assign to the script hotkey cmd+ctrl+alt+v.

Imagine my face, when Photoshop showed me this warning:

Photoshop already has this function! And it has same hotkey that I wanted to assign to my script!

Mysterious part

But the most interesting thing is that there's no such menu item in Photoshop at all. Like they made function, but didn't added it to the GUI. I guess that's why warning says, that we can't assign different hotkey to the “Paste layer effects without replacing the current effects”—we just can't access this functon in the Keyboard Shortcuts… dialog.

The essence of the post in one picture

So, this time instead of script I have a hotkey for you:

Unfortunately, I don't know analog combination for the Windows. We tried with my brother to press instead of cmd: grey alt, shift — nothing happened. If someone will find such hotkey for Windows — please reach me out on Twitter or in comments, I'll update the post.

UPDATE: It's not about cmd+alt+ctrl+v. It's about setting up any hotkey for the Paste Layer Style and then adding alt when using it. For example, if you have cmd+ctrl+R for Paste Layer Style you will have to hit cmd+ctrl+alt+R for Paste layer effects without replacing. So this should work both on Mac or PC

Yep

I wonder what other hidden functions Photoshop actually have.

Imagine what if …

B-…but… of course no… No. There's no such function guys. And don't try to find it. Okay?

Download @ Install

As usual, you can download latest version of script here
Move downloaded file to the /Photoshop/Presets/Scripts/ folder and restart your Photoshop. Script will appear in the menu File→Scripts→[KAM] Expand SmartObject

Using

I highly recommend you to setup a hotkey for the script (Edit→Keyboard shortcuts…), something like ctrl+cmd+E. And you can also assign a hotkey to the Convert to Smart Object to ctrl+cmd+S (it is in Layer→Smart Objects>)

Now you can select Smart Object and press ctrl+cmd+E, script will expand it as group of layers with the name of the original Smart Object and place it in the same place.

Take a notice though, script works only with Smart Objects that were created in Photoshop. With Illustrator's Smart Objects it will not work. Also, script expands original Smart Object, without transformations (e.g. if you resized your SmartObject in 200%, expanded will be 100% anyway)

Yep

My blog is starting to filling up with scripts. I guess I should write something about vanilla design too. Or not. Anyway. Hope you'll find the script useful.

Happy pixelin'!

Download @ Install

Here you can get the latest version of the pattern pack:
Download Vertical Rhythm Pack.pat
You have to move it to the Photoshop/Presets/Patterns/ and restart your Photoshop. Then you'll see it in the list of all pattern sets in the context menu of pattern window

Sizes

In the pattern pack you'll find following versions of leading: 6, 8, 9, 10, 11, 12, 14, 18, 20, 24, 25, 30, 35, 36, 45, 48, 50, 55, 60, 72. Simply, these are values of leading from native font panel in Photoshop and some additional values that I use sometimes

Using

The best way to use these patterns will be createing Pattern Fill Layer (Layer → New Fill Layer → Pattern…), choosing apropriate pattern for your leading and setting up opacity for the layer
Patterns have names in the format 20px leading, therefore it would be better if you'll switch view of the patterns window to Large List, you can do it in the context menu of the pattern panel
At the result you'll have black lines with selected height. If you want to use it on the dark background, just switch blending mode to Divide this will change color of lines to white

Yup

That's it for today. Hope these patterns will help you in your work. I made them via script by the way, I just have an array of all sizes and script generates all patterns. So if you have suggestions for other sizes — write them down in comments and I'll update the file

How it works

Script makes a snapshot of the current document and places it into Safari browser window in new document. Title of the window and text in address bar will be the same as original document's name. But you can change it to whatever you want—text layers are editable. You can change favicon and background color too

Take a notice, that minimum size of the document is 160×1

Download

Script requires Adobe Photoshop CS5 or CS6.
Download latest version of the script: LayoutWrapper.zip

Installation

Unzip downloaded archive into %Photoshop folder%/Presets/Scripts/ (after successful extraction you'll get LayoutWrapper folder inside Scripts folder)

You can access script in Photoshop from the File→Scripts→[KAM] LayoutWrapper (you'll have to restart Photoshop to see it in this menu)

Hint: Setup a hotkey

To make it more comfortable to use I suggest to set a hotkey for the script. To do this you have to go Edit → Keyboard Shortcuts… unfold File → Scripts > and choose your hotkey for the [KAM] LayoutWrapper. For example, alt+cmd+F3

Yup

Hope you'll find this script useful. I'm thinking about adding other browsers and maybe devices in future versions. At least I want to add Chrome and dark side versions of the browsers. If you have any ideas or suggestions—drop me a line in Twitter or here in comments.

P.S.: This is Browser Inception

Some notices

Isometry Angle

In my panel I use angle of isometry that equals 26.565 degrees, it's commonly used in pixel art world. Math isometry has 30 degrees. In future I'm planing to make angle defined by user.

Working with bitmaps

Isometrify doesn't work good with bitmaps, it's inteded to use with shape layers only. You still can use it with raster graphics, but results will be not so good.

Pixel grid snapping

There's some issues with pixel snapping while transform, sometimes shapes don't fit into pixel grid, so you'll have to move it manually with direct selection tool. At least in CS5, I guess in CS6 situation is better.

Isometric Top / Left/ Right

First three buttons are made for transforming shapes in each direction. You can trasnform group of objects and text layers too.

Left

Right

Top

Generate Grid

This button generates isometric grid pattern with customized size. Take a notice, that size you enter is for size of one of the sides of square:
Pattern will be saved in your current asset with name “Isometry Grid N”, where N is size of grid

Extended version

I'm planing to release new version in future, so at this moment I'm working on functions like:
- Extrude — shape extruding in any isometric direction (top/bottom, diagonal left, diagonal right, etc.)
- Moving objects in isometry space (sometimes it can be frustrating to move object exactly in the isometric diagonal)
- New visual interface, that will be more pleasant
- Custom isometry angle

Download and install

You can grab latest version of panel here
For installing you'll need just double click on downloaded file, it should be opened in Adobe Extension Manager and take care of everything.
If you have issues about “Unknown Extension Signature” try installing this fix
After installing you'll need to restart your Photoshop, new panel can be found in Window → Extensions → Isometrify

Feedback

Making this panel was fun, hope you'll have some while using it too. If you have some feature requests or suggestions, please feel free to leave it in comments or send them to me to email/twitter. Enjoy!

Choosing stylus

Really, there were not too much of thinking. Before buying iPad I already knew that I'll get Wacom's stylus for it. Wacom has established itself as great comapany with great products for artists, so I had no ideas why I should check othere noname styluses. After buying stylus I watched few comparsion reviews and most of them put Wacom's stylus in first rows. I got it for 60 bucks (because this is Russia!), but I guess in whole world you can get it in half price or something. You can also buy replacement nibs (Soft and Firm Nibs — have no idea what's difference).

Using stylus

First of all I want to say, that you'll not get super precise drawing with stylus for iPad. It has some kind of soft ball at the tip, so you'll have some “deadzone” in 0.3–0.5mm. In addition you can't put whole hand on the iPad like in drawing on paper — because you'll start to tap on touchscreen by this. So you can either use a glove (you can buy special glove if you want) or try to adapt to not put your hand on display. I tired to wear glove (regular glove), but at the end I'm just trying to not put hand on iPad.
Besides, there's some lags while drawing.

Yeah, sounds not so optimistic. But it worth trying anyway. And below I'll tell you a bit about apps for drawing.

Apps for drawing

There a LOTS of apps for drawing in iTunes Store. I tried most popular of them, and here're my impressions about them:

Bamboo Paper (Free + $1.99)

This is official Wacom's app and it has most quick response time. Almost like on regular paper. As useful functions, there's small circle that indicates size of eraser, dunno why but only Bamboo Paper has this. But it has lack of tools and colors. You can't choose exact size of brush tip, you have only 3 presents for each tool. Also you can't pick RGB/HSB color, only from selected colors. It has no layers. But the fact that it works REALLY fast is kinda big advantage in comparsion to other apps.

Autodesk SketchBook (Free + $4.99)

Pretty old app, but I guess it has big amount of fans both on desktop and tablets. It has layers, brushes/tools and other useful things like Symmetry Tool. But big disadvantage of the app is its speed. Laggy-choppy, even on The New iPad. Not sure how well it works on previous models.

Adobe Ideas ($9.99)

Adobe's app reminds me Bamboo Paper somehow, but it has more tools and layers (also there's color HSB picker). Looks pretty well and works kinda fast (not so fast as Bamboo though). Drawing mechanics reminds me Flash drawing (or Blob Brush Tool from Ai) — there's line smoothing and everything is in vector, so you can send your drawing via email in PDF file. There's also Creative Cloud sync.

Procreate ($4.99)

Procreate calls itself “A studio of tools at your finger tips”. And it has pretty big amount of tools and brushes. You can also create your own via uploading image from Camera Roll or Dropbox. Nice app.

Paper by FiftyThree (Free + $6.99)

Yeah, Paper. I bet there's no person who didn't heard about this app. It is pretty popular app in iTunes Store. Before buying iPad I thought that it'll be the first app I'll try. And it was. But honestly I'm kinda disapointed about it. It looks pretty nice and stylish. Moleskine, pages animation — looks great. But there's no page zoom or layers and it has kinda uncomfortable way of undu/redo (they call it “Rewind”, I call it “How to make this damn thing work like I want”). So Paper by FiftyThree for me is app that is nice to love…but on some distance.

My choice

All these apps have their strengths and weaknesses. I wish there were an app that combined all strengths and filters all glitchy things (I'm betting on Procreate — looks like developers work pretty hard on each update). So at the end, most used apps for drawing on my iPad are Autodesk's SketchBook Pro and Procreate.
I wish Wacom will add some more functions to the Bamboo Paper, because really it most of the fastest apps in store.

In conclusion

At this moment because of slow response time, low accuracy of stylus and app's lags I don't see it as professional tool. It is no way Cintiq/Intous killer or something. It's more like a thing to have fun with before going to sleep and scribble bunch of doodlings. Sad, but true.

Task

So, here's a text of the task (poorly translated from Russian by me):
“Every сandidate on the hh.ru has a page with responses and invites from employers. Design a layout of this page for mobile platform of your choice”

Here's a page:

Analysis of page

First of all, I decided to look at the page and try to determine its main blocks, that'll be transferred to the mobile screen. Our app is mobile, so we can't just move everything that we see to the screen, it'll be a mess and user will be confused by all these fancy things going on there.

Actually, “analysis” is kinda big word for this page — it's quite obvious what will be on the mobile screen:
- Content: List of responses
- Tab bar: Main sections of the site
- Navigation bar: Settings and Response filter

Content: List of responses

I think that most of the cases user will see repsonses for the same type of vacancies (you'll rarely see designer who's trying to find work of cook or security guard of small shop in criminal city district). So beause of that I decided that name of company is more important in the response and I highlighted it first with bold font and only then I added vacancy name and response text. More information of response should be shown when user opens detailed view of the response by tapping on it.
Instead of color coding of the whole row cell I deciced to draw icons for each response statuses (because, I love icons you know).

Tab bar: Main sections

Main sections of the app are:
- Jobs search
- Responses
- My CV's
I drew icons for each section and placed them into tab bar

Navigation bar: Settings and Response filter

I had some problems in deciding what color to use in the navigation bar. Web site has main colors of blue, gray and red. In the final I decided to choose red, because this color exist in logotype and because it's a color of love*

On the navigation bar I placed settings button and button for response filter, which represented as popup with list of all types of responses. For each type I drew an icon:
I also had an idea to dynamicly change icon on the navigation bar depending on what filter type was choosen. But this could confuse user, because some of the response types visually are matching with standart functions like Delete and Archive.

That's all, Folks!

I guess that's all. I worked on this view at the beginning of December 2012, so some things I would do differently today. For example I could replace filter popup with some kind of side menu.

Anyway, that was something from my process, hope it was intresting for you. See you in comments or Twitter replies ;)

Bug is that Adobe Photoshop suddenly stop responding to the spacebar (Pan Tool) — this is because some of your apps are conflicting with Photoshop. So, to solve this problem you just need to shut down this application. Since you need to determine this app, you'll have to shut down everything (except Photoshop) — from app to app — and check your Photoshop to see does your spacebar get back to normal or not. Here I want to provide a list of commonly conflicting apps:

• Browsers (Safari, Chrome, Opera etc.)
• Apps that have built-in browser (For example, Reeder, Little Snapper etc.)
• iMessages

If you found conflicting app, that is not in this list, please tell me about it here in comments or in twitter, I'll update this list.