Method 1: Dot by dot

The dot by dot method is exactly as it sounds, grab a brush and draw your line out. Depending on your layout this could take forever and end up being less than perfect if you make a mistake. A quick way to speed up the process is by duplicating and merging the layers as you go.

Start with a blank canvas of 500×500 pixels. Go to your layers window and create a new layer. Now zoom in about 500% and create two horizontal dashes or dots with the pen tool ( b ). Once you have completed this switch to the move tool (v). Now drag your two dots while holding down the ( alt ) key, this will turn your move tool into a double arrow which means you are duplicating the layer. As you drag the layer line it up so the spacing is correct with the previous two dots. You should now have 4 dots/dashes. Once you have lined them up merge them ( command/control e ). Now repeat the whole process again, each time you will double the length of your dotted/dashed line. If you use this method, although clunky, you can created many lines very quickly and then trim them to your desired size with the marquee tool. If you need a vertical line all you have to do is rotate ( command/control t ) the layer while holding the ( shift ) key to get a perfectly straight vertical line.

Need to change the colour? No problem, select the dashed/dotted lines layer in your layers palette and click “Lock transparent pixels”. Now select your brush tool ( b ) and increase the size ( ] ) to a large enough brush to paint over the dots/dashes quickly. Select the colour you wish to use and scribble over top of your lines.

This method while not overly eloquent is often the easiest method for a quick dashed line. If you need to use many dotted/dashed lines you might want to look at one of the other methods below.

Method 2: Brush palette

The brush method is fairly fast. Create a new 500×500 pixel canvas. Open your brushes ( F5 ) palette and select the 1 px brush. Uncheck Shape Dynamices, then select Brush Tip Shape. Slide the Spacing slider to the far right and then hold shift while drawing a line. You should have a perfect dotted line.

You can mess around with the spacing and roundness options, but there is only so much you can do with the default brushes, if you use rounded brushes are will get rounded dots, which may or may not be what you want. If you need larger dashes you can create your own brush. Say you want a 10×8 dash, all you have to do is created a 10×8 square dash and crop the canvas to that size. A quick way is to trim the document in the image menu. ( Image -> Trim… and select ok ).

Once you have your brush ready go to the edit menu and define a brush. ( Edit -> Define Brush Preset… ). Name it can click ok. When you return to the brushes menu it should be selected. Now if you apply the spacing settings to this brush you should have a much thicker dashed line.

The brush method is probably one of the most robust methods for creating dotted/dashed lines in photoshop.

Method 3: Pattern palette

The pattern method is similar in some ways to the brush method. This is by far the most complex of the 3 methods, but if you plan on changing the size of dotted boxes a lot then this method is the most flexible. When I create Photoshop mockups for web, I use a lot of layer shapes for sidebars, boxes, headers and what not and constantly nudge them into place with the arrow keys and the direct selection tool. With this method you will apply a pattern via the styles to a shape layer and then work with the vector mask to only show the edges of the pattern. Once completed you will now have a dotted or dashed line that you can move and nudge with the direct selection tool as much as you like without ever worrying about recreating the dotted lines again.

For this example we will create a 1 pixel dotted line, but this will work with thicker lines too. Create a new 2×2 document, add a new layer to it and hide the background layer so the image is completely transparent. Now put one pixel in the top left corner. Your document should look like the zoomed in example to the left. If you were to create a 3 pixel dash, your document would be 6×6 with a 3 pixel black box in the top left corner.

Now go to the edit menu and define a pattern. ( Edit -> Define Pattern… ). You are ready to create your box shape now. Create a large new document ( command/control N ) to play around with. Select the rectangle tool ( u ) and create a rectangular shape.

Now select the newly created shape and reduce it’s fill to 0%. The difference between Opacity and Fill is that Fill will hide the shape but not the Blending Options that you will be applying next. You can leave this a solid colour too, but make sure it’s not the same colour as your pattern, otherwise you will not see the dotted line. Now right click your new shape layer and select Blending Options…

In the blending options click Pattern Overlay and then select your pattern in the Pattern: section. Your pattern should be the last one added. Click OK.

Now you should have a box full of 1 pixel dots. Select the shape tool again ( u ) and make sure Shape layers and Subtract from shape area are selected in the toolbar as shown below.

Now select the Vector mask of  your shape in the layers palette and draw a mask over your shape. The key here is to draw it right to the edges. You can use the Direct Selection Tool ( a ) to tweak your anchor points.

You should now have a nice box with dotted lines like the one to the right.  You can continue to use the Direct Selection Tool by selecting the entire edge of the shape to manipulate this rectangle without worrying about the borders again. If you wanted the border only on one side then you would manipulate the inner vector mask so that it covered the top, right and bottom sides of the rectangle.

