Sourcebench - the web developer’s workplace

Welcome back, everybody.

Today we will give you a good example of how to place the very foundations of your future website. Not just any website, but the one we were talking about in our last week Step 1 of the CSS Slicing Tutorial called "The Basics". As we were getting familiar with the Simple Layout in our last article, today we will push things a bit further into the depths of building a web design layout and what to use in order to accomplish that. To be perfectly honest - it is hard work, specially for somebody that is not proficient with css, xhtml or coding as a whole. No matter we will try to make things easier for everybody.

I say - "Get going already!".

Step 1 - The making of the design.

Most of the professionals use, a tool that is the king and queen of visual art design. People working on that tool spent years providing us with quality software and thus called it - Photoshop. To be perfectly precise the tool for the job is Adobe Photoshop (tm).

Using this baby we can do and let it be done, as a matter of speaking. Please, do not get me wrong, there are other software products that can make you work your way out of the nastiness of pressure, deadlines and the like, and I am sure that there is someone screaming that he has something better! We are not here to make one product "shine" more than the other - we are here to present you with a good choice of working station.

For our tutorial we will use Adobe Photoshop (tm) , because it is easy and friendly to the "new kids" on the block and definitely professionals' choice. Alright enough of that, already. We decided on the tools, lets get the gears rolling then. Have, yet another look at the sample template as a whole.

Notice how, although extremely clean - white is used for background, nothing too much nothing fancy - it still has one VERY interesting approach. A clever way to make the visitor's attention "stick" to the big red label in the center of the eye sight area. If you think about it - most people have their monitors placed in a way that the upper most part of the screen is on the same level as their eyes. So, when you open the Simple Layout, the first thing that is placed in front of you is the big red rectangle with the Introduction part in it. The sugarcane of the website. The candy bar that makes you later a diabetic. The first of the most important things that you should have.

To make that first glance - type of effect even more "sticky", the designer has put a darker row "behind" the red introduction rectangle. That way you can say that the "effect" captures the whole width of the screen and thus making it even more attractive for curious eyes. Even people that are randomly browsing through the net will wait a few seconds just to read that part. Many of you who have ever touched Photoshop and are familiar with layers, will easily understand how the layout of the site is done in a simple .psd file. For those who are not familiar, I will just say that you need very little time spent on the program to get familiarized. It is absolutely 100% easy to use ( I have always thought, that if I can do it, then you should not have any problems ). Layers are like blank transparent sheets of paper put on top of each other, so drawing something on one will make it look like it is on top of the ones bellow it, as your intentions are. Every line, font, position, virtual frames and all that stuff that you will want and need to learn hot to use and place on the design sheet, will be something you will ( or already can ) do very easily with the help of Phothosp, or of course a similar program.

The Simple Layout is firstly is made on Adobe Photoshop (tm), then it was handed to us, we of course approved it - returned it to the designer Emil Nikov who then sliced the hell out of it. I will not get into detail about how the design should be firstly made into an image ( or the already mentioned .psd file - that is the extension of Photoshop files ), because no matter that there are standards in even that, but it is still a test of imagination and creativity. I wanted to focus on the red introduction panel, because it is a perfect example of how something that looks pretty simple at first, can have a psychological touch working in the background.

But, we are here to EXPLAIN what and why you should use for a start!

Step 2 - Into the "depths" of the designers' workstation.

We already talked about Photoshop and its uses. Here is a simple screenshot of the program and some explanations about its workstation.

This is just the most simple stuff and basic options that Photoshop offers. I am going to show you what Adobe Photoshop CS (tm) can do, so you all keep in mind that there are newer and older versions of Photoshop, but these functions are preserved throughout the series and are a must to know. Well, they are the basics of the basics the least.

