Okay, so I’m getting to the point with CSS that I can usually design and create everything in the browser — I can’t remember the last time I sliced up a Photoshop layout and layer comped my sprites. For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas for creation. When it comes to the actual construction of the site, the only things I really take from the mockup is anything that I can’t create with CSS, the rest is just a map to guide me.

Think Differently

For years the process of designing a website using a Photoshop, Fireworks, Illustrator or any other graphics application was to mock it up, make sure everything looked perfect, then slice it up into pieces and put it back together — like a puzzle. CSS has basically made this process obsolete, you can accomplish so many things via CSS that you could only previously do in Photoshop. And with CSS3 even more things are possible.

Because designing in the browser is now more viable, it’s important to consider a few things when designing realistic mockups that will make the construction of the web site quicker and easier.

Consider:

• Realistic fonts
• Image-less Buttons
• Display size(s)
• Images
• What can be done with CSS?
• Is it possible?

Just a side note, when I talk about these considerations below I’ve added some great examples of live websites that have been built with minimal, if not any, Photoshop intervention. These examples may not directly apply to topic, but to the article as a whole.

Realistic Fonts

There is a countless number of really great fonts floating around out there on the web and we all want to make an impact or statement with some amazing font we have found. But part of web design is designing for the user and making sure all typography on the page is readable and accessible. Before designing, consider what fonts are either web safe or feasible on the web and try to avoid fonts that will be difficult to recreate through HTML/CSS/JS.

http://www.psynai.com/

Image-less Buttons

Buttons can be the bane of a developer’s existence. It’s a good idea to design buttons that can be created using CSS or Javascript. There are a lot of benefits for this: live text, adaptable buttons, no images to load, no more button sprites and no more size specific background images to mess with. Image-less buttons can save huge amounts of time in development, so before you create some super fantastic button in Photoshop consider whether its super fantastical design can be achieved in CSS, if so go for it, if not, buy your developer a couple of large pizzas and a case of Red Bull.

http://eighthourday.com/

Display Size(s)

With so many different sizes of displays from 320×480 to 2560×1440 you’ll need to consider how you are gonna figure out how your design will be rendered in many different sizes. Responsive design is a tricky beast so to simplify the process of design, ask yourself these questions before you begin:

• Who’s the audience, are they mobile?
• Is the content centered or left justified?
• Will it need to be responsive?

Not all sites will be used for smaller mobile devices, but it’s a great idea to consider how the site will represented in the standard 1024×720 all the way up to 2560×1440, and you may even need consider how your design will be viewed both horizontally and vertically. But the most important thing to remember is that the design needs to be feasible for the web — avoid horizontal scroll bars!

http://pcnw.org/

Images

No more slices and no more puzzle pieces. With any standard web site the only real images you need are a logo image, maybe a repeated background image for texture and any inline content images. In most cases, anything that used to require an image slice now can be created with CSS. CSS gradients, rounded corners, transformations, and a countless number of other CSS selectors can be used to recreate these types of images.

http://www.bountybev.com/home.html

Can it be done with CSS?

As you are joyfully creating a masterpiece in Photoshop, just ask yourself if all of the elements can be created with CSS. CSS is a very powerful tool and surprisingly, most design elements that are created in Photoshop can be easily replicated using it. Before you start cutting out images, buttons, rules, or anything else out of your design try to figure out if you can create them in CSS first. This can make development so much easier and more dynamic in the long run. Some elements in your design may never be able to be recreated with CSS so try to keep these elements to a minimum.

http://vijufest.ru/

Is it possible?

Don’t design some super huge, intricate background image that needs to be sliced in forty different pieces just to be able to load quickly. Don’t design a site that is 1280 pixels wide. Don’t design a site that is not feasible for the web. Get familiar with display sizes, image limitations, file limitations and just general limitations of the web.

The web is a pretty open and flexible place and you can pretty much create anything you want, but there are some natural restrictions that you need to consider before you start designing. Just make sure you’re not trying to create something that can’t be built. If you don’t know what development limitations there are it’s a good idea to code up a site every once in while so that you can get familiar with what can and can’t be done on the web. My personal belief is that every web designer should be able to code up the HTML/CSS of their designs.

http://benthebodyguard.com/index2.php

You can always change it

One huge thing to consider when designing for the web is that you can always change it. The web is super easy to update, you’re essentially only an upload away from chaining anything about your design. Don’t spend so much time sitting in front of Photoshop trying to perfect the design. Consider the web as an editable canvas, it’s not rigid like print design where you have to make sure everything is pixel perfect when you send it off to the printers.

