Sunday, February 21, 2010
Create a Clean and Professional Web Design in Photoshop
"In this Photoshop web design tutorial we are going to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design."
How to Build a Custom Wordpress Theme from Scratch
"If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom Wordpress theme. This overview shows the process of how my latest custom Wordpress theme was built from design concept through to completed theme. See how the static design is split up into the various Wordpress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog."
Abduzeedo 2010 Logo Design
"Every new year I like to try new things with the Abduzeedo logo. In 2009 I changed the typography a little bit, but now that it's 2010 I decided that the blog needed a symbol. That necessity came up when we are finishing the Abduzeedo iPhone app and we needed to have an icon."
Saturday, February 13, 2010
The future of CSS is exciting with all the new techniques coming our way in CSS3. Though CSS3 is not yet fully supported in all popular browsers there are some browser specific prefixes that are supported in such leading browsers as Firefox, Chrome, and Safari. Because CSS3 is not fully supported yet we have to use the following extensions:
- -moz- for Mozilla/Firefox
- -webkit- for browsers running on Webkit (Safari/Chrome)
So let's look at a few CSS3 techniques that I use on this site that can be used in today's leading browsers that degrade well in the non-supported browsers (Internet Explorer).
Rounded Corners
Having rounded corners in your designs has always been possible using graphics. An easier way is to let CSS do it for you. If you look at my site you will see a few rounded corners here and there such as on the background of the sidebar to the right. I'm using both the Mozilla and Webkit specific styles to make that happen. First you write the specific prefixes for both mozilla and webkit browsers then you add the radius value for the corners. If all corners have the same radius then you can simply write:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
To add a different radius value to each corner you will first need to add the specific prefix for each corner and then add the radius value.
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
Text Shadows
The drop shadow effect is one of the CSS3 properties that is actually supported in all the leading browsers except, you guessed it, Internet Explorer. The first 2 values are the X and Y coordinates. The next value is the blur radius of the text-shadow. And the last value is the color of the text-shadow. This effect can be seen at the top of my site on the large blue text.
text-shadow: 1px 2px 2px #000;
In a future post I will show more CSS3 techniques that can be used in today's leading browsers.
Friday, February 12, 2010
Today Google updated Chrome beta for the Mac adding support for extensions. One of the big reasons I use Firefox is for its extensions. As a web designer I use many useful Firefox extensions on a daily basis such as the Web Developer, Firebug, and Colorzilla extensions to name a few.
Out of curiosity I checked the Chrome extension library and found there were quite a few developer tools available.
- Firebug Lite - It's not a replacement for Firebug but still a very useful extension with many of the useful tools found in Firebug.
- Pendule - Not only does this extension have many of the tools found in Firefox's popular Web Developer extension it also has many extras such as a color picker.
With Chrome now supporting extensions (Firebug lite, Pendule) I feel I can now give Chrome a try as a full-time browser. It is a speedy browser and seems to run Javascript faster than the other leading browsers. I think I will start using it this week and see how it goes.
Monday, February 08, 2010
About 7 months ago a friend and I made a somewhat pact that we would try to see a show at least once a month. So far we have done what we set out to do. When you are married with small kids, finding time to go out with the guys can be hard. The one show a month pact is our way of getting out and keeping sane.
Friday we saw Girls at The Earl. The opening bands were Smith Westerns and The Magic Kids. It was a great line-up and show.
I'm looking forward to the Surfer Blood show next week at the Drunken Unicorn. And it is looking like I will get to see my long time favorite band, Wilco, next month.
I guess the one show a month pact has turned into two shows a month for February. I can't complain.
Sorry for all the myspace links. Those bands don't seem to have their own sites.
Friday, February 05, 2010
I have finally made a much needed redesign to my site. My old design was nice but it was starting to look dated. Plus the content (portfolio) needed updating.
Along with a new portfolio page I have added this journal. I'm not sure what I plan to write here but I have some ideas. Maybe some useful links, Photoshop/Illustrator/web design tutorials, etc...
I am using Expression Engine on the back-end and am still coding some of the journal pages so you may find a few quirks while navigating. I should have it done in the next few weeks.
Page 1 of 1 pages
