Week #11 - How to Add Snow to a Webpage
In light of the holiday season, this post will show you how to add falling snow to your website.
http://www.hypergurl.com/snowmaker.html
1) Place this code between the <body> and </body> of your HTML document
<script>
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by Hypergurl
// Permission given to use the script provided that this notice remains as is.
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35
// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#ffffff","#ddddFF","#ccccDD")
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6
// Set the maximal-size of your snowflaxes
var snowmaxsize=22
// Set the minimal-size of your snowflaxes
var snowminsize=8
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy
if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
</script>
2) This script allows you to customize a lot of different elements to the snowfall, such as color, speed, etc). Use the developer's comments (indicated by //) to change the snowfall until you get it to look how you want.
Week #10 - Long Shadow Effects in Photoshop
This post will teach you how to create long shadow effects in Photoshop.
http://psd.tutsplus.com/tutorials/designing-tutorials/how-to-create-long-shadow-effects/
1) Start by creating a blank Photoshop document and fill the background with a solid color.
2) Create a smaller rectangle of a lighter shade of the same color inside the rectangle.
3) Type your text inside the lighter rectangle.
4) Create a black rectangle and place it between the the dark and light rectangle. It should cover most of the background.
5) Use the transform tool and rotate the black rectangle -45 degrees.
6) Use the free transform tool and move the sides of the rectangle so that they touch the corners of the rectangle.
7) Move the rectangle so that its corners align with the center of the red rectangle.
8) Change the Fill of the black rectangle to 0%
9) Double click the black rectangle layer to apply a gradient overlay. Use a black to transparent gradient and set the angle to -45 degrees. The opacity can be set to whatever you prefer. This tutorial sets the opacity to 15%.
10) To create a shadow layer on the text itself, duplicate the text layer and place the duplicate layer under the original. Change the duplicate layer font to black.
11) Move the duplicate layer one pixel down and one pixel right using the transform tool. Press CMD/CTRL + ALT + SHIFT + T to duplicate the layer with its transformation. Repeat until the black text layer reaches the bottom right corner.
12) Merge together the duplicate text layers and apply a gradient overlay to the merged layers with the same settings found in step 9.
13) Create a clipping mask on the merged layers to hide the part of the shadow that overlaps the rectangle's shadow. The finished product should look like this.
Week #9 - How to Make Button for Rollover Links in Photoshop
This post will show you how to make buttons to use as rollover links on your site.
http://pixeldoree.com/tutorials/tutorial-how-to-create-a-rollover-button-with-photoshop-and-a-litltle-bit-css/
1) Create a colored shape in Photoshop. I chose to make my buttons circular.
2) Download a simple twitter logo from the internet. I used this image.
3) Remove the blue background and place the twitter bird onto the colored shape.
4) To give the button more depth, I added an inner shadow to the twitter bird. However, this is completely optional.
5) Change the color of the circle to create the rollover image effect when you put it into dreamweaver. I made the color darker.
Week #8 - Creating Custom Scrollbars
This post will show you how to create custom (or colored) scrollbars on your website.
https://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
1) Paste this code with the rest of your CSS rules
body {
position: absolute;
top: 0; left: 0; bottom:
0; right: 10px;
overflow-y: scroll;
overflow-x: hidden;
}
2) Paste this code into the CSS section of your document as well.
html {
overflow-y: auto;
background-color: transparent;
}
3) The following code will adjust the width and height of the entire scrollbar.
:-webkit-scrollbar {
width: 10px;
height: 10px;
}
4) This code is the small buttons at the end of the scrollbar.
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
display: block;
background-color: transparent;
}
5) This is the small strip that the scroll bar moves in.
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
7) This is the actual scrollbar thumb.
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}
Style any of these objects as you would any other using CSS. You can change background color, width, size, height etc. Because changing the scrollbar is changing a default object for most internet users, make sure to keep it user friendly and subtle. For example, on the custom scrollbar I used on my site, I kept the same shape, I just made it a darker color.
Week #7 - Using Different Fonts Through CSS
This post will show you how to use @font-face to type in different fonts on the web that aren't normally web safe
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
1) Download fonts that are free for commercial use. The safest site for this is http://www.fontsquirrel.com/
2) Once all files are downloaded, use fontsquirrel's webfont generator found here
3) Extract the file (it will be a folder) and save it to your sources folder
4) In the webfont folder there will be a .css file (if you didn't give it a name in the generator, its default name is stylesheet). Move this .css file to the CSS folder we created in our site folder. Open the .css file in dreamweaver. The code will look like this:
There are multiple text files for each font because different browsers support different file extensions. The webfont generator provides you with a lot of different file extensions so it can work on as many browsers as possible.
5) Once the .css file is open in dreamweaver, you have to link it to the HTML document on your actual site. Use the code below, but make sure the @font-face .css files is in your CSS folder! Otherwise it won't link correctly because you'll be telling the browser to look in the wrong place.
<link rel="stylesheet" href="/css/filename.css" type="text/css" charset="utf-8" />
6) The code below shows how an originally non web safe font is used as the heading on my site.
Week #6 - How to Add an Audio File Using HTML5
This post will show you how to add an audio file to a webpage.
http://www.w3schools.com/html/html5_audio.asp
Before HTML5 there was no standard way to play audio files on a webpage. Now there is a new way to embed them.
1) Copy the code below and change the source files to the appropriate ones. Make sure to include a message to those using browsers unable to support this code.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
2) Not all browsers support all audio file types. See chart below.
3) The embedded audio file will look like this when finished.
Week #5 - Making Subtle Pattern Backgrounds
This post will talk about making backgrounds with subtle patterns to use on your site.
http://www.nineteenfortyone.com/2011/06/tutorial-subtle-web-backgrounds-using-photoshop-texturizer/
As opposed to having solid colors, subtle pattern backgrounds are another way to enhance a site's design.
1) Start by opening a basic image in photoshop which has good texture and is free to use if it is not your own picture. This tutorial starts with a rope pattern.
2) Convert the image to grayscale.
3) Select part of the image where the pattern and tone is consistent and crop the rest of the image out.
4) Adjust the brightness and contrast of the remaining image
5) Go to the crop tool and straighten and crop your image so the pattern lines up with the edge.
6) Offset the texture to enable you to create a repeated pattern. Use the clone stamp tool to eliminate seams.
Subtle textures can also be made by using the filter gallery in photoshop and adjusting the setting.
Week #4 - Layer Blending Modes in Photoshop CS6
This post will explain the different layer blending modes available in CS6.
http://www.webdesignerdepot.com/2012/03/an-explanation-of-photoshop-blending-modes/
There is a total of 29 layer blending modes in photoshop, but the following 8 are the most common
- Normal
- Overlay
- Darken
- Color Burn
- Multiply
- Difference
- Screen
- Linear Dodge (Add)
Normal is the default blending mode for most layers. It turns the canvas the color which you selected.
Overlay places the layer over the other while still keeping the lightness and darkness of the image the same. Color overlays are commonly used on photos. It tints the photo to a different shade but keeps the original layer visible unlike the normal blending mode.
Darken makes the base color of the image darker.
Color Burn increases the contrast between base and blended colors in the image while darkening the base color at the same time.
Multiply darkens the image by multiplying the base color by the blend colors.
Difference subtracts the blend color from the base color or the base color from the blend color. It is similar to the subtract blending mode.
Screen inverts the colors in the image before multiplying them together. This results in a lighter image altogether.
Linear Dodge (Add) brightens the base color in the image by using color information. The results are similar to the screen blending mode.
Week #3 - Creating javascript Popup Boxes
This post will show you how to create popup boxes on your website using javascript.
http://www.w3schools.com/js/js_popup.asp
Popup boxes are commonly used to alert, confirm, or prompt a webpage viewer.
1) An Alert Popup Box will display a message to the viewer. Copy the code below for an alert popup box.
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box">
2) A Confirm Popup Box displays a message to the page viewer, but also asks if they wish to proceed. Copy the code below for a confirm popup box.
var r=confirm("Press a button");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
3) A Prompt Popup Box asks a webpage viewer to input a piece of information before continuing. Copy the code below for a prompt popup box.
var person=prompt("Please enter your name","Harry Potter");
if (person!=null && person!="")
{
x="Hello " + person + "! How are you today?";
}
Week #2 - How to Download Additional Fonts
This post will show you how to download new fonts onto a mac computer.
http://www.guidingtech.com/6437/how-to-install-new-fonts-in-mac-os-x/
1) Go to a website that offers new fonts (dafont, fontspace, font squirrel, fontsbytes etc.).
2) Download the desired font onto your computer.
3) Find the the font's folder in finder and open the .ttf file.
4) Click "install font" which will open a window showing a list of all the fonts on your computer.
5) If the installation was successful you should see the name of the new font appear on the list!
Week #1 - Color Isolation in Photoshop
This post will show to isolate one color in a black and white photo using Photoshop.
http://voices.yahoo.com/photoshop-tutorial-isolate-color-image-221267.html
1) Start with an original image and duplicate it so you have two identical layers.
2) Use a gradient map to turn your image black and white and add any other adjustment filters until the image looks good.
3) Merge the adjustment layers (including the black and white) with the top layer. You should only have two layers - the top layer should be the black and white version of your image, and the bottom one color.
4) Create a layer mask on the black and white layer and select the area you want in color with the magic wand or quick selection tool.
5) Paint that part of the layer mask with a black brush, which will show the colorful layer underneath instead of the black and white.
6) You can alternate between a black brush (which will remove the black and white and make it color) and a white brush (which will keep the black and white) to perform any finishing touches.
7) Merge all layers once you are satisfied with your image and save it for the web.
Comments (8)
Lori said
at 10:21 am on Sep 19, 2013
Entry #1: 4/4, All required elements are provided. This is a very impressive post- your post is nicely formatted with clear directions and visuals. Color isolation is becoming very popular and helps to draw the eye to important elements on a site.
Lori said
at 10:03 am on Sep 27, 2013
Entry #2: 4/4. Excellent job! All required elements are provided and this is a very useful skill to know especially since it works on all Web browsers.
Lori said
at 10:07 am on Oct 9, 2013
Entry #3 & #4: 4/4 on both, model posts! Blending modes are a great tool in Photoshop, I use them all the time to blend photos into the different color scheme of Websites. Good job including a variety of tools in your post- code posts are also helpful.
Lori said
at 10:49 am on Oct 28, 2013
Post #5 & 6: 4/4. Model Work! Each post is very practical and will be used in the future. Great job including the browsers which the codes will work on- that is key!
Lori said
at 11:44 am on Nov 18, 2013
Post #7 & #8: 4/4. Model Work! Detailed directions for important posts! Just be sure to include an image on post #8
Lori said
at 6:18 pm on Jan 12, 2014
Post #9 & 10: 4/4. All required elements are provided. Your directions for the Photoshop post are written nice and clear and the visuals really add to the content. Be careful when adding snow to a Website, it has to be done correctly in terms of design or it can distract from the content or overall look of the site.
viyedidi said
at 6:57 pm on Jan 12, 2014
I really like the organization of your page. And the post that I think will be the most helpful, is the week 8 post. Creating a custom colored scroll bar is something I'm planning to do on my website, and it's very useful when trying to create a contrast on the page. (The black scroll bar doesn't seem to look very appealing with a multitude of colors).
semavaddat said
at 2:39 pm on Jan 14, 2014
The Long Shadow Effects on week 10 was by far the best wiki entry i have seen. It drove me to try this in Photoshop and it looks really good. This wiki shows very advanced skills and its layout is easy to use.
You don't have permission to comment on this page.