Welcome to the second part of organising your workspace. If you haven’t read the first part go check it out. To summarise: In the first part we actually setup FireFox to optimize our research on web design.

Today we’ll be talking about photoshop and how to optimize it.

2. PhotoShop

“Adobe Photoshop, or simply Photoshop, is a graphics editing program developed and published by Adobe Systems. It is the current and primary market leader for commercial bitmap and image manipulation, and is the flagship product of Adobe Systems. It has been described as an industry standard for graphics professionals and was one of the early killer applications on the Macintosh.”

Sketching/drawing is the main key when designing a website. You can easily sketch on paper first and then try some details in PhotoShop. PhotoShop is mainly used to get a rough design of how the website would look. This does not mean it is ALWAYS used. Some design are pure CSS2/3. But off course this can always be in handy.

If your a student you can get PhotoShop most likely at a reasonable price. If not you can get a 30-day trial here (check trial link left).

2.1 easy organize

When creating a design of a web page, organisation is key. Keeping layers in folders enables you to quickly move or hide any layers that you need to. When creating a design, you usually make the same folders over and over again. Well this can be done in one step by using actions.

- First open PhotoShop and open your action menu. Do this by going to Window > Actions or use keyboard shortcut ( Alt + F9 ). If this is your first time running it: create a new set by clicking on the fourth button. (Call the set whatever you like)

-Now create a new action (fifth button from the left) and give it a name. Be advised, when assigning a function key, keep in mind that some keys (in range of F1-F12) are already in use.

• F1 - Adobe Online Help
• F5 - Brush style palette
• Shift + F5 - Fill Layer Dialogue Box
• F6 - Colour, Swatches, Styles palette
• F7 - Layers, Channels, Paths palette
• F8 - Navigator, Info palette
• F9 - Actions, History, Presets palette

-After you’ve pressed record create a new canvas that is suitable for your web design layouts. Go to File > New… or use keyboard shortcut ( Ctrl + N ). After the files is created, go to your layers and start making your folders like followed:

-Now hit the stop button to stop recording your mouse clicks and test you action to make sure no mistakes are made. Actions can come quite in handy for doing repetitive procedures (like for example applying styles or saving several works). Be creative I’d say and try to figure out what actions may shorten your time of work.

Check PanosFX, atncentral or visual-blast for some really handy actions.

(more…)

I’m quite impressed by the number of unique visitors on my blog! Rougly between 500 and 1250.  I’m really happy that people can benefit from the posts that are on my blog. I already told this and I’ll say it again: If you have any suggestions please do mail me. I’ll be happy to discuss it with you.

But for the time being I’ve rigged up a poll to see what you as readers are interested in. I hope this way to improve my blog and make sure all readers are happy.

Cast your vote:

You can choose up to 2 answers.

 Loading ...

This post is tend to make sure future posts are all about what you like and want to see. If there is an answer you would like to see in the poll, make a little comment and I might add your answer to it.

Icon is a graphic interface element, a small picture, which represents an application, file, directory, operation system component, device etc. When the user clicks the icon, a standard action is usually performed (run application, open file etc.)

Icons were invented in 1970 in the Xerox Research Center in Palo Alto to make it easier for computer novices to interact with the system.

This table shows you a set of well-known icons

USEFUL LINKS

Online converters:

1. converticon

Converticon is a simple icon utility.  It can import ICO, PNG, GIF, and JPEG formats and export to high-quality PNG or ICO files.  There is no software to download and it’s 100% free.

2. FavIcon from Pics

first web tool for creating still and animated favicons from regular images. There is no software to download and it’s 100% free.

Icon search engines:

3. veryicon

The VeryIcom.com is a icon search engine, it contents over 20000 high quaility web icons in more than 1000 icon packs. Each Icon has serval file formats such as PNG, ICO, you can free browse and download for Windows, Macintosh and Linux Systems.

4. iconfinder

All the icons are in PNG-format. The benefit of PNG-images is the alpha-channel, meaning that pixels can be transparent. Do not copy-paste icons into eg. Photoshop, since icons will loose their alpha-channel information. Instead, use the download-link to save icons locally.

(more…)

“Bloggers Unite is an attempt to harness the power of the blogosphere to make the world a better place. By asking bloggers to write about a particular subject on 1 day of the month, a single voice can be joined with thousands to help make a difference; from raising awareness for cancer, to an effort to better education systems or supporting 3rd world countries“

read more…

FACTS about AIDS

