Awesome Eyes in Photoshop
Easily use Photoshop to change the color of someone’s eye!
23 Essential HTML 5 Resources
Everyone is excited about the possibilities of HTML 5, but there’s a lot to learn and absorb as well. With that in mind, we’ve compiled a list of articles to get you started!
- Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
- Wikipedia: HTML 5 – A basic overview from Wikipedia
- HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
- HTML 5 Demos – A great set of demos. Just view the source to see how they work.
- HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
- HTML 5 Gallery – See what’s possible with HTML 5
- HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
- HTML 5 Doctor – A great general resource on HTML 5
- Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
- Video elements – A useful article from HTML 5 Doctor on the Video element
- Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
- How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
- HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
- Semantics in HTML 5 – An opinion piece from A List Apart
- Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
- HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
- A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
- The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
- HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
- Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
- Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
- When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
- Comparison of layout engines (HTML 5) – A good resource from Wikipedia
Why I skip Photoshop
When designing a UI I usually go right from a quick paper sketch to HTML/CSS. I skip the static Photoshop mockup.
Here are a few reasons why we skip photoshop:
- You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your screen it should work. You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/CSS, on the other hand, is the real experience.
- Photoshop gives you too many tools to focus on the details. When you use Photoshop you can’t help but pay attention to the details. The alignment, the specific colors, the exact shapes, the little details that may matter eventually but they certainly don’t matter now. The start is about the substance, not about the details.
- The text in Photoshop is not the text on the web. Once you’re looking at a static Photoshop mockup you can’t quickly change the text without going back into Photoshop, changing the text, saving the file, exporting it as a gif/png/jpg, etc. You can’t post it online and tell someone to “reload in 5 seconds” like you can when you quickly edit HTML. You have to say “Give me a few minutes…”. Also, type in Photoshop never seems to be the right size as type in HTML. It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.
- Photoshop puts the focus on production, not productivity. Photoshop is about building something to look at, but about building something you can use. When you’re just worried about how it’s going to look, you spend too much time on production value. HTML/CSS lets you be productive. You’re constantly moving forward towards something more and more real with every change.
- Photoshop is repeating yourself. Ok, so you’ve spent 3 days on a mockup in Photoshop. Now what? Now I have to make it all over again in HTML/CSS. Wasted time. Just build it in HTML/CSS and spend that extra time iterating, not rebuilding. If you’re not fast enough in HTML/CSS, then spend the time learning how to create in HTML/CSS faster. It’s time well spent.
- Photoshop isn’t collaboration friendly. I sorta touched on this before, but let me hit this point again: HTML/CSS lets you make a change, save, and reload. That’s our collaboration flow. “Here, let me change this. Reload.” These changes take seconds. “Here, let me float this left instead of right. Reload.” Seconds. No selecting a tool, changing a few items around manually, saving, exporting, uploading, giving people the new file name, etc. HTML/CSS is build for rapid iterative prototyping while Photoshop… isn’t.
- Photoshop is awkward. You can’t help but know your way around Photoshop after working in it for 10 years, but I still find it awkward to get simple things done. Working with a pen feels so much more natural to me than going back to the toolbar over and over. A pen can draw anything, but in Photoshop you need to use the text tool to type, the shape tool to draw a shape, the menu bar to adjust this or that, etc.
None of this is to say we think Photoshop is bad or a waste of money or time, but for us we’ve found that going straight into HTML/CSS affords us the best iterative and creative experience. HTML/CSS is real in a way Photoshop will never be.
Why hire a freelance designer?
By hiring a freelance web designer instead of a web design agency, you are hiring the talent directly, and avoid paying the project manager, the CEO, the cleaning lady and the rest of the overhead. Even if you have sufficient budget to hire an agency, there are still advantages to going with a freelancer.
As opposed to working with a web design agency, where a designer has nearly no relationship with the client, you will be able to work directly with the designer to achieve just the results you are looking for. Working with a freelance designer inevitably yields faster results, because there is only one person for the work to go through. As a web designer who has worked in both situations, I have found that my freelance projects always turn out better than those that I do through an agency.
Studiodm.net has gone green by offering you discounts?
In an effort to go green I have made my home office GREEN by incorporating a few items. Very Simple.
1. Using energy conserving low watt light bulbs
2. Turning off ceiling fans when room is not occupied (basic electric conservation)
3. Switch ALL bill recieving and payment methods from paper to electronic via email (Eco Bill)
4. Support my local produce market
5. Recycle paper and plastics
6. Created my own herb and vegetable garden (my favorite)
Coming soon…. I plan to implement solar power in my home office which will power up lights and computers. A small step which will save electric usage and put savings in my pocket as well. Oh, and the 6 methods of being green mentioned above have already made a noticable savings in my pocket. I have found conserving electric and low wattage lightbulbs is very effective. The local produce market is actually cheaper than the typical supermarket. And of course growing vegetables is longer but yet %65 cheaper than buying fresh.
How can you save? Well Studiodm is offering a discount if you’re GREEN! How? Go to my contact page, send me a line and in your message content just mention something about GREEN and I will reply with all the details!
Photoshop Tutorial: Photo Retouch
Photoshop Tutorial: Photo Retouch
Easy Tutorial. Should take 5 minutes to do!
Photoshop Tutorials – Photo To Line Drawing
Photoshop Tutorials – Photo To Line Drawing
This is a great little tutorial. Very simple and quick. Thanks!
Photoshop tutorial: Using the history brush
Photoshop tutorial: Using the history brush
Another simple tutorial but useful!
Uses History pallette. Beginners tutorial.
Website Development Services. What I can do for you.
I provide a wide range of custom web design and development solutions including:
- Custom website design
- Custom designed Blog applications
- Secure Login for protected websites
- Photo Gallery Development (static or dynamic)
- Front End application development
- Updatable Dynamic websites
- Subscription Websites
- ASP/PHP programming
- Content management systems (CMS)
- JavaScript and DHTML programming
- HTML, XHTML and CSS design
- Search Engine Optimization


Posted by studiodm in

