The Role of HTML & CSS in Web Design

If you are thinking about pursuing web design as either a career or a hobby, you must be able to do more than simply design a pretty page. Professional web designers are experts in programming and coding as well. The most talented web designers are those that can adequately balance both their creative and artistic sides with their love of technical coding.

As a web designer, there are plenty of different web design standards one must master. The two most important in the industry today are HTML and CSS. What are these methods all about and how much time and money will you need to invest in order to learn them?

What is HTML?

Since the early days of web design, HTML has been the standard for professional websites. It stands for Hypertext Markup Language and can be quite confusing to someone who has no experience using it. HTML is the language, or code, used to edit and position the text, images, frames and other web page elements. If you go to your web browser and select View and then Source – the code used to design that website is available for anyone to see.



Those who have used HTML will tell you that it is not difficult to learn. There are a few basic tags (codes) a designer has to learn and a simple webpage is at their fingertips. The more complex the HTML, the more you can do with a site.

Efforts have been made to dumb down the process even further so that anyone, even those who have no knowledge of HTML, can create their own website. These are typically called WYSIWYG (What you see if what you get) editors. They allow you to create a webpage without using code and the editor assumes what HTML you need and does the work for you. Some software programs now include an option to convert your document to HTML. These are great tools for newbies. Unfortunately, the processes of guessing what code you need breed mistakes and errors in design that can lead to further frustration.

What is CSS

CSS is a newer animal and is not as familiar to beginning web designers as HTML. CSS was created to allow designers to have even more creativity and control over their designs. Today there is more than just one type of Internet browser to design for and this can be tricky and time consuming for HTML designers. These saves users time, effort and most likely money when they are creating sites. Also, CSS encourages less effort by allowing designers to create style sheets. This means when an edit is made to one page, all other affected changes are automatically made. This keeps designers from having to make multiple edits for large, detailed websites.

 

HTML vs CSS

CSS is not really taking the place of HTML. It is generally used as an enhancement, not a substitute. HTML is still the perfect type of coding for the main structure of a site.

CSS excels when it comes to how a webpage will look. The outward appearance including backgrounds, colors, content and image placement can all be handled by CSS. Anyone who is familiar with the Microsoft Office version of style sheets has a good handle on the purpose of CSS.

While a webpage can certainly be accomplished still only using HTML, CSS allows designers to do things like set different page margins for all sides of a page, overlap words, better position page elements, and set a font for a whole table instead of just pieces. These make all seem like minor adjustments but these CSS tricks free up time for designers to worry more about overall layout, design and navigation.

Training

There are plenty of places where new designers can go to learn both HTML and CSS. If you are a manual type of student, the library has an abundance of tutorial manuals for these techniques. Any establishment that teaches computers classes will more than likely include these basic web approaches as well for the visual learners.

Of course, many a web designer learned their craft by simply jumping in and messing around. If you have the discipline, this hands-on method of learning is not only effective, but free.
With the popularity of today’s world wide web, it seems like everyone is designing a webpage these days. From the free online editors to full blown ecommerce Internet giants, there is a market and need for web design that is not going away any time soon. Whether you decide to take it slow and target small businesses or get serious and starts designing for large corporations, design fundamentals are the place to start your journey.

Adobe Photoshop: Tips and learning resources

Photoshop can be a frustrating, but also an enjoyable software program to learn or teach yourself. With a seemingly endless number of features, filters and plugins it can sometimes become somewhat overwhelming.


Indeed, Adobe's primary image editor is one of the only graphics tools that is used by a vast number of professions (graphic designers, web developers, photographers, pre-press and commercial printers, amongst others) for an almost endless variety of applications.

It is fair to say that few, if any, designers can claim to have mastered all of its techniques. Even the Adobe Photoshop help manual and the various third party teach yourself Photoshop books barely scratch the surface.

One of the most fascinating features about studying Photoshop is that you soon learn that it often provides a variety of different tools and techniques for achieving similar results. Indeed, experimenting with those techniques is often the best way of teaching yourself.

You never know what you are going to learn next about the program and this is one of the reasons why online tutorials can be so helpful. Not only can they offer immediate advice on solving problems, but they can sometimes also offer insights into new methods of creating old effects.

Adding shadows in Adobe Photoshop CS4

TIP : As with many design tips, there often many ways to apply a creative technique. A lot depends on the precise graphics project being attempted and the intended destination of that job.

Which software is best?
Which software is best? All four of the tools are more than capable of adding a drop shadow to design layouts. Deciding which application is best, can depend largely on personal preference, as well as the type of work being carried out.

Drop shadows in Adobe InDesign

Drop shadows in Adobe InDesign CS3 are quick and easy to apply.

1. Firstly, select the text or object. If selecting text, it is important to select the text box, rather than the line of text itself.

2. Right click on the mouse and, from the contextual menu, go to Effects and then Drop Shadow.

3. This will bring up the Effects dialog box which has numerous settings for fine tuning the drop shadow. Depending on whether an object or text has been selected, these settings may offer some different options.

4. To see the effect which each setting will have on the drop shadow, simply click the Preview checkbox.

5. Once finished, click OK.

Making drop shadows in Illustrator CS4

Some designers prefer to manually create custom drop shadows using variations of the gradient tool in Adobe Illustrator. This may be the best approach if you want to create directional shadows, or maintain more complex vector editable shadow effects.

But if that level of precise control is not necessary, there is a simpler one-stop approach to creating drop-shadows in Illustrator CS4.

1. Select the object or text box.
2. Go to the Effect menu.
3. Go to Stylize and then select Drop Shadow.
4. A Drop Shadow dialog box will appear which allows some limited editing of the drop shadow.
5. Once finished, click OK.

Adding shadows in Adobe Photoshop CS4

One of Adobe Photoshop's strengths is its use of layers. Using Photoshop layers, a designer can probably find several ways to manually create different drop shadow effects. One of the easiest, however, is described here:

1. Create a new layer, or work with an object on a transparent Photoshop layer. (Trying to create a drop shadow on the default background layer is probably not advisable).

2. In the layer palette, select Blending Options. This can be done either by double clicking on the layer icon or, by right clicking on the icon and selecting Blending Options. The latter is often best when adding drop shadows to text in Photoshop.

3. A Layer Style dialog box will appear with a number of Styles. However, In this case we are interested in the Drop Shadow options, so we can select that check box.

4. This then allows a number of options for adjusting the structure of the drop shadow, including blending modes, opacity, angles and so on.

5. Once complete, click OK.