• Acquired immune deficiency syndrome is a set of symptoms and infections resulting from the damage to the human immune system.
• Aids is now a pandemic, an estimated 33,2 million people live with the disease worldwide and it still kills: 2,1 million people, including 330,000 children.
• Three quarter of these deaths occurs in Africa.
• The majority of HIV infection is acquired trough unprotected sexual relations between partners, one of whom has HIV.
• Nowadays, there is currently no vaccine or cure for HIV or AIDS.
• Experimental and alternative treatments have been used to treat symptoms or alter the course of the disease, new treatments continue to be developed and HIV continues to evolve resistance to treatments, but only a vaccine can halt the pandemic because it would possibly cost less.
• Aids stigma exists around the world, including rejection, discrimination and avoidance of HIV infected people.
• Aids-related stigma refers to prejudice, discrediting and discrimination directed at people perceived to have Aids or HIV, and the individual, groups and communities with which they are associated.
• Interventions to reduce stigma are crucial for improving care, quality of live and emotional health for people living with HIV an Aids.
• Public health officials want to avoid stigma which would compromise access to care, prevention measures are taken to respect and to protect people with HIV.
• World AIDS day is observed every year on December the 1^st.
• World AIDS day provides governments, national Aids programs, faith organizations, community organizations and individuals with an opportunity to raise awareness and focus attention on the global Aids-epidemic.
• It is common to hold memorials to honor persons who have died from HIV-Aids on this day.
• Governments and health officials also observe often with speeches or forums on the Aids topics.
• The Red Ribbon is the global symbol for solidarity with HIV positive people and those living with Aids.
• To mark the day, the Red Ribbon is worn by people all year round and particularly around World Aids Day, to demonstrate their support for people who has HIV or Aids.

This Blog has nothing to do with webdesign, but this fact had to be discussed. Want to hear what other people are saying about Bloggers Unite? Would you like to chime in and make a suggestion for the next Bloggers Unite challenge? The Bloggers Unite discussion group from BlogCatalog is a great way for members to share stories, ideas, and give feedback to keep the Bloggers Unite movement going strong! Even if you don’t have a blog of your own you can sign up for a guest account and join the conversation.

Important Links

NIDA - National institute of drug abuse

NIDA, a component of the National institutes of Health, has a mandate to support biomedical research and to improve prevention and treatment of drug abuse and addiction by getting the results of that research to appropriate audiences.

AIDS.gov

AIDS.gov provides access to Federal HIV/AIDS information through a variety of new media channels, and supports the use of new media tools by Federal and community partners to improve domestic HIV programs serving minority and other communities most at-risk for, or living with, HIV.

If you have any suggestions concerning these facts or you would like to talk about it, please do comment on this post. Spread the word out and be sure to link to this post or the Bloggers Unite page.

I’ve always been fascinated by these large backgrounds you sometimes find on movie websites. They can be a real eye catcher. But the problem most people tend to ignore are to make the contour of their image the same colour as their background. A bad example would be like this:

Another problem that frequently occurs is that the image is too width. Statictics shows that most people are still using 1024*768

these statistics come from w3school

So try to use images that are less then 1024*768 or at least, if it’s a person, doesn’t cut his body in two. You can still use a repeated background to fix a gradient or any other missing image.

So let’s get started. Are you a fan of watching films? Or maybe trailers of upcoming low-budget movies. Well follow my steps.

BACKGROUND

1. First of open photoshop and make a new document. For now we dont need to worry about the resolution cause we’ll fix the outcome at the end. In my case (as I’m using a widescreen) I usually use 1680×1050 pixels when creating backgrounds or wallpapers.

Before we go any further, let me explain you something. The finished project will look like this:

To get such a curtain effect, we need verticle lines and level adjustments,

to get the verticle lines, we need noise and motion blur and fibers

to get the noise go to step 2, hehe.

2. Fill the layer with black and go to Filter > Noise > Add Noise. Use following configuration:

3. Working with motion blur with too many white dots, would mess up the curtain effect. This is why we are going to lower the amount of dots. This is done by level adjustments. Go to Image > Adjustments > Levels change the values as followed:

You can always change these values for other result. Test em out I’d say.

4. Create a new layer and fill it with white. Make sure the new layer is on top. For easier use, you can always rename your layers.

(more…)

“Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware.”

Sprites were used back in the Nintendo age. Developpers used them to prevent loading several images each time a character moved or entered the screen. All movements/characters were set on one big image and by using codes they could recall a section of that image. The same big image was loaded one time.

By creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image. This also prevents from slicing every single menu item.

How to use image sprites to create a CSS navigation

We do this by off-setting the background position of each list item in our nav. Let me break this down step by step. To start with you’ll need a graphic/drawing program and a text editor (logic, no?). I’m using photoshop and textpad for this.

1. First of we need our menu image. So open photoshop and create a simple rectangle with your chosen background and links. To easy the process later use one text layer instead of each link in a seperate one.

