I’m truly amazed how well my blog keeps having visitors.

I recently checked my blog and apparently I have an average of 400 visitors a day
even though I haven’t updated it since 2008.

Therefor, I’ll do my best to redesign the whole website and start blogging again.

I’m truly sorry for not having some of your comments displayed lately
but else I have to read every 6875 comments left ^^

Personnaly I don’t know when I’ll be ready with the new design as I started working.

But let’s say the deadline would be somewhere at the end of August (going on vacation in a few weeks).

Regards

Peter

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.

3. TextEditor

Okay first off, don’t use Dreamweaver or some other technical web page maker. Why? Cause it’s unnecessary. You wont be using 80% of all features anyways. The less the better. You should really learn using one of these two text editors. They are very easy to manage and use.

3.1 Textpad

Whether you simply need a powerful replacement for Notepad, a tool for editing your web pages, or a programming IDE, TextPad does what you want, the way you would expect. Frequently used combinations of commands can be saved as keystroke macros, and the spelling checker has dictionaries for 10 languages.

3.2 Notepad ++

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL Licence. Also, don’t forget to check the plug-in directory.

3.3 Jedit

jEdit is a mature programmer’s text editor with hundreds (counting the time developing plug-ins) of person-years of development behind it. To download, install, and set up jEdit as quickly and painlessly as possible, go to the Quick Start page. While jEdit beats many expensive development tools for features and ease of use, it is released as free software with full source code, provided under the terms of the GPL 2.0.

My advice, use one of these three. They are very user-friendly and also free. Take your time testing each one of them and get used to it. This will certainly spare you a lot of time later on.

If you have any questions concerning these programs, you can mail me or use this comment form.

THIS IS END OF PART2

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.

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.

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

Image	Function
Home	Link to the first page. If the website has a splash screen before entrance, this link must lead to the next page.
Letter	Mail the website author. The most prevalent mistake is to make the mailto link. This is wrong. Create a separate page and place a mail form there or write the names of website owners. The user shouldn’t receive surprises such as loading of mail client and it is more pleasant to write to a specific person than to the faceless webmaster.
Magnifying glass	Website search. If the page itself contains a search form, this link leads to the advanced search page.
Printer	Version of the contents optimized for printing. It is reasonable to open it in a new window. Also you can append a script like ‘window.print’ to the end of the page.
Question mark (?)	Used in auxiliary interfaces often inside the text block. It usually leads to the page containing help, which describes the meaning of the term located near the question mark. Also it can lead to the FAQ page; in this case you should make links like faq.html#term.
Right bracket (>>>)	Link to the details page. It is usually placed near the news annotation and used to display its full contents. It is used in auxiliary interfaces.
Letter ‘i’	Information. Almost the same as brackets but leads to the additional information on the topic.
Cart	In online shops it leads to the page, which displays the customer’s cart
Left bracket (<<<)	The “return” page. Leads one navigation level up or to the page from which the user came to this page. When using JavaScript, never use history.go(-1) without the META robots tag with the noindex attribute. And think twice before using this tag.
Plus (+)	In dynamic navigational interface – open the list, in online shops – add to cart. In general – add/increase something.
Minus (-)	The opposite to plus.
Right/left arrows	In online shops, the same as plus/minus. Used mainly together.
Up arrow	Link to the page top. It is usually located at the bottom of long information block. Implement it using JavaScript. Care for your users and the Back button in their browsers.
Flash logo	Usually leads to the page with large shockwave flash movie. It can be opened either in the popup window or current window.
3D objects	Sphere, cube, prism. Used separately or together with each other. Leads to the page containing VRML scenes or MetaStream objects.
Gearwheel	Link to the configuration page. In principle, this is not the most established image. You can also use wrench, tool box etc.
Hard drive	Download. The link must lead to the file, not a HTML document. If you need the opposite, use right brackets.
Loudspeaker	In flash movies – volume control, the Stop All Sound function or enabling sound if it was turned off.
Door	Exit. Used in web mail systems and means stop working with the mail box.

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.

Icon databases:

5. famfamfam

famfamfam.com is the website of Mark James, a web developer from Birmingham, UK. You’ll find some high quality icons for free.

6. aspneticons

They are offering a full set of professionally designed icons for web applications for all ASP.NET developers for free! There are more than 300 awsome icons in our package, and are welcome you to use them in your web applications, both personal and commercial.

7. bs-markup

A german website offering some very clean buisiness icons. A variation of posticons to extention icons (pdf, xls, …) to navigation. All for free.

8. websiteicons

The owner of the website has contacted many authors, and they all agreed that we may use their icons for personal use. You can find their information next to the icons they’ve created.

9. freeiconsweb

Here you can browse and download Over 15,000 high quality Free Icons for Windows, Macintosh and Linux Systems. (Desktop Icons,Windows Icons,Windows XP and Vista Icons,Mac OS X Icons, Linux, PNG Transparent Icons,Gif Icons,Pixels Icons).

10. kurumizawa

As a member of Deviant Art, kurumizawa provides us with a great collection of free, quality icons.

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

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.

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

Date	Higher	1024×768	800×600	640×480	Unknown
January 2008	38%	48%	8%	0%	6%
January 2007	26%	54%	14%	0%	6%
January 2006	17%	57%	20%	0%	6%
January 2005	12%	53%	30%	0%	5%
January 2004	10%	47%	37%	1%	5%
January 2003	6%	40%	47%	2%	5%
January 2002	6%	34%	52%	3%	5%
January 2001	5%	29%	55%	6%	5%
January 2000	4%	25%	56%	11%	4%

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.

5. The next step will get you closer to getting a curtain effect. Go to Filter > Render > Fibers and set the values as in the picture:

6. I know, this looks like a bark of a tree. Be patient we are almost there. For a better highlighting effect go to Filter > Artistic > Plastic Wrap. Now the most important part motion blur. The long awaited time has come (just kidding). Go to Filter > Blur > Motion Blur and use the values as followed:

7. Almost there, now we want the darker areas to be darker, same with the opposite. We’ll use the same procedure as before. Go to Image > Adjustments > Levels and use these values:

8. For the colors go to Layer > Layer Style > Color Overlay (or double click on the layer) and use #a70000 as color or any other color you like.

9. Now go to Gradient Overlay in the same window (Layer > Layer Style > Gradient Overlay) and set these values:

As stated before, we’ll need to pay attention to the fact people might have other resolutions then yourself. This is why I used a scale of 90%, this will make sure that curtain is entirely visible on resolutions with 1024*768 or above.

10. Last step would be to make the curtain less jagged. So let’s smooth it by using gaussian blur, go to Filter > Blur > Gaussian Blur:

Yet again the final result:

be sure to crop it (black leftovers) to lower the size of the image and save it as jpg.

CODING

Let’s continue with the coding.

Here you have the CSS:

body {
	padding: 0;
	margin: 0;
	background: #000000 url("background.jpg") no-repeat center top;
 
	width: 100%;
	height: 100%;
	display: table;
}
 
#container {
	text-align: center;
}
#title {
	color: #ffffff;
	height: 25px;
	margin: 25 auto;
}
#frame {
	margin: 325 auto;
	height: 300px;
	width: 500px;
	background-color: #fff;
}

'background: #000000 url("background.jpg") no-repeat center top;'

	background-color: #000000;
	background-image: url("style.css");
	background-repeat: no-repeat;
	background-position: center top;

<html>
<head>
	<title>Large Background</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="container">
		<div id="title">
			<h1>Movie Trailer</h1>
		</div>
		<div id="frame">
 
		</div>
	</div>
</body>
</html>