CSS Slicing Tutorial, Step 2 - The tools for the job
- October 30th, 2007
- No Comments
- webdesign
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!
