{Carrer web log}

Some useful scripts for Photoshop Layer Manipulation

Tuesday, January 24, 2012 { 0 Comments }

Last mounth I published Hand Drawn Icons it is set of 282 icons made in Photoshop. If you ever worked with large set of layers in Photoshop you will know how difficult is to mange and organize all this layers. I what to share some of scripts that help me perform different tasks in Photoshop. Many designers ignore the possibility of scripting inside Photoshop with languages like JavaScript, but in many cases using scripts in Photoshop can be time and "energy" saving.

The script that in my case was most useful was Export Layers to Files.jsx (that is included into Photoshop) this script saves all separated layers into files. In my case it took Photoshop about 8 hours to complete the task and save all the 280 icons. It is a slow process but you don't have to manually save all 280 files.

Number of Layers. Other useful script was layers count or how many layers (in my case icons) you have. Only condition for this script is you need to ungroup all the groups(folders) in Photoshop.



Save all layer names into one long list. Why is that necessary? Because in that why I can easily find out missed-spelled layer names by simple copy-paste the list into some text editor like TextEdit (Mac) or Word (Win) that will automatically selects all missed-spelled words.



Search duplicate names. When you are making similar icons or other stuff it comes natural to give same name to icons that perform the same function. But layers with the same name are not welcomed in the final version so "there can be only one" file with the same name.



Order Layers Alphabetically A - Z



Note: All the Layers need to be ungrouped before you excite some of the scripts.

How to install this scripts

Download and copy the scripts inside Photoshop > Presets > Scripts [Folder]

Then you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

You may also find my previous Photoshop scripts useful:

- Make Photoshop Guides Grid with JavaScript

- Draw Shapes in Photoshop with JavaScript

2011 summary report

Friday, December 30, 2011 { 0 Comments }

If I need to define my professional 2011 in two words I would say: JavaScript and Design.

I did some deep dive into JavaScript this year. JavaScript is everywhere. It is cross-platform and cross-program language you can use JavaScript for making scripts inside Windows or using it inside Photoshop or to make server side code with Node.js.
But my main effort was to make JavaScript Framework for building mobile web apps that I hadn't time to publish it this year. Hopefully at the beginning of 2012.

Here are some JavaScript articles and projects from this year:

• About Repaint and Reflow in JavaScript
• Svetlo - One Line JavaScript Selector Engine
• picoCSS - really small JavaScript Framework
• Multiple object extend pattern in JavaScript
• Event Delegation - JavaScript
• Object Auto Documentation
• o - JS Library for Object Manipulation
• Make Photoshop Guides Grid with JavaScript

Design - Like a programmer I always was afraid to "touch" anything related to design. I even convinced myself that I'm not good for that. Today I believe there is not such thing as "you are no good for that", you need to believe in yourself and practice. Photoshop become my best friend I build Photoshop Wireframing Kit , Hand Drawn Icons and I'm currently working on my second pictograms icon set and I'm making some Posters. I spoke about Layout, Typography, Gestalt and the future of ebooks.

CSS - To my collection of CSS Frameworks I added Foxy - CSS Framework and Child Selector System - CSS Framework

HTML - HTML Lorem Ipsum Crash Test

I wanted to do this year, but I didn't. I made four new CSS Framework but I didn't have time to prepare the documentation. I wanted to update The Golden Grid, Malo and Hartija. Two new mobile JavaScript Frameworks. My research on Uni Computer Grid System. About 10 apps for iPhone and iPad and list goes on … The good thing is the code is 85% ready in most cases. So I hope to finish some projects in early 2012.

Plans for 2012. Beside finishing all project from 2011 I wanted to try to make one mobile app (iPhone,Android) per month. 12 mounts 12 apps. That is my big challenge for 2012. But for now I will enjoy my Holidays :)


Happy Holidays Everyone

Hand Drawn Icons

Monday, December 12, 2011 { 0 Comments }

After few mounts of hard work I'm happy to present my latest project Hand Drawn Icons.
The icon set contains 282 designed icons in 32 x 32 px .png and photoshop .psd (layers) format. All icons are designed in Photoshop with help of Bamboo Drawing Tablet and the raster format is used for preserving the icons authenticity.

Here is how the icons look like:


Currently for the launch until the end of this year this set is available for half price at $ 9.5

I hope you like this icon set

www.handdrawnicons.com

Also some hand designed Christmas Icons are available for free.

Make Photoshop Guides Grid with JavaScript

Thursday, November 03, 2011 { 2 Comments }

Last week I published "Draw Shapes in Photoshop with JavaScript" and I had lot of fun scripting in Photoshop. If you ever made Grid of Guides in Photoshop you know how painful and time costuming it is. I made two scripts that can help you speed up the process of making Guides Grid in Photoshop.


The first script makes Unit Grid with vertical and horizontal units, you can also set the gutter. Example if you want to set 80px grid system with 20px gutter size. You can do MakeGuidesGrid(80,20,80,20); this will set the vertical and horizontal gutters, naturally you can set just vertical guides MakeGuidesGrid(80,20,0,0);


The Script on GitHub
Direct Download of this script

