{Carrer web log}

Wireframing Icons

Wednesday, February 22, 2012 { 1 Comments }

For the past few mounts I was working on my new Icon Set of Vector Pictograms. It is a set of 180 + Vector Icons. The icons are mainly design to go with some wireframing program like my Photoshop Wireframing Kit but can be used for any purpose.


The Icons are designed in Photoshop and exported in almost all vector programs used for Wireframing. The icons can be resized in any size and colored with any color.

The Icons Formats:

• Transparent .PNG (16px, 32px, 64px, 128px, 256px, 512px)
• Photoshop Layers (Vector .PSD)
• Illustrator Layers ( Vector .Ai and .ESP)
• Illustrator Symbols (Vector .Ai)
• Fireworks Layers (Vector .PNG)
• PowerPoint 2003, 2007, 2010 (Vector Shapes)
• Keynote (Vector Shapes)
• Omnigraffle (Vector Shapes)
• Stencil for Omnigraffle (Vector Shapes)
• Balsamiq (Raster 32px x 32px transparent .png)

All the Icons can be find here …

CSS3 Fancy Box

Monday, February 13, 2012 { 6 Comments }

About two years ago I made CSS3 Action Framework and next step was to make the replica of the Fancy Box with pure CSS3, I haven't had the time to finish the project until one week ago when was "or now or never" for the project.

So what is the purpose of this project?

Modular CSS3 Fancy Box similar to original Fancy Box. By simply adding new classes to the class we should be able to control the appearance of the CSS3 Fancy Box. We should be able to control the transparency of the border, animation entry, rounded corners etc.

Example: If we have class="show fancybox rounded transparent-border" we will have rounded corner box with transparent border.

The event is triggered by :target selector showing the previously hidden HTML element (display:none) when we click the close button we put the box to its previous hidden state.

The best part is it is only 1,5Kb of CSS3. No images (even the close button is made with CSS3). Also there is no single line of javaScript.

The original Fancy Box weights about 100 kb + JQuery V.S 1.5 Kb of CSS3.
My aim wasn't to compete with the Original Fancy Box but to show what can be done with little CSS3.

It works in all modern browsers. It doesn't work in IE 9.

Demo1

Demo2

Download this project on GitHub

Naturally this method comes with lot of limits like doesn't support Ajax calls or can't dynamically determine position of the new Box. But can be use like a simple solution in some cases. Try to understand how the CSS code works, don't be afraid to play with CSS source code and personalize the CSS code for your needs.

Hand Drawn UI Kit

Wednesday, February 01, 2012 { 2 Comments }

I'm fan of Matt Gentile work with various UI Photoshop Kit specially I liked the Modern UI Kit and with Matt permission I decided to Rebound on Dribbble. I took all the elements from the Modern UI Kit and I made Hand Drawn UI Kit for Photoshop. Every element is hand drawn raster layer in Photoshop. I used Bamboo wacom tablets for designing the elements.

Here is the Kit:



You can download Hand Drawn UI Kit .PSD file here ..

I hope you will find this Kit useful.

Some useful scripts for Photoshop Layer Manipulation

Tuesday, January 24, 2012 { 1 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.