The bottom line is that you are designing for the web. In as much as we think print design is the same as web design — it’s not. It has its own set of problems and its own set of limitations so its best to get familiar with them and get familiar with what can be accomplished via HTML/CSS/Javascript code. And just for giggles, try designing a building a website without ever opening Photoshop, I think you will be surprised at what can be accomplished when designed solely in the browser.

In this Photoshop tutorial we will show you how to create nice unique photo effect from sketch and your photo.

Source

http://www.psdeluxe.com/tutorials/photo-effects-tutorials/mix-hand-drawing-sketch-with-photo/

For our last post Cody asked me to create these two glossy icons for the jFeedback jQuery plugin. We thought, we could post the icons as well with the Photoshop file because you might want to change the color or the symbol.

So, here they are, two incredibly awesome glossy icons :-) “open source”, of course.

Here you can download the ZIP file with the psd Photoshop file and the set of four png icons (256 x 256):

jFeedback Icon Set

Enjoy!

Here is the result of my experiment with some example banners (click on the image to see the demo page):

Click on this image to see a demo

You can download the ZIP file with all the images here: CSS3 Banners ZIP

The main idea is to create an image using the Urban Scrawl Photoshop brushes and to put it as the logo of the banner.

The CSS is built up like this:

h1{
padding-top: 10px;
font-size: 36px;
padding:0px;
margin: 0px;
line-height:100px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
width:310px;
float:left;
}
.slogan{
float: right;
margin:75px 20px 0px 0px;
font-size: 20px;
}

Here we define the heading and the slogan of the banner. In the next class we define the general banner layout:

.banner{
width:620px;
height: 100px;
margin:7px auto;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding-left:190px;
}

And now, we define each individual banner, by changing the background image, which is the logo, the font color and the font-family:

.banner0{
background: #656964 url(banner0.png) no-repeat center left;
}
.banner1{
color:#37535B;
background: #31B3DA url(banner1.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner2{
color:#656A64;
background: #81C573 url(banner2.png) no-repeat center left;
font-family: "Palatino Linotype";
}
.banner3{
color:#37535B;
background: #656964 url(banner3.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner4{
color:#2B8EAC;
background: #656964 url(banner4.png) no-repeat center left;
font-family: "Century Gothic";
}
.banner5{
color:#37535B;
background: #C6CC10 url(banner5.png) no-repeat center left;
font-family: "Trebuchet MS";
}
.banner6{
color:#37535B;
background: #b8d8fb url(banner6.png) no-repeat center left;
font-family: "Arial Narrow";
text-transform: uppercase;
letter-spacing: 4px;
}
.banner7{
color:#6e9cf9;
background: #a08c60 url(banner7.png) no-repeat center left;
font-family: "Arial Narrow";
font-style: italic;
}

The html looks like this:

 <div class="banner banner0"></div>
 <div class="banner banner3"></div>
 <div class="banner banner1">
  <h1>Sweet City</h1>
  <div class="slogan">there's a lot to discover in your town</div>
 </div>
 <div class="banner banner2">
  <h1>Automobile</h1>
  <div class="slogan">The true fan club</div>
 </div>
 <div class="banner banner4">
  <h1>Arrow Shmallow</h1>
  <div class="slogan">Best Services</div>
 </div>
 <div class="banner banner5">
  <h1>Radio Header</h1>
  <div class="slogan">Listen to the music!</div>
 </div>
 <div class="banner banner6">
  <h1>Energizer</h1>
  <div class="slogan">The Smarter Power</div>
 </div>
 <div class="banner banner7">
  <h1>Brickyton</h1>
  <div class="slogan">We build everything</div>
 </div>

The first two banners are complete images, but since we apply the general style of .banner to them, we get the rounded and shadowed borders.

We apply both classes, the .banner and the .bannerN to each element. This will apply the common style and the individual style to the element. Keep in mind, that we can control which property gets overwritten by defining the order of class application. Everything that we define in the individual class .bannerN will replace the property (if it existed) of the .banner class.

Here is the demo link again: DEMO

And also the ZIP: CSS3 Banners ZIP

Tamsin Baker’s homepage: http://www.tamsinbaker.com/

Thank you, Tamsin, and enjoy!

Update Note: There are some issues with older browsers and, of course, Internet Explorer, because of the color depth. To avoid problems of having the image in a slightly different color than the background color of the banner, you should use web colors when creating banners like these…