Alright, so I have numbered some of the boxes so that it is easier to explain what each offers. Lets start. 1.The Design - This is the actual sheet of virtual paper that you have to create on. By the menu in the upper left corner ( the usual standard for all Windows based programs ) there are the categories : File, Edit, Image, Layers and so on. By using File - > New you can choose what kind of "sheet" to use for your design - and the "sheet" can be manipulated infinite times during the actual making of the design - or whatever you choose to make. 2.The Toolbox - This thing here is, obviously, the toolbox. There are different manner of tools with subcategories of tools, so that you can be as flexible as you can be.The uppermost part consists of tools that help you navigate through the sheet or layers, also cropping different parts of the design, slicing and cutting, removing things we do not like or copying parts of the whole picture. Below that section of tools is the part where different kind of options are presented to us, for mostly - the actual work we are going to do. Different brushes and pencil styles, stamp tool, the blur/smudge/sharpen tool the fill "bucket" and more of the like. You should really experiment with them to see what they can offer and how they can be really flexible in different situations. Continuing with the ones left down there - these are the hand tool, the color picker and the extremely needed zoom tool. There is the color pallet and quick mask modes - which is something that will be hard to explain and for now it is too complicated to be used. 3.Tool Properties/Options - That panel looks pretty simple, let alone dull, in the screenshot we have provided, but do not be fooled - it offers a gigantic source of diversity and depth to every single tool you click on. Try it - you will see that the panel will offer different options and styles for every single tool. 4.The Additional Windows - Last, but not least, is the windows which you can use for shortcut commands, detailed choice of colors, better navigation and much much more. The windows shown on the screenshot are just the default ones that pop-up when you start the program - there are bunch of others that provide you with easy access to more options and features of Photoshop. Additionally, there are such windows that are a MUST to have there - like the lowest one shown - there you can see the layers you have on the screen - add new ones, making modifications to existing ones, putting different styles and so much more.

What we have shown you is just a little, almost invisible, piece of what of Adobe Photoshop can offer. Its potentiality is so vast, the books about it are bigger than my personal computer. That does not mean, in any possible way, to give up on in - it is the best of the best when comes to visual editing and creativity. Have patience, young one, and you shall succeed!

Step 3 - Pushing it FURTHER!

Now, the index of Step 3 seems a bit too far, but I like it. Here we will talk about another tool that many codes,designers and web developers use and many of the same kind - hate. It is as known as Adobe Photoshop and in the past year, or two I am not sure, it became a product of Adobe too. But, that is not our concern - what we want to know is - does it work the way we want it to? Oh yeah it definitely does!

What I am talking about is, as many of you pros have already figured and probably are cursing me now, is a nifty program called : Dreamweaver. Dreamweaver, ladies and gentlemen, is a web designer tool that helps people to see make simple table style - at most - websites. Even people with absolutely no knowledge of HTML and the kind of code. Now Adobe have made Dreamweaver CS3 which by all means kicks butt. What we are going to show you is yet again an older version of Dreamweaver that lacks many of the new features of the latest Dreamweaver, but we are still showing you some of the most basic stuff that it can do. Take a look at this thing here :

Here we go again. 1.The Design View - This so called "name" is not exactly the one used, but it explains itself pretty much. This is the place where you can see the actual design of the web page. How it will actually look on the screen and on the internet. This is very nice because it is something like a program that lets you "place" the design right on the blank sheet and the program makes it work by writing the code lines in the "back". 2.The Code View - This is the "back". It is actually what most professionals use - just pure code. No fancy programs, no visual interfaces, no nothing. The source of the source. Dreamweaver is made so that professionals can benefit from it and save time by not writing every single piece of code - presenting them with ideas and opportunities to make something different - to plunge them selfs in deeper. And it helps new people to comprehend what web design is all about. Web developers all over the world are familiar with that program - it is widely know and I thing that by obvious reasons - some hate it. 3.The Command Menu - This part here combines the standard Windows type of menu with File,Edit and the like - with some like the Photoshop style of offering additional options and styles to specific tools and shortcuts - like insert picture,flash movie and more. 4.The Additional Windows - These guys here have a slightly different purpose than the ones in Photoshop. Although they do make the work of shortcuts and bonus information and options - here they are a must - you can not do anything without them. Their usefulness and flexibility is outstanding - just take a peek at the upper most one - CSS Styles. What are you oging to say about that,eh?

OK, let us go back to business. Take a look at the Code View - you will notice that there are HTML code lines there and the Design View does not show anything. That is because when you select File -> New you will be presented with various styles of sheets for web pages. This here is the basic single page type of sheet. And what we have in the Code Window is the basic foundation of the website. A must if you will. This is especially useful for future websites and stuff that will go along just fine if you have a moment to look them through.

Step 4 - The Real Deal.

