PS 08 - How to Link/Unlink Slices

Optimizing multiple slices can be done with linking slices together. If you are going to have same optimization for all the slices, you can link them together instead of selecting each and every one separately. You can select one of the linked slice and assigning a format will share the same format for all the linked slices.

Linking is for image optimization only, it does not affect the slice behavior (layer based slice / user based slice). But, un-linking auto slice will promote to user based slice.

Linking slices together will display a link symbol next to the number sequence, by default all the auto slices are linked.

Learn more about symbol names and its behaviors >> Essentials for Slice Select Tool - II

(fig 1.0)

To link the slices, go to ´Save for Web´ dialog box (File > Save for Web) and select the slices you want to link. (fig 1.1) i have selected slice 03, 13 and 07 (hold ´Shift´ when selecting multiple slices).

After selecting the slices, go to ´Optimize Menu´ and select ´Link Slices´(fig 1.1 - 2). This option (´Link Slices´) activates only if you select more than one slices.

(fig 1.1)

You can see the links in the selected slices, which also display color for easy viewing. Inside save for web dialog box you can see the linked slices with colors, but after you closed this window and go to working area (fig 1.2 - 2), you will only see the link and not the color.

(fig 1.2)

Once the slices are linked, select any one linked slice and change the format.

Here (fig 1.3) i have changed the format to WBMP, just so you can see it more clearly. Changing format for one slice will change all the other linked slices with the same format.

(WBMP is a standard optimizing image format for older mobile devices where it supports only 1bit, black and white)

(fig 1.3)

This will save a huge amount of time. Saving all the slices at once will save each and every linked slices in their own format.

(fig 1.4)

As you can see the (fig 1.5) the format change and the color are reflected only inside the save for web dialog box and not in the working area.

(fig 1.5)

By default auto slices are linked together, you can notice the link symbol next to the number sequence, you can also unlink any one of the auto slice from others or select multiple slices by holding the shift key and unlink them. Anytime you unlink any one of the auto slice will get promoted to User based slice.

You can learn more about how slices works >> Essentials for Slice Select Tool I

(fig 2.0)

To unlink the auto slice, go to save for web dialog box and select the slice you want. I have selected the auto slices in-between the blue boxes (fig 2.1 - 1), and go to optimize menu and select ´Unlink Slices´ from the menu.

(fig 2.1)

Not only it unlinks all the selected auto slices, but it also promote to user based slice. Once promoted, these slices are no longer an auto-slice.

In the Essentials for Slice Select Tool III you can learn many ways to unlink auto slices.

(fig 2.2)

You can also remove the promoted auto slices, just select the slices and press delete. Deleting the promoted slice will bring back the auto slice. But you cannot delete any user based slice which created with slice tool and expecting it to promote to auto slice.

Try it out

- Select any auto slice
- Go to ´Optimize menu´ inside save for web dialog box and select ´Unlink Slices´ (this option is available even if you select one slice)
- Press ´Done´ to close save for web dialog box.
- Select the same slice in the working area, you will see the handles.
- Press 'Delete'

 (fig 2.3)

If you are interested you can buy this keyboard [here]

Deleting the promoted slice will bring back to auto-slice and also retains the same number sequence and links. Please note this works only on auto slices only.

(fig 2.4)

Lets see how to unlink all slices at once, we have couple of linked User based slice and Layer based slice along with auto-slices here.

(fig 3.0)

Even without selecting any slice, you can go to optimize menu and select 'Unlink All Slices'(fig 3.1 - 1). All the linked slices will be released (fig 3.1 - 2).

Note, this works only if you have any link on user based slice or layer based slice. This won't work on auto slice even if you select them. If you want to unlink auto slices, you have to use 'Unlink Slices' from the options.

(fig 3.1)

Linking slices is very useful when you want to share one image format for a set of graphics.

You can Link, Unlink Slices, or Unlink all Slices to any of the slices, but these options is available only inside 'Save for Web' dialog box. If you are saving your image through save for web dialog box, there are some limitations in the image format.

If you want to learn more about slice tool you can go here >> Essentials for Slice Tool

Markerboard: Early Concept Design

They say its better to put your concept on the paper than on software. It is so true, because of the complexity and the development stage, ideas keep changing and it is easy to change the ideas on the paper than re-working on the software.

Markerboard is Completely FREE! and its available in the App Store:

http://itunes.apple.com/us/app/markerboard-app/id549875791?mt=8

Markerboard concept was started on march, roughly. Close to the month end i got a better picture of the UI and its features, because of the simplicity i need to think over and over till it comes to the stage where i can start my sketch on paper. I prefer taking notes whenever i get some new points, if iam traveling i use the phone or if iam at home i write it on the markerboard (the real one on the wall (that's how this app concept started)).

Its hard for me to have a completely structure in mind before i start the work. Generally, i get the concept then i put it on paper, very roughly. Sometimes it will be very detail or very loose. Then i start the process of nailing it down one by one and see what works and what doesn't.

Then i make the design in photoshop, just to get a look and feel of the app. I prefer going back and forth (paper to photoshop back to paper) till i get a very clear picture of the design. You can see some of the initial design that went behind the markerboard app.

Most of the features you see here are on the final app. so i'll just walk you through the process of how i got some of the ideas.

The concept came from the real markerboard, since i wanted to imitate the real look and feel, some good about of time were given on the design work. The main tool markerboard have is the Pen and the Eraser. So i wanted to give the same feel on the app, in that way the user can relates the real life markerboard in a small size.

Changing the brush size was tricky, even though it is not much effort go to the brush panel and adjust the brush size, but i wanted to give some other way where you can adjust the brush size without going to the brush panel.

I don't know if it is going to work or not, but i just wanted to try. So i came up with this concept of swiping it down to reduce the size and swipe it up to increase. To avoid confusion there's a glow which appears behind the brush tip when you adjust the brush size.

History brush was later fix-up. Instead of going to the brush panel and keep changing the brush size, what if the user can select the previously used brush, because that saves time of adjusting the brush size again.

If you are drawing something you will be very particular of the size of the brush and sometimes you prefer some lines to the thinner and some to be thicker. With the history brush, you can go back to your previously used three brushes.

Since the marker pen have an option of adjusting the brush size without going to the brush panel, i wanted to give the same feature to the eraser. To access eraser panel you need to change the toggle switch from marker to eraser.

Eraser also has its own brush panel, which doesn't collide with the markerpen's brush panel. Because when you are drawing you always want both your brush and the eraser to be in different size, and the history brush on the eraser panel acts.

There are some features that are not included in this current ver, we are tying our best to give an update in the near future.

Another thing i was concerned was how to change the marker color. I don't want to add any new buttons to display just two colors and i don't want to display the color swatches on the board, which will disturb the UI.

The funny thing is, while i was wondering,  i had the marker pen on the table, and i kept on rolling it back and forth under my finger, then i just looked at the pen and thought how about giving the roll action to change colors then came the idea of rolling pen.

So when you roll the pen, the color change from black to red and you roll again it again goes back to black. The only thing i had to change was the stripes on the marker, everything was symmetric the initial design had vertical lines, so you don't notice the roll. Then the stripes were changed to diagonal to make the rolling visible.

Not everybody is comfortable of rolling the pen so i had to give the option of tapping the pen, which change the color instantly. The option can be adjusted from the 'Options Panel'.

It was a good experience while making this app, and it gives me less effort when i was discussing with the developer.

I strongly believe you should have the complete blueprint of your work before you discuss with the developer. It is not only for app design but for all the other designs, because it will save a huge time in the later stage.

Markerboard on App Store: 

http://itunes.apple.com/us/app/markerboard-app/id549875791?mt=8

Markerboard Website: 

http://sanjeevbeekeeper.com/apps/

Making of the Website:

 http://www.beekeepersblog.com/2012/08/making-of-markerboard-website.html

Prototype Video: 

http://www.beekeepersblog.com/2012/08/markerboard-app-prototype-video-ver-10.html

If you Like, Pay the Designer!!, If you Don't Like, Don't Pay!!

 

I really appreciate quality work, doesn't matter how long it takes to do, all it matter is the final output, with that said, i recently came across this site (Link Below), beautiful retina iphone 4 template for designers, which is helping me to build my mobile website mockup so easily. I though why not pay them, and i went and did. Felt good!!

If you like them Pay, if you do not like the design Don't pay!! The design is absolutely FREE*. Complete Photoshop file (PSD) for anyone who wants iPhone 4 template, for games, website or anyother mockups design, but not to use these designs on your website or to sell.

Template Download Link: iPhone 4 GUI (Rectina Display)
Payment Link: Pay Whatcha' Like!!