Although this method is more time consuming than the first two, it’s also very powerful if you are going to have a lot of dotted or dashed boxes in several layouts. Now you can just duplicate this one over and over and resize it without worrying about re-drawing the dots/dashes. As mentioned this can also be used for straight lines, just make sure the other sides of the rectangle are masked. Remember that the pattern is the colour of your border, so if you want a different colour you need to change the pattern colour.

If you have other tips on how to achieve the same examples as above with different methods, I would love to hear about them in the comments below.

What’s the fix?

The fix is quite simple and surprising. I was figuring it would be a graphics glitch or OS setting or something along those lines. It’s not though, there is actually a setting for blurry (Anti-aliased) guides in Photoshop CS5 and it’s the default setting.

Go to Photoshop Preferences / Performance. Click Advanced Settings… located below Enable OpenGL Drawing. In the dialogue deselect Anti-alias Guides and Paths. You should now have sharp one pixel guides.

This setting was performed on the Mac version of Photoshop CS5. I don’t know if the same applies to the Windows version. If it does please post in the comments.

There is however a simple solution for this. In the layers pallet right click the smart object and instead of clicking Duplicate Layer, click “New Smart Object via Copy” and voila!

My own opinion is that it would have been smarter for Adobe to have a “New smart Object via Reference” and have the “Duplicate Layer” act as a unique layer, but maybe there’s a good reason for it being the way it is.

There are already some sneak peak videos on the Adobe Creative Suite 5 launch site, but those of you who really want to be the first in line to hear about what’s new in CS5 will have to register on the the CS5 launch site. The “exclusive global launch of Adobe Creative Suite 5″ is on Monday April 12, 2010.

Fingers are crossed for some awesome features, and a release date. That said I really hope Adobe has fixed some of the issues plaguing the Creative Suite. Some of the applications feel bloated and slow. Sometimes it’s not only about what’s new, we want rock solid apps that work as flawlessly as possible. It would also be nice if past features were never taken away.

Why Adobe … Why?

The posts mentioned above are two of the most popular on my entire blog and have received a lot of feedback. The Internet is littered with questions about this very issue and even the Adobe forums are full of angry posts. So why hasn’t Adobe done the right thing and added an import animated GIF feature that used to be there? The functionality is there since you can trick Photoshop into opening an animated GIF. I think it comes down to money and the fact that Adobe has become a monopoly in this area, especially since it bought Macromedia several years ago.

Adobe does have an official solution to this issue though.

Open the animated GIF file in Adobe Fireworks. Fireworks provides editable layers and timelines for animated GIF files.

Adobe’s official response to all this is to buy fireworks of course. Yes, buy an entire software package that you don’t need just to open animated GIFs. I love Adobe products, but this is just ridiculous especially since all everyone is asking for is a feature that was always included with Photoshop in the past. Many of us need to open an animated GIF once a year.

My suggestion is to always save all of your animated GIF source files as layered PSDs. You can quickly create and edit animated GIFs with these as often as you wish. If you do need to open GIFs without the original source files try the work around or use a 3rd party product to screen grab each frame and create a new layered PSD.

Why should I bother with Smart Objects?

You are working on a mockup for a client with several images. Each image is placed into the layout, resized and cropped as needed. Everything looks perfect and off to the client it goes. A few days later you receive feedback, “please make all the images twice the size”. If you have not used Smart Objects you now need to go and grab all the original photos and resize and crop every image again, not fun.

Here’s another scenario that’s even a bigger time waster. You hand the mockup off and someone else “Me” has to change the size of the images. I don’t know where they are located and have to not only redo all your work, but I also have to track down the original photos again.

I think I have made my point, Smart Objects are indeed a smart idea. Case in point, check out the image below.

Now figure the first photo of the cat really small was your first image. Now if this were a real world example where a client had asked you to increase the size of the cat 3 times and you had used a raster image then you would have effectively tripled the amount of work you had to do in regards to this image. For the example above I used a large photo of this cat and converted it to a smart object with a mask over top. Then a simple uniform scale up each time allowed me to zoom in without any need to re-visit the original image, since the original image is already embedded in the Smart Object.

There are many other great uses for Smart Objects too. If you double click on a Smart Object you can then work on the original. Photo retouching or cropping is a lot easier on a large image. With vectors you Smart Objects will open in Adobe Illustrator and you can touch them up here and your Photoshop document will be automatically updated.

Smart Object brush up

To create a Smart Object convert your photo image to a layer if it is not already (double click the layer). Now right click the layer and select Convert to Smart Object. That’s it, and this is why there is no excuse to have mockups loaded with resized raster images.

Tip: Add layer masks to your images. In Photoshop CS3 and under masks are not linkable to the actual Smart Object. You can work around this limitation by placing it into a Photoshop group in the layers palette and applying the mask to the group. In CS4 Smart Objects are linkable, so remember to unlink when resizing the image unless you want to resize the mask too.

About the cat

The cat in this photo was one of the coolest looking cats I have ever seen. I took it while visiting Grenada in the capital city Saint George’s. You can see more photos on my Flickr account.

Go to your Photoshop preferences (Cmd-K / Ctrl-K). Then in the left hand side select “Interface“. Scan down and uncheck “Open Documents as Tabs“. Click “OK” and things should be back to normal.

]]> http://www.ianhoar.com/2009/05/28/adobe-photoshop-cs4-disabling-document-tabs/feed/ 3 http://www.ianhoar.com/2009/04/27/adobe-photoshop-cs4-blurry-edges-with-the-rectangle-tool/ http://www.ianhoar.com/2009/04/27/adobe-photoshop-cs4-blurry-edges-with-the-rectangle-tool/#comments Tue, 28 Apr 2009 03:56:15 +0000 Ian Hoar http://www.ianhoar.com/?p=3548 I was playing around with Photoshop CS4 and came across an odd setting. I’m not even sure what the default setting usually is, but for me it was my first time dealing with non-pixel perfect blurry rectangles in Photosohp and it really threw me for a loop. Below you can see two 60 pixel boxes created with the rectangle tool. Both boxes look the same, but upon further inspection you will see that the right box has blurry edges and the left box is pixel perfect and sharp.

Here are the two boxes zoomed to 300%.

What the $#%??

This is enough to drive any web designer mad and I don’t really know what possible use the non pixel perfect box would have, but maybe that’s because I’m a web designer and I like clean straight edges and lines. Luckily this setting is super easy to turn off. Select the Rectangle tool then at the top of Photoshop click on the little arrow which will open the Geometry options for the rectangle. If you selected the Rectangle tool, you should be seeing the dialogue below.

Select the Snap to Pixels option and now you will have clean pixel perfect rectangles. This option is also available for the Rounded Rectangle tool. No more blurry edges.

Why Flash sucks — most of the time

Flash usually sucks because it is used in places where it’s not needed, breaks usability basics, or tries to deliver a rich media experience to people who don’t care. Lets face it, most of us are not coming to a site to see Flash animations, flashy enter pages and load dialogues; sure this was impressive 5 to 8 years ago, but most of us are over it now. I remember animating menus, playing with collision and elastic algorithms I found on the web and drooling at the newest Flash in the Can awards which are still pretty impressive. It was really cool and fun, and there are a lot of places where this will still fly if done right, your website may not be one of them.

Flash sites have to be better than awesome

The only flash sites that will ever hold my attention are ones that are unbelievably clever or awesome on a huge scale, and even if you qualify in both these areas you have to get your users to stay at your site long enough for it to load and initialize. The point I’m trying to make is if you are going to use flash, you better have a good reason for it, you need to be a fantastic flash guru, and it better be freaken phenomenal.

Information, content is still king on the web

People like cool screen savers, even little visual touchy feely apps are getting very popular on handhelds like the iPhone, but when people are searching the web they usually are looking for information. That information is best found in plain text. Google and most of the other search engines index plain text on your site, if it’s content people want they will most likely find your site via Google or some other search engine. Yes Adobe is working hard with search engine providers to make Flash more search engine friendly, but we are not there yet, and even when we are a lot of my reasons for not using flash will still be valid.

I remember several years ago people were talking about high speed bandwidth and how we would be able to use as many graphics and as much Flash and rich multimedia as we craved. Yet here we are and the web is more text heavy than ever. RSS feeds are gaining popularity daily, and in some cases you are seeing less graphics, not more. Why? Because content is king, and so is searchability. There is a whole package to developing a fantastic website and Geeks In Training has a great article called Developing websites — structure, content, and design that delves into this deeper, but we are going to limit ourselves to Flash here.

Flash has changed the web

There is no doubt, Flash has changed the web, and mostly for the better, but it has done it in ways no one could have imagined several years ago. It hasn’t changed how we navigate the web, it hasn’t changed the fundamental structure, or usability, although I would say it has hurt usability when used poorly.

Flash has obviously changed how most of us view video online. It’s also added rich content in what I like to call Flash modules. I define a Flash module as a tiny piece of a website that is Flash based. This could be an advertisement, a video, interactive graphs, a game or application. This is where flash really shines.

Where Flash fails

