Easily Convert Photoshop Layer Styles to CSS3 with CSS Hat



Saw this today but I found it highly interesting! CSS Hat is a Photoshop plugin that has found a way to convert layer styles and create CSS that you can copy, paste and save the time of guessing or tinkering! Right now it’s $19.99 through their website!

We built CSS Hat to support all common vendor prefixes - radial transparent gradient for Firefox? No problem! We even generate SVG for IE9. CSS Hat also takes measurements and detects rounded corners on vector shapes – so you can be sure to get the exact same thing in browser. Strokes, shadows, glows? We render them all, just check out the sample kit.



And from what their Live Demos show it actually works and I’m fairly impressed! I’ve seen other great apps for CSS3 like Espresso by MacRabbit (my weapon of choice when it comes to code editing) and Gradient by Jumpzero which simplifies the process of making… well… gradients, but CSS Hat is setting the bar higher for tools of this sort.

I’d buy it but right now I have to get a summer job, hopefully a paid internship focused around design or web design, wish me luck and I hope this was an interesting find to you as it was for me!
Edit! I actually did go out and buy it after all so I’ll have some fun with this ;3

The Good, The Bad, and The jQuery Photo Galleries

Whether it is your professional portfolio for your job search or your family vacation album we all have a use for creating galleries on the web that can be shared and enjoyed with ease. There are different ways to go about choosing what gallery is right for your images but sometimes just any image gallery will make or break peoples’ first impressions of you. To me there are preferences I find are more enjoyable to browse visual content with and while I have to write a paper on this topic I’m fine sharing it anyways.


What Are Good Elements of a Photo Gallery?

I brought with me examples of particular aspects that are successful and unsuccessful but it would be irrational to say one design is perfect. I easily go through information over-load every day of my life (My rss feed this morning alone has 318 unread posts from 2AM) and when I want to look through all of this content I want to look at it, as well as understand it, as quickly as possible. Beating the clutter and getting straight to the primary content of the page is very important; sometimes the only reason why someone is visiting your website could be just to look at your gallery. A common practice with web comic artists is that their latest content post must be on the first page the user sees. If someone has to jump a few links to finally get to what they are looking for they will frankly loose interest fast enough that they might not even reach the gallery inside a tree of navigation. At the same time when people are at the gallery they will want full control as to where they are and the sense of complete freedom to navigate.

The Good



Shadowbox.js
Shadowbox.js is a good common tool for web galleries in a few ways. Viewing the images are as simple as a single click and exiting the image is intuitive by just clicking anywhere out of the image. The animation is dynamic but not too slow to distract the fact that it is only a transition effect. An extra plus that I saw in this choice is that this supports a wide range of media like Youtube, Quicktime, Flash, pop-up HTML and more. Considering I am a New Media Design major, I will need to be able to display more than just static images. My only problem is that this is not much of a gallery as it is an effect. You have to mark up where all of the images are which might seem like an extra step of work. Whether it is worth it though is up to you.




TN3 Gallery
TN3 Gallery is seamlessly integrated into the demo’s web design. Depending on the design of your own website this may work well too. I like galleries that do not take control away from the user by automatically playing and deciding how long you can look at something. The option is still available but it doesn’t force slideshows as a default. I personally think the transitions make a cool effect that compliments rather than being overly-cheesy. Web admins are also able to customize the appearance, features, and even grouping of albums which would be great to showcasing multiple views of a product or project.



The Bad



Galleriffic
Galleriffic makes the images second priority to everything else, including the list of files which lacks thumbnails. Some of this developer’s other examples work much better but for this example it is a poor kind of minimal, rather than being as beautiful as possible with the least amount of visuals this presentation just looks bare-boned. Not to mention that this separates its self from the rest of the website unless you put a lot of customization work into it.




Supersized
Supersized completely takes you away from the page you might be currently on and places you somewhere else while removing ease of control from the user to navigate back to where they were. This forces an amount of time that the viewer can look at an image which is a huge killjoy if you are still thinking about how beautiful some of the details of an artwork are and then only see part of it. This is probably not a good idea for a lot of pictures and unless you uploaded a large image that takes a while to load the full-screen will reduce the quality of your images. The only thing I’d dislike more about this is if it was flash. No one should use flash anymore, we are trying to travel off from the mandatory plug-in era.


Hoped this was informational and helpful to you!
Andrew Lindstrom: Strong, Healthy Web Design

Kind of close to, what I think, an e-business card might look like. It is missing a lot of contact information though because this is really more of a personal portfolio site instead. Some key things I like is that the purpose of this site is clear on what it’s about and the largest focus is the designer himself. The beautiful logo pulls me in and effects like hover make sense when the user wants to discover more information about something by moving their mouse to it.