I am sorry to inform you that this last step of our article today is not actually the real deal. The thing is that if you want to go further down the road of web design and slicing and making your own choice of tools and programs - you better get familiarized with what is going on. For starters I can say one thing - Books. Oh yeah, that stuff with paper in it. Please, don't get me wrong I am absolutely not mocking you - I am just judging from my own experience. I was banging my head weeks even months, just to realize that if I want something to be learned right - self teaching is not the best method when the world has the answer to my questions already. Grabbing the book, buying the program - siting tight and learning - That is how it is DONE. Now, we offered you all this information above, about those two programs - what they are for and what they can do for you. We did that so that you can have a bit of time to familiarize yourself with them, so that we can show you how to actually do some work.

I am not talking about making some kind of websites - we are here to slice CSS websites. These tools will be a great help to those that are totally new to this - why not even offer some insights to those who are veterans already? Get that GEARS of yours rolling people, so that we can chop those designs into beautiful websites.

Next time, the actual Real Deal will be in the spotlight, stay tuned!

Welcome to our first step of the CSS Slicing Tutorial, called - The Basics.

Right here, right now, we will introduce you to some of the more simple and basic things and methods in getting the job done.

The job is already known - to slice a design into a nice, clean CSS website. But first, we will take some time to talk and discuss different kinds of layouts and design, so that some of you, who are not really familiar with this, have some ideas thrown at them and get their gears going.

Let’s get this party started!

Alright, first of all we need to familiarize ourselves with the design of the website. What will it look like, what components will it hold, where will the specific components go, how will they be positioned in relation to the header, the navigation, the content and the footer. Will these be all the things we want/need on the site? Questions, questions, and even a bit more questions. Well, I say we have to answer them first.

Step 1 – The Header

Let us use this Simple Template as an example layout. This was made for us by Emil Nikov and he constructed the template in a very simple and easy to understand manner. It covers all the basic points of a clean CSS website.

First of all, the header, of course is the upper part of almost every website ( I say almost, because I have seen almost everything on the web and I bet many of you have, too ). It should consist of a logo of some sort – mostly web 2.0 based style like a nice shiny text with a few gradient effects on it or anything that tickles your fancy. It is your logo after all, I just make suggestions.

Let’s take a closer look at the Simple Layout's header. Its width and height are relatively good, the width is perfect, on the other side – many people may prefer a bigger or smaller height size – depends on your choice really and mainly the content bellow the header. The Simple Layout has a nice clean header with the logo to shine on it. A good example – you might want to make the whole header one big picture of a group of images or the something that will be in tune with your logo design, it is not necessary in any way for it to have a clean background. Absolutely, no – you can do with it whatever you wish, what is ABSOLUTELY necessary is the size. It should not be really big, the thing is to have a nice balance between the header and the rest of the site that will be visible bellow the header.

So, when a visitor first comes to the site, he/she sees the header – and no matter how attractive it is, there will be a lot of people that will want to see something even more interesting bellow it. By that I mean, a part of the actual content of the site that will grab the attention. We will cover that later on the subject.

In conclusion, the header is an important part of the website, of course, but nobody said that it should be definitely and utterly the upper most part of the layout. There are websites that contain their navigation menu bellow the header or even as a side bar of the main content. As we can see our navigation is in the header which has its good points - the best is that it is extremely visible, easy to comprehend and use.

Let us continue.

Step 2 – The Navigation

We already picked up the topic, considering the navigation part of the website’s design. It is vital – whit out some kind of navigation interface a website stands crippled. Yeah, sure you can put some links or pictures anywhere and have them hold links to the other parts of the site. Even place a sitemap that will make it more understandable, but who would want to check the damn sitemap every five seconds, because they can’t find their way around?! Some of you might be thinking right no : “Oh my God, what the hell is this guy talking about?! There can’t be people that are just that delusional and do something like that…” Well, I hate to say this, but there are MANY that will do and even have done those things and some, even worse.

Anyway, as I was saying – the navigation should be placed in a space that is absolutely 100% easily visible, to stand out just enough so that people can have it poking their eye when they want to explore your website. As, we already discussed, there are websites that use their navigation menu in different parts/corners of their website, but we have an example so we shall have a look at it. The navigation menu is placed right next to the logo, so it is easily seen and it uses big text-like "buttons". The main idea is kept and fulfilled. Also, you can place a search bar placed next to the navigation menu somewhere - that is if your website is stuffed with a lot of content. It provides even more flexibility for navigation purposes.