2. Now we want a hovered image underneath it, which will form our sprite image. click on ‘Image’ > ‘Canvas Size…’ (or Alt + Ctrl + C) and set the height on 200% to double up the image in height. Don’t forget to anchor the image on the top.

3. Select all layers (in my case 2) and duplicate them. Move them under the previous image to fill up the gap. You can also select teh layers press Alt(copy) + Shift(move straith down) and move down with your mouse.

4. Now change something on your navigation (new layers), you can change the color of the background, underline it, drop shadow or anything you want as long as the text for the titles don’t get too close to each other where they are interfering.

5. Now save as menu.jpg, this is going to be the image we use for our navigation. Once you have the image saved, we can start applying HTML and CSS to get this thing working. So open up textpad or whatever texteditor you are using and make a simple unordered list that includes a different li for each of the buttons we created in photoshop.

<html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
	<ul id="menu">
		<li id="home"><a href="#"><span>Home</span></a></li>
		<li id="portfolio"><a href="#"><span>Portfolio</span></a></li>
		<li id="forum"><a href="#"><span>Forum</span></a></li>
		<li id="contact"><a href="#"><span>Contact</span></a></li>
	</ul>
</body>
</html>

The reason there is a span tag  is because this way search engines see the text, not just an image. We will end up turning the span to display:none so the dont show up. Be careful because you can get flagged, by search engines, for putting different content in the hidden fields if it doesn’t match the text on the background image.

(more…)

“As the popularity of CSS grows, so does interest in making additions to the specification.”

CSS3 is still under development, if you want to follow the progress report, click here. Yes, as you can see it’s still not finished after all those years. The first public introduction was in 2006 is I’m not mistaken.

Well more browsers manufacturers have already started supporting most of the features of CSS3 with Opera and Safari in the lead. Firefox 3.1 will come out soon and promises to get along the others, while IE stays in the back.

For now, there are only a handful of working features. A few of them are listed below.

Rounded Corners

Since the start of web2.0, the use of rounded corners were in. If you didn’t use them, your website wouldn’t be categorised as a web2.0 site. The main problem was you needed at least 4 images (1 for each corner) and some javascript or complicated div work.

Well not anymore! 2 lines are more then enough. Let me give you an example:

html file:

<p class="round">This is easy</p>

css file (to round off the element):