The second script doesn't use units but number of guides. So you can set number of vertical and horizontal guides and the gutter. Lets say you need 12 vertical guides and 10 horizontal guides with gutter of 15px. The function is MakeGuidesGrid(12,15,10,15);


The Script on GitHub
Direct Download of this script

How to use this script.

Download and copy the scripts GuidesUnitGrid.js and NumberGuidesGrid.js inside Photoshop > Presets > Scripts [Folder]

Then you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

Dialog box will popup asking the info about the unit size or number of guides or gutter size you need to put just the your numbers inside. And that is it.

Works only in Photoshop CS5 and later. Make sure that the guides are checked View > Show > Guides. To delete the Guides you do View > Clear Guides .

If you have any questions let me know in the comments.

Draw Shapes in Photoshop with JavaScript

Monday, October 24, 2011 { 1 Comments }

I was working on the Photoshop Wireframing Kit update and I wanted to optimize the drawing of some photoshop vector shapes. Few designers know that JavaScript, VBS and AppleScript can be used to optimize the Photoshop workflow. The cool thing about JavaScript in Photoshop is that will run on both PC and MAC.

I was googling and searching for solution for my scripting problem when I stumbled upon this forum post (look for Mike Hale answer) http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15 . I did some small changes in the code - making it function that will accept multiple parameters (coordinates). All the credits for this code goes to Mike Hale he is the author of the code.


What this script does?

Basically what this script does is draws pixel precise shapes in Photoshop with the help of JavaScript.

You need to put Photoshop coordinates in clockwise order and Photoshop will draw the shape.

Example of Square:

// [X,Y], [X,Y] coordinates in clockwise order

DrawShape([100, 100], [100, 200], [200, 200], [200, 100]); // Square

DrawShape([512, 128], [600, 256], [684, 320], [600, 386], [686, 514], [512, 450],[340,512],[428,386],[340,320],[428,256]); // Star

Result in Photoshop:


You can also set the background color inside the script.

The script:



Gist on GitHub

Direct Download


For installing this script you need to download DrawShape.js script copy the script inside Photoshop > Presets > Scripts - Folder

For running this script you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

Change the coordinates inside DrawShape(); to personalize the script.

I only did some tests in Photoshop CS5 but should probably run in some previous versions.

Any comments?

Initiative - provide JSON and JSONP RSS Feeds

Monday, October 10, 2011 { 5 Comments }

JSON has won against XML. Because is lighter and simpler.

Many web services are giving priority to JSON over XML. But the all the blogs are still stuck with XML RSS.

So why give JSON and JSONP RSS support?


- JSON is Fat-Free Alternative to XML (save some bandwidth).
- JSON has been chosen like primary format in almost all major public web services.
- JSONP is easiest and fastest way to directly connect the browser with the web service.
- Growing need of building native web apps who can connect directly with the data source.
.. and probably many other reasons.

This initiative comes from my personal frustration … every time I want to build some web app who needs to talk with RSS and JavaScript I need to use some public proxy like YQL or some other server side XML to JSON solution. JavaScript and the browsers had grown much in the last couple of years, we could start using the browser JavaScript engine speed for some heavy lifting. Implementing JSON and JSONP like an alternative to XML(RSS) is very easy process.

I think if some of the major blog players like Blogger, Tumblr, WordPress, Posterous provide JSON RSS support everyone else will follow.

That doesn't mean that we should kill XML RSS it means just providing alternative JSON support.


If you agree with me help me spread the word. Thanks!

Photoshop Wireframing Kit

Monday, September 26, 2011 { 5 Comments }

Photoshop Wireframing Kit is a vector tool for wireframing and prototyping in photoshop. It is using the Photoshop Custom shapes to produce vector shapes for web site wireframing.

Why I build this tool?

Many web designers use Photoshop like their primary tool for designing web sites. So why not use the same tool(Photoshop) for wireframing?

I think that this tool can be very handy for many web designers that are using Photoshop like preferred graphical program. They can avoid using third party tools for wireframing and do everything in photoshop.

This tool can easily extendible with the native photoshop features. For now there are around 100 shapes, but I'm planing to extend the Kit in the future.


The road to from the the idea to launch.

In the past I made several free tools for wireframing and prototyping like: Sketchbook for web designers, Fireworks Mini Web Wireframing Kit, iPhone Wireframe Kit - Google Docs, iPhone Grid System but I still wasn't happy and I needed complete wireframing tool, that can be easily to learn and preferably be a part of Photoshop (my preferred graphical tool).

The problem with Photoshop that is not meant to be vector tool, the main purpose of photoshop is photo editing not vector manipulation.
There are probably better programs that can be used for Wireframing, like Illustrator and Fireworks but I'm used to do everything in Photoshop so I decided to decided to extend photoshop using its Custom Shapes.

Here are some initial shapes on paper:


Then some photoshop custom shape icons:



And some examples:



Some slides about the concept:.


The surprise for me was it seems so simple thing to build when I started, but there are so many details to be done before the finish. I was super enthusiastic in the beginning, realistic in the middle and I hatted the project when 90% was done. When I finally published the project I felt relieved. I hope that someone will find this project useful and that will help you to do better wireframes and web site prototypes.

I'm happy to present:

www.photoshopwireframingkit.com/

Let me know what do you think about this project? I will appreciate your feedback. Thanks