Notice how the background of the navigation bar is in tune with the uppermost part of the header and the footer. This is a good way to keep the design, as many people say, clean and tidy.Many people might think that there is actually no background and they wont be half wrong, but there are a lot of uses of the "lack" of background - like the introduction section has a clean red background that adds up to the style of the overwhelming white space behind it. Let me repeat myself, this is not even NEAR to being necessary, it is just a good idea. The thing is that many websites that have their designs praised, use a similar method – they use a color scheme and abide by the colors of the scheme. For a website like, say, the SourceBench it is obvious what the color scheme consists of – green, dark blue and white. To use the best of the color scheme “method” you have to make a visual of how the content and the components of the layout will be placed and to think of a nice way to color then – using gradient or whatever you find handy to make the “parts” of your site in tune with one another. Some people even use the chess style design – where if they use an even number of colors, like for example :blue, green, white and orange – they make their design in a way that same colors never touch one another. A green header, a white content , an orange navigation bar as a side bar in the main content, and finally a blue footer.

Most of the websites out there use a single color for background or a gradient type background that goes all the way from the top to the bottom. Then they place a colorful header and the navigation with the content just look like they are flying in the nothingness. May sound a bit sarcastic, but it surely works in some cases.

What you should definitely remember is that – the navigation menu has to be one of the first things that a visitor sees when he comes to your website. Also, it has to be big enough or stylish enough to be easily seen and recognizable.

The main thing about a website is to make it easy to operate, the visitor has to work with it without unnecessary thinking about where he/she should click to go to the place he/she wants. The answer has to be right in front of them and to be DAMN obvious. That does not mean to place large signs – CLICK HERE and the like. CSS is all about clean and style.

Alright, here comes :

Step 3 – The Content

The content is the place where all the information is hold. Where the “Welcome” usually is and a short description of what this website is all about and/or what it offers. Something like one short sentence to give the basic idea and to be easily read – like in a glimpse of a second and it is already in the brain processed and apprehended. If that is actually happening to visitors – then its job is done. Something like this may work in some cases : “Welcome to MyWebSite! Here, you can find blq blq and learn a lot about blq blq blq, especially if you are interested in blq blq, we have a section/department/whatever that does blq blq about blq blq! Enjoy blq blq blq now!”

You get my drift.

So, we are not here to discuss what kind of information the content should hold, it is entirely up to you and the idea of your website. We are here to talk about the content’s layout. Yeah, the content can be a simple big rectangle with text thrown in it and some pictures and stuff. That may and actually has worked for many websites and portfolios, but there are many different styles of content. We will discuss some basic ones, like having a side bar in the content.

Step 3.1 – A single side bar.

The content can be consisted of two rectangles – I am saying this so that you can have a rough image in your head. Like, having a side bar on the right side of the web page, to use it to place some pictures, links, and additional information. Yet again, let’s have a look at the Simple Layout template – the content is made out of two “rectangles” as we called them or two columns. The one on the left presents the actual content or the main content, information about the product on the site can be found here, when the other, on the other hand, has some , info considering the company, maybe its background and contact listing. As you can see they are “split” from one another by an invisible line, thus making it easier for the visitor to grasp the concept. The layout structure stands invisible, as it should be, making the design clean and having a strange “mint” like theme. The Simple Layout is a great example of this kind of two column content design.

Step 3.2 – Multiple Columns

The Multiple Columns design is usually made out of three columns – in most cases the middle column contains the actual content and information the website provides, the left/right column has the images, ads, additional info and the like in it. The other column ( being left or right depends entirely on the designer ) is made out or made into all sorts of things – the navigation bar, link listing or may have the same purpose as the other ones – as I said before, it depends on what the designer wants to accomplish or what kind of website he/she is building. It is rarely a fact, the columns to be the same width – they are almost always the same height, but the width is usually different. The middle one can be bigger in contrast to the other two so that if you put the main content in the middle one – you have more space for more information. I think you see my point here.

Step 3.3 – Other