.round {
	background-color: #666; 
	color: #fff; 
	line-height: 20px; 
	width: 200px; 
	padding: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

For everyone to see, here’s a screenshot of how Firefox/Safari displays the above block:

So what’s new? The actual CSS3 declaration is border-radius. Until the specs are finalized the various browser manufacturers have enabled the features via prefixes — the -moz- prefix is what Firefox uses and the -webkit- prefix is for Safari.

There is also a possibility for you to choose which corner should be rounded. This can be done by using “TopLeft TopRight BottomRight BottomLeft“. Here is an example code:

# -moz-border-radius-topleft  / -webkit-border-top-left-radius
# -moz-border-radius-topright / -webkit-border-top-right-radius

If by any chance you do want to start using the rounded function feature, but would like to have the same effect on other browsers that doesn’t support it, go here.

Borders

Another exciting new border feature of CSS3 is the property border-image. With this you can define an image for each separte corner and side. This can be done with following attributes:

    border-image:
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image
    border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

(more…)

“Web colors are colors used in designing web pages, and the methods for describing and specifying those colors.“

Colors can be represented in two ways. Each of these two has also different representations. So let’s first start with the most used of all:

Hex Triplet: #XXXXXX

The ‘code’ consist of 6 digits or 3byte hexadecimal number. Each byte (XX) is represented by a number in the range of 00 to FF. The first two digits consists of the red color, the next is for green and the last ones are for blue. The higher the value of the Byte, the more color of that byte is used.

For example:

So as you can see, if you combine the red and lime, you’ll get yellow. Same for aqua.

RGB: XXX XXX XXX

This code is almost never used in the web design. combination is too difficult to remember xD . But it’s usage is the same as for Hex Triplet. The range of these numbers goes from 0 to 255. Now as some may have noticed it means that there is a limit in colors (logic itself).

256 * 256 * 256 = 16.777.216 different colors

And then there is also HSV (Hue, Saturation, Value) or also called HSB (Hue, Saturation, Brightness), but this might be to difficult to explain. For more information you can always check wikipedia

Here under, you’ll find some very useful links for color schemes, color combination, …

1.Dailycolorscheme

Daily Color Scheme gives exact color matches to logos and sites that we love, including hex code, RGB code, and HSB code. You won’t get the matching wrong here.

2.Colourlovers

Find design inspiration with thousands of palettes and color schemes to fall in love with. Influence color trends by rating, commenting and sharing.

3.Colorcombos

Colorcombos is a tool for web developers to test website color combinations, along with a library of pre-selected combinations.

4.Colorschemer

Here you can download free website-ready color schemes. They also provide you with a great application color schemer.

5.ColrPickr

colrpickr lets you choose a color which after he shows you a bunch of images that contains that related color. You can also choose from various categories.

If you find there are other useful websites about colors, please do reply on this post and I might add them later on.

no, they shouldn’t. Offcourse there are exceptions, more of this afterwards.

people tend to forget the new tab/window was opened and hit the back-button mercilessly without any result. They also don’t like to deal with dozens of tabs/windows. People should be in control! This is also one of the main fundamentels of user-interface.

Developpers should be advised that if users want to close the application or leave a site, they will (doesn’t matter which or how many obstacles there are). The more obstacles there are the more negative the user experience will be.

Using New Windows Keeps Users on my Site, doesn’t it?

Not really no. Users will only stay on your website, cause you provide them information they want. Not because the browser window is still open. If users want to return to a Website, they’ll use the back button. If a new window is used, the back button in this window is reset, so users won’t be able to do return to your site using this common method (cue frustrated users).

Since large web-sites (Google, Amazon, AOL, Yahoo & Co.) open links in the same window (unless it is explicitly stated that links are opened in new windows), users tend to assume that the link on an unknown page will be opened in the same window.

Therefor users expect the link to be opened in the same window.

What should I do?

Warn them! This is mostly forgotten by alot of developers.

1. warn the user that the link will be opened in a new window.

Using the href title attribute you let the user know that the link opens in a new window when he hovers the link. You could also simply put “opens in a new window” behind the link but that doesn’t always look good.

2. provide an icon to open the link in a new window.

Here you let the user choose. If the user wants to open the link in a new window he can simply click on the icon provided next to the link. These icons can be found everywhere on the net.

3. allow users to select how the links should be opened.

Using this simple script the viewer can choose if he wants all links to be opened using tabs or not. You need to make sure that the checkbox is visible and users understand what it is good for.

source code:

<form>
    <input type="checkbox" onclick="linkopener(this.checked)" id="linksnewwin">
    Open external links in a new tab?
</form>

javascript code:

<script language="javascript">
    function linkopener(a) {
        var b = a ? "_blank" : "_self", c = document.links, i = c.length;
        while (i--) { if (c[i].href.indexOf(window.location.host) === -1) c[i].target = b; }
    }
</script>

exceptions !

There are instances when using a new window is a good idea. For example:

• The link is for a document, such as a PDF or Word file. Opening a new window will allow the image or document to download in the background. It also prevents users from accidentally closing the browser window when they close the document.
• The link is for a large image. In this case, a new window allows the Web user to keep a browser window open while the image is being downloaded.
• The link is for a printable version of an article or Web page. Here, a new window allows users to keep the current window open while they print the article or page in the background.
• The link may interrupt an ongoing process. For instance, if users are filling a web-form and the form provides the link to terms of service or privacy policy below the form it is reasonable to enforce this link to open in a new window to not interrupt the ongoing process. This is important in sign-up forms and crucial in checkout-forms. Otherwise users may lose the information they’ve already typed in and close the browser window in response.

Final word !

Most of the time, opening links in the current window is by far the best solution. If you do need to open links in a new window, at least warn users beforehand

The next problem is a well know headcracker. The good old netscape so called height bug is back, surprisingly this time in FireFox. Try to size a <div> to 100% height–it won’t do.

In most cases the 100% height is to set the height of body and html to be the height of the viewport. There are at least thousands of solutions available but almost none work a 100%.

Well there is at least one solutions that I know of:

Using ‘clear: both’

“The clear property sets on which sides of an element other floating elements are not allowed.”

which means actually that the element/div is moved below all floating boxes of earlier elements in the source document. So the solution would be to set a ‘clear div’ before every end tag of a main container.

So first of you need to setup the css:

.clear{ clear:both; }

After saving the css put the class before the ‘container’ closing tag div

<div id="container">
   some bit of code
   <div class="clear"> </div>
</div>

As stated before this will make sure that class clear will be moved below all floating boxes. Which makes the container expand till below the clear class. If you have several divs inside your container/wrapper, you need to make sure that every child div has the same “clear:both” attribute.

This can be done by replacing the css with the following: (thx to DavidM for the remark)

DIV.container> DIV { clear:both }

Dont forget to change the ‘ id=”container” ‘ to ‘ class=”container” ‘. The css code I provided ensures that all child divs (divs that are enclosed in the container div) have the “clear:both” attribute.

If you do keep get getting problems afterwards, please state it in the comments or mail me. I shall then look at the code and try to help you out.