I thought I would post a download link for my user group presentation on dynamic SVGs. In the download, I’ve included source code, Illustrator files, and presentation slides.
I’ll have to post an extensive description of what is going on in these samples. It’s probably going to be several posts. I’ve been unhappy with a lot of the samples I have seen out there for SVG. I’ve collected some good samples, that still work (most do NOT work, because they are too old), and some of my own. These samples show a variety of methods to achieve similar results, using different combinations of SVG, CSS, and Javascript.
CSS Hat is a Photoshop plugin that does something wonderful. It takes effects from a layer, and converts them to CSS3. If you are a Photoshop person, who never does web, why would you care? Because you probably have to give images to someone actually doing the web site. Because you’ve probably been asked to skin components, like buttons. Because it has to look good on mobile devices, especially an iPad. You need to take a serious look at CSS Hat.
The typical workflow is to create raster images, and someone else does some CSS magic (hopefully). Now imagine doing those things, only they are scalable, without needing an SVG, and they are rendered with CSS3, that you provide, but didn’t write. This is CSS Hat. There are no image file links to mess up. The browser is rendering cached CSS, rather than cached images. So, you have speed, less file management, and when people touch/zoom your page, everything looks nice and crisp. That’s a better mousetrap.
Playing with the basics
After installing on my CS6, I decided to start playing with primitives, basic vector shapes. I created a single layer with a lazy circle, and added a simple drop shadow effect on the layer. It’s important to note that while the default blending is set to multiply, I needed to change it to normal. If you have effects that aren’t supported, the CSS Hat code window will tell you. You can add Mozilla, height/width, and also name the CSS class as your layer name. Very nice. The result is the shape and it’s shadow effect in pure CSS3!
I love the Copy to Clipboard button in the plugin. Jumping into Dreamweaver (or any web editor of your choice), I made a simple html file with a <div>, and a class. For time’s sake, I just added the style in the header. And voila! I had my shape and my shadow, no images.
There are a number of effects that are supported, though not all (no surprise). I was able to successfully combine multiple effects, including some crazy gradient overlays too gaudy to post. The point is that I had the power to use my Photoshop imagination, and transfer it to pure CSS. That’s a really big deal. This took very little time.
Support
Being a developer, I can do some crazy things even a designer would’t necessarily try, like using inner and outer stroke effects, as opposed to changing the primitive property. Why? Because all those properties will not get converted to CSS. The plugin works on the effects. Software is not a perfect thing, and sometimes there are bugs. I found some, but nothing to remotely dampen my enthusiasm. As a Photoshop user, you know there are many ways to do an effect, and I was able to work around things. I also know I can use multiple layers in html, just as I can in Photoshop.
So I sent some sample files to support, because it’s always good to help the developers out. This also allows me to gauge the support response. I’m happy to say it was right away, and some fixes are coming. I’m really happy with their response, very knowledgeable and enthusiastic. A great sign.
Conclusion
Any Photoshop designer who does anything for the web should have this plugin. It’s a mere $19.99, and worth it. I was surprised at how well it worked. It exceeded my expectations. I’ve shown a number of colleagues, and we agree that Adobe should have done this for CS6. It’s useful, simple to understand and quick to implement. We were all impressed. If you’re still using images of shapes, effects, gradients, you need to stop it. You need to embrace CSS. CSS Hat is a real winner. It’s going to make your web pages better, and it is super easy. I highly recommend it.
I purchased a copy of PaintCode from the Mac Store in March, and have used it in a real production environment. Namely, make resolution-independent images quickly, vector-based, so they look crisp on both Retina and non-retina displays. PaintCode appeared to be a great time-saver. I am happy to say that PaintCode was wildly successful in this regard. Here’s what I experienced.
I started with version 1.0. At the time, there was no support for ARC, which meant that I had to make some adjustments, using __bridge. I sent an email to PixelCut, and got an immediate response, with direct answers to my questions, a promise for ARC, and even a sample. During that time I had already started slapping the code into a storyboard, and liked an addition class in a PaintCode sample I found from David Keegan, which created UIImages with drawing blocks. His solution was small and elegant.
I was able to use the code to create images that I assigned to button states, and various animations. This was easy, and I was very aware of the hours PaintCode had saved me. It’s not going to automatically expand it’s size for you, so you may have to go back in and click Expand/Contract to get the right sizing. If your image is inside something like a CALayer, where sizing is dynamic, you manipulate the layer, and it will expand as you expect.
The feature page from the web site spends a lot of time explaining how to use the drawing tools. This is fairly easy to understand, even if you’re not a designer. As someone who already knows how to use Adobe Illustrator, any designer would find this very simple. Many developers will find it new and moderately challenging. So, they have struck the correct balance, because their audience is likely to be developers. The app is priced for what it is: it’s not a cheap tool, and it’s not a major suite tool, it’s a serious utility.
As for the phrase “The missing bridge between programmers and graphic designers,” every time I think something can bridge the gap, I’m proved wrong. It might be more appropriate to say “For those times when your designer is AWOL and is ignoring you and your deadlines.” Just a reality check. Or perhaps, “When you aren’t going to have a designer, and you have to do you own graphics.” The tutorials seem to have this scenario covered.
The Bezier tool is quite handy, although you have to know to right-click to get handles for curvatures. There are boolean operations on selected objects, which is very handy. Gradients have a finite number of steps to them when you look at the generated code. Fortunately, you have a good enough clue on how to increase this to more steps. However, if you need a ridiculous number of steps, you’re better off looking at Illustrator and SVG exporting. I’d recommend SVGKit for that.
Conclusion
I have to say I’m impressed with PixelCut. PaintCode is a fantastic product, and hits a nice niche. The app is now at version 1.01, and it has ARC support built in, just as their email had promised. I’ve used it in a production app, and I’m sure I will use it again. That’s the sign of a useful tool. PaintCode is certainly that. I highly recommend it!
Thanks to everyone who came to last night’s presentation. I’m posting a PDF of my Keynote slides. The screenshots are of CS 5.5, and show how to create a floor of particles, and a twisting energy vortex. Enjoy!
In preparation for a project at work, and a presentation for the local CocoaHeads, I decided to dive in on the new AV Foundation implementation in iOS 5. Most of what I concentrated on was understanding the Rosywriter demo from WWDC. There were a few things I wanted to do very differently from the sample:
Apply this to a storyboard, and get rid of that repulsive toolbar
Use ARC
Remove the pixel color processing, while keeping the CALayer for the display in the view
Make the video orientation for landscape, like a normal person would. (Portrait video? Seriously?)
I’m posting the Keynote slides and the Xcode project. Here’s a PDF version for the Keynote-challenged.
Some things to remember about using some of the Apple code in your project:
Make sure your frameworks have been added to your project
Remember to add files like fragment and vertex shader files in your Build Phase under Copy Bundle Resources
Every day, I drive past the new Adobe building by Lehi and the “Point of the Mountain.” With such a mild winter, the timing could not be better. Some of the worst weather I’ve ever seen in Utah is right there. I just had to take some pictures, even though I’m no photographer. It’s nice to see something positive, and a place for jobs here in the US, and I for one appreciate what Adobe is doing here. I’ll take more when it’s done.
My task was to have some image resources in my iOS application bundle, and copy them into my Documents folder for use later, namely HTML5 code generation. I had a big problem, in that the image sizes were all wrong. When I’d download the package contents from Organizer, and look at then in Finder, the images looked simply transparent. They looked fine in the Xcode project, so what happened?
Normally, images, particularly PNG images, are used for GUI elements, not as assets for use later, like uploading to a server. Xcode build settings use a utility called pngcrush to squeeze a touch more file size out of them. This is the default. To fix this, you go into your Build Settings, the Packaging section and change Compress PNG Files to NO. Now the files do not get crushed, and they keep their original form.
I have Lion, and for some strange reason, my Trash was now annoying me to enter my admin password to do it. Crazy. So I tried some things I searched on, no luck. Finally found a post that worked, and was fairly simple. Somehow, my Trash ownership got switched to root, instead of my user. Here’s how to fix it.
I have to start by apologizing for turning off comments for a while. In the last two days, I’ve been slammed with over 800 spamming comments to my articles. Yes, it’s annoying, and at first I was attempting to build up a clever list of spammy words to trim the spam out. Then I realized I was wasting my life putting that much effort into it. I’m was not willing to play the game, even a little bit. I felt better right away.
Think about it. What is the point in expending a bunch of effort, because of something someone else has set up, for their own purposes, where your benefit is nothing? There has to be a reward somewhere, for yourself, or for someone else. Just following the other sheep or performing to the status quo does not come free. You expended energy.
It’s even worse if you expend money and time. Window PC repair comes to mind as a perfect example. The entire anti-virus industry is built on this most base and despicable display of wasting people’s lives. One solution: buy a Mac instead. Since “the switch” almost four years ago, the number of viruses we’ve had to deal with? Zero. That’s not hype, or slick marketing talking, it is quite simply a fact, and it is not up for dispute. And if you are stupid enough to manually launch a virus from a Mac, you are a sheep with the exact problem I’m describing.
If you are in a job where your purpose is to create these games, you are a complete waste of space. If you are clever enough to spam people, you should be clever enough to do something useful with your life. In an odd way, if someone is simply an identity thief, while destructive, it’s not surprising, because there is a point. But a spammer is a bandit that forces you to sit through commercials. They’ve stolen your time. Why is that?
Simple. A business started this chain of nonsense. Instead of casually showing their goods at the side of the road, they create a roadblock bandit, pointing to the gods at the side of the road. And there is a line of 800+ bandits to go through. So much for the myth of the efficiency of unbridled capitalism. Still not convinced, think about health insurance for a minute, and if that’s getting better and more efficient. Greed is not always good, and is often very destructive. The root of spamming is greed. Whatever it takes, the ends justify the means.
I submit that it’s up to all of us as individuals to determine if we allow someone else’s greed to waste our lives. So take a moment to pause throughout your day, and decide, am I doing something important right now, or am I walking with the sheep. If your gut is saying you’re not happy, it’s likely you’re wasting your time. Simply stop and walk away. It’s really okay.