There is a huge amount of different website designs out there – some so unique that you can barely comprehend the way they are done. Others, imaginative and creative, yet simple. I would recommend to look around some CSS Inspiration Galleries that we have listed on the SourceBench – there we have gathered some of the best CSS galleries on the net. You can get inspired – as the name says – from just browsing for a few minutes – they have extremely interesting content. A lot of people – a lot of design ideas!

Step 4 – The Footer

Many of you may think that the footer is something that is child’s play or even not important at all. I have seen websites that absolutely exclude any kind of footer and the bottom of the web page looks like it is still under construction. No matter what many of you think, the footer is actually much more than just a piece of graphic to “finish” the site. Actually, its job is much more demanding and important. While the header contains the welcoming part of the website, logo and stuff like that – may even contain the navigation – Different people, different designs – the footer has to keep the copyright information, credits , date or clock or whatever and why not even an alternative text navigation or sitemap. Do not neglect the footer in any way, it shows how serious you actually are and compensates for lost space or badly made designs, that actually lack it.

Ok, enough of that – what about the size of the footer? The Simple Layout's footer is the type most used. It is small and simple, providing the required information for this kind of footer and thats it! On the other hand If you take a look at the SourceBench’s footer you will see that it is a large one. This is a not a very common situation, but in this case it is good to be that big. You must have noticed that there is some copyright information as well as text navigation type sitemap where you can go directly to different sections and under sections of the site. There are also some ads there which I like to call – bonus ads – as they are into a corner that is not very much seen, but they are cheap. This way there are more opportunities to advertise others.

This is just one way to make the footer, but we will use the Simple Layout's footer as it is much more suitable for almost any kind of website. As you can see it has a very small height and, of course, the width is the same as the rest of the page. This, as many other things considering design, is not a MUST thing. The width can be changed corresponding to the way you think it should be, but I am just telling you how it must be for the common standards.

Everything else beyond that is entirely your decision.

These here, everybody, were the basics of the basics of the common, or standard, CSS web design. The main “ingredients” of the recipe to make yourself a nice clean web site.

In the near future we will continue the tutorial with the next and more advance step – the actual slicing of the web design into a full fledged CSS web site.

So, as I said many times before, STAY TUNED!

Greeting to all you web developers, web designers and the like!

We, decided to present all of you with a nice piece of information, guides and tutorials on a web 2.0 standard wave of the new generation of web design - Slicing CSS. Whether using Photoshop ( or similar graphical programs ) or just handling things on the way as they come - no matter the kind of method we will help you see what is the best for you and you personally.

"What is all this about?!"

From this day forward, we will give you a nice article consisting of nothing else, but quality advices and guides for young and professional web developers to hone their CSS skills in slicing web designs, managing content like headers, navigation areas, the main content, footers and more - depends on the layout you want to make!

There will be a single strong article on this topic every week from now on. We know that CSS slicing is not a new feature in web development, but there are many people that are fascinated by the clean and absolutely extraordinary kind of css websites getting their way out on the net. Not only that, but nowadays everybody hates tables - there are websites that have names and addresses of the kind : We Hate Tables and Death to Tables. Considering how things are spinning towards a better future on the internet and how fast things are developing - it will be absolutely fare to say that many "newcomers" are getting their hands on the concept of web designing and developing. Thus, we as the team behind this web development portal, feel obliged to offer what we can to help anybody that opens his mind and imagination to the fast growing and enormously expanding universe that web 2.0 actually is.

"Alright I get it, but what exactly will this project offer?"

For now this is just something to tickle your interest. Until we have more content for this specific subject, we will shoot it down to you wrapped in a nice package so that you all could feel like you are opening your Christmas presents. We all love Christmas, so we want you to love this series of articles as well.

The very source of the project is already pretty much known to you, so let us get plunged in a bit more detail. For starters, we will familiarize you with the very basics, like what the layout should be consisted of, how the header should be, where the main content has to be placed in order to be nicely visible and all manner of layout attachments and styles.

The choice of the professionals - Adobe Photoshop - what you can do with it and how to do it. Whether it is actually strongly advised to use it or not - why and why not. How to slice the web design into a perfect and nicely working CSS and HTML website. Taking it from the top - slicing the header, the content, the footer and everything else that can be there.

Continuing with choices that have to be made and considered throughout - font, stylization, color schemes, headlines where and why. Also, lets not forget other major elements like specific scripts that can enhance the look of your site, the flexibility of the navigation menu and much much more.