Full on Flash websites are where things get ugly. I remember visiting a then famous Flash site called Gabocorp in 1997. It blew us all away, us being any web designer / student I knew at the time. I have found an archived version of the original Gabocorp website. I remember this thing took forever to load on my Pentium 133 and chugged and stuttered away as I watched the animation in awe at 3 frames per second. It even held this bold statement:

You are about to enter a new era in website design. This is the new standard for all things to come.

Welcome to the new Gabocorp.

Go

What we have here is a splash / enter page and a Go button, both considered bad by today’s standards. I don’t want to bash this site though, at the time it was jaw dropping and completely innovative, but the web was mostly geeks back then and there was nothing on this site that came anywhere close to what we see today, it was just cool because it was a new technology used in a way we had never seen before and for no other reason. The time when things are cool just because they are Flash is long gone. Yes people are still doing amazing things with it, but for mainstream sites Flash is usually an add-on component.

This brings me back to Flash portfolios, when we look for new web developers and designers we want to see great usability, standards compliant code and an engaging site that we don’t have to sit there and figure out. As soon as you have to explain what a button does (click the cool little animated thingy and drag it to the box) you fail. You have lost me and you have definitely lost Google and the majority of search engines indexing your site. You’ve probably lost all of your less tech savvy users too.

So let get back to basics, the web is not TV, although we may watch TV on it, we expect the containing site to be usable in all the ways that we are used to. I think the topic of usability can scare off some designers, but usability in some ways is easier than design. Design is an art and it’s subjective. Having your site practice good SEO and accessibility for everyone is not subjective, it either works or does not, and you can measure this through your website analytics software.

Usability, usability, usability

Right now Flash sites do not work on iPhones and other handheld devices, if a fraction of your visitors could be coming from these devices than you effectively have zero usability on these platforms. When these devices do support flash there will still be major limitations like file size, download speeds, tiny screens and limited processor power to deal with. Good usability is also even more important on a small screen, so use Flash wisely; impress without sending all your search engine traffic away and give people the great content, applications and experience they came for. Make that experience last past the load screen.

1. Smart object mask linking

This is a seriously annoying behaviour that I would even go so far to label as a bug. Whenever you add a mask to a smart object it is not linked nor can it be. A good workaround for this is using a layer group and masking that, but really, this is redundant and shouldn’t be necessary. Masks can be linked on other layer types, why not smart objects? I describe a workaround in Photoshop Tip #1: Smart objects and layer masks.

2. Better smart object scaling

Smart objects usually scale ok, but every now and then they leave weird artifacts or just look bad, it all depends on the image being scaled. Often what I do to get around this is create a smart object, duplicate it and then rasterize the duplicate and do destructive editing on it. Then if I do need to quickly go back to the original I still have it right there in my layers. Non destructive editing all the time would still be a much better solution.

3. Slice layers or saving

This is a big one for me. Sometimes I like to put many web mockup pages in one Photoshop file. Often only small parts of it change from screen to screen and it is much easier to add new layers and groups. Often near the end of this process I will end up breaking up the groups into separate files just so I can have multiple slices. Having slice layers similar to Illustrator or some kind of saving mechanism would help enormously, especially in multiple language layouts where the slices remain the same, but the names do not.

4. Guide layers or saving

Same issue as slice saving. Sometimes you need new guides for each type of page and without being able to have guide layers or saved sets it can become messy very quickly.

5. Dashed / dotted strokes

Yes there are many workarounds for this, but real stroke settings would be nice. Right now work workarounds are; copying the dashes in quickly via duplicating your dash and merging until you have a long dashed line, or even using styles.

6. Stroke top, right, bottom, left

Often I will have to overlay shapes or use masks just to get a left and right stroke. It would be nice if the stroke options had top, right, bottom, left tick marks so you could choose the sides to stroke, much like you can with the CSS border attributes. This would obviously only work on rectangular shapes.

7. Animated GIF import returned to the way it was before CS3

If the traffic to my work around on importing an animated GIF is any indication to how missed this feature is then it should definitely be added to CS4. My most visited article is still Adobe Photoshop CS3 and no Image Ready? No animated GIFs either?. For some odd reason Adobe decided to move a lot of the Image Ready features into Photoshop before trashing Image Ready all together. One feature that was missing was the ability to import animated GIFs. The strange thing is you can still use Photoshop to create animated GIFs, you just can’t open them properly. Stranger still, the ability to import an animated GIF is still present in Photoshop, but hidden. I would love to see this rectified in CS4, but since they may be pushing fireworks for animating GIFs we may never see this feature return. It’s upsetting because the feature is present and always has been, but it has basically been removed from the UI.

Do you have a wish list, ideas, or suggestions?

Please feel free to leave feedback on any wish list items you may have. My idea’s have mostly revolved around web design features, but feel free to suggest anything I have missed.