"Ok, whats next?"

Next week we will familiarize ourself with the basics. Primary, the layout - standards, design and construction. The default html template - what of it, can I do ( anything ) with it? Setting the foundations of your website.

We promise our best in providing you, with all you require and satisfy your every need and thirst for CSS Slicing knowledge,even more!

Everybody, stay tuned!

There are a lot of web services these days. Practically the internet is overwhelmed with service providers for almost everything a man can think of, but the so called "slicing to code" service is relatively new and very interesting.

What is it all about? Basically, a person makes a design of a web page - design that may involve html, xhtml, css and such - then others receive the original image file - psd most of the cases - and guess what? Absolutely right, they "slice" it to multiple pieces and code it so that it becomes a fully functioning web site with that design.

As we all know, the web is a ever growing community and when there is one kind of service - familiar or the same kind of services start to pop out of the blue with accelerated speed. What I am trying to say is that if you use the most simple method of finding or learning more about this is google it. That way you will stumble upon many companies or communities - even freelancers - that provide you with the request you have in mind. Whether you need some time off and decide to spend some bucks on something you are too busy, lazy or not good enough for - the slicing services will gladly put your cash in good use and will make it for you with considerably good speed.

As I mentioned above, there are many such service providers and so the price of that same service is not as low as many of you might think, but very reasonable whatsoever. Also, the time needed to be done is from few hours to maximum 3 days. Having all this in mind, we have decided to provide you with some of the best slicing - coding services the net can offer you.

The price winner!

XHTML it - http://www.xhtmlit.com

This guys are by far the best option you might have. They are really good and experienced in what they do and can offer you more options than you may think of. Not only that, but they have acceptable prices for their services with which you can expect something done with passion and grace. For the 119$ a page you can have a single paged website with the absolutely 100% design you have made, sliced and diced the way you want it to be. The really nice thing about these guys is that they will code everything in 8 hours or less!

By far the best choice you got!

Continuing with the other really fast service providers.

PSD to HTML - http://www.psd2html.com

Paying 153$-211$ for this service may be steep, but the thing will be done professionally within 24 hours, which on the other hand is something that deserves not only your attention, but also your opinion on the matter. After all, the slice and code it for you and the next morning you have your website ready and waiting to be uploaded on the internet and start doing the thing it is made for.

Fast and cheap! Can that be real?

PSD XHTML - http://www.psdxhtml.com

Well these guys claim that it is reality. What I have learned so far from their website is that they can manage to code your design for less than 18 hours and the price they charge starts from 89$. By far this is the cheapest service I and many more have encountered on the internet and maybe will be the cheapest for a long time. If some of you have any experience with these guys, we will appreciate it if you could post your opinion on the subject. Thank you.

The Choppr - http://thechoppr.com

Another not-as-cheap-as-the-above ,but still relatively cheap slicing service provider that can charge with no less than 149$. You might think, "What is so cheap about these guys? By far, they are the most expensive from the rest!" and you will be absolutely right. The thing is that the other websites that are bellow charge more or at least take more time to complete the task you can throw at them, but still this is not why we decided to place The Choppr in the top 4. The Choppr provides its clients with a chance for them to see what they are doing. The first time I checked the web site I was fascinated by how much comments they got by their clients thanking them for their outstanding work, so they must really be good at what they do. Not only that, but they present finished projects and samples of what and how they do their job.

A very good slicing service that is presenting some serious competition with the rest.

We have said that there are much more than just 4 slicing - coding services on the web. And there are, so we decided to post some of the best we stumbled upon.

Here they are:

• Slice 'R' Us - http://www.slicerus.com
• We'll Code It - http://www.wellcodeit.com
• XHTML Genius - http://xhtmlgenius.com
• Design 2 Markup - http://www.design2markup.com
• Fast Slicer - http://www.fastslicer.com
• Finely Sliced - http://www.finelysliced.com
• Dawnstudios Slice It - http://dawnstudios.com/sliceit
• Chop And Code - http://www.chopandcode.com
• Slice 'n Diced - http://www.slicendiceit.com
• Slice my Design - http://slicemydesign.com
• The Designer's Chop Shop - http://www.designerschopshop.com
• XHTMLized - http://xhtmlized.com
• XHTML Slicer - http://xhtmlslicer.com