SilverHawk's Geek Moments

Icon Tutorial #1

etched_silver — Sat, 02 Jul 2005 16:02:29 GMT

This tutorial was requested a long time ago by demondoll2001 and it took me a while to type it up because for one, I was busy and secondly, I wanted to find an approprite LJ icon that would have been easy to do and yet explain all the basic concepts. She had asked me to type up how to created an LJ icon.

Prior to creating any LJ icon, I generally have three requirements. A good picture that says "Icon ME!", a good base that comes from that picture because not all good pictures become good LJ icon bases and an imagination with a whole lot of risk taking. Basically, don't be scared to try anything. Sometimes it works and sometimes it doesn't.

I use Photoshop for all my graphic things but I've heard that Paintshop Pro has things that are similar. If you need to know what the thing is in Paintshop Pro, I can't help you because the last time I used PSP was when it was version 4. And that's why this LJ icon I will show you how I did is based on very simple concepts with no brushes and no textures. Just two images, a filter and a bit of color addition.

Since this is the second tutorial I created using photoshop, I expect you to know where the tools are located so tools that were previously used will not be explained where they are due to repetition.

Let's begin.

How I created this LJ icon.

from this image:

1. Creating the base. VERY IMPORTANT!

Open up the picture in Photoshop. Since the image is small, select the entire photo by doing Select --> All. Copy this image. Create a new image that is smaller than the original image. Since an LJ icon is 100 pixels in width and 100 pixels in height, it's advisable to create your new image something that will be easily resized to that size later on. For example, for the Cillian Murphy image, I created a new image that was 150 pixels in width and 150 pixels in height. I then pasted the copied image into this new image.

How did I come up with this size is complete trial and error. I created several sizes from 300x300 to 100x100 and pasted the image into each. Moved the image around to see which one would look the best.

How do I know which will look the best? Cropping is a skill that I see badly failing in many LJ icon creations and I never understand why it's so hard to do. When creating an icon, try to make make the focus of the photo to be on the side and a bit to the bottom or the top. See the diagram below. See the red dot and the line intersecting it? That's your focal point.

Below are two crops of the same image.

This one has the focal point in the center.

This one has the focal point to the side.

The second crop is better because it gives the impression that Cillian is jumping out at you, tearing apart his shirt. The first crop doesn't show as much expression. Also, the reason for putting the focal point to the side is you have room for extra things. Like text.

Creating a good base is key to any LJ icon. That is why I say that sometimes a good picture cannot always be a good base. Be creative in creating a base. It can sometimes be the whole face or just a hand. If it works, go with it.

Once you create a good base, you can move on adding the razzle dazzle.

2. Doing the Fancy Things.

Tip. Try not to over do things. Sometimes an icon doesn't need to have it's color suppressed or overly textured or even touched with brush work. Go with the feeling of the photo and play with it. Don't be afraid to try the blending modes or filters on your graphics program. Don't be afraid to do nothing at all.

Since this is a tutorial on creating my current Cillian Murphy LJ icon, I will tell you that this icon used no brush work and no textures. Everything is found on photoshop and clearly easy to do.

I took my newly created base and duplicated it. Layer --> Duplicate Layer.

For layer 1, I desaturated it (changed it to black and white). Image --> Adjustments --> Desaturate

I then changed the blend mode for Layer 1 Copy to overlay.

Going back to Layer 1, I added a diffuse glow filter with the background to white. Filter --> Distort --> Diffuse Glow

Settings depend on your image and how much white you want. However, I always set graininess to 0.

For this icon, I set it to glow amount 7 and clear amount 13. This is competely dependent on your image. My image now looks like this:

Since one side of his face was too dark for my liking, I created a new layer and filled with with the color white and then changed the blending mode to soft light.

The following image resulted:

Using the magic wand tool:

I went to Layer 1 Copy and selected the white background behind Cillian Murphy.

and hit the delete key. I repeated the same thing for Layer 1.

Since Cillian Murphy is in Batman Begins and this image shows him doing a very Superman pose, I wanted something to do with Batman and create it to appear like he was screaming from confusion. I went to google images and searched for "batman comic" and chose an image that I liked.

I opened this image in photoshop, resized it to a size that seemed ok (width of 200 pixels). Then I copied and pasted this image right underneath Layer 1.

Going to the top of all my layers, I created a new layer.

Using a foreground color of black, I created a border by Select -- > All. Then Edit --> Stroke with the following settings:

I resized it to 100x100 size. (Image --> Image Size)

My final image looks like this:

3. Adding Text.

Text is something that can be used as part of the design. Not just as a word. You can do a number of things to make text look like artwork such as changing the blending modes, making the fonts different sizes, choosing the type of font. The possibilities are endless. A great font site I use all the time is Dafont.com and I believe the fonts I used for this icon came from there. I have no idea if they are since I've had these fonts for quite some time.

Because I wanted text and this was a very comic book like icon, I chose font called Carr Balloons with the font color as white and chose one that filled the entire balloon in white.

I created a border around this balloon. Layer --> Layer Style --> Stroke and the following settings:

The color of the border should be black. Click the small colored square and type #000000.

The icon will look like this:

I typed my name by choosing another font called Brady Bunch.

My resulting icon looked like this:

You should know that if you have a request on how I did something, don't hesitate to ask. It may take me awhile to type it up, but I do eventually.

How to Color a Black and White Photo

etched_silver — Wed, 24 Mar 2004 09:15:04 GMT

I know it's been forever since I updated this journal but it honestly takes me awhile to type up a tutorial. Anyways....this is a something demondoll2001 requested I write up.

How I changed this photo:

to become this photo:

Otherwise known as how to add color to a black and white photo.

You should take note that I use Photoshop. I believe that Paintshop Pro has similar functions and I can't check for you because I have no working copy of PSP. My last working copy was PSP 4. But I've heard the newer versions of PSP are similar. As for other graphic software....I have no idea. I've only ever worked with Photoshop. I also expect you to know where things are located in Photoshop. But if you don't...give a shout and I'll do a screen cap of where to find it.

1. Open the original photo in Photoshop.

2. Create a new layer. I name it "eyes". We'll be working on the eyes with this layer.

3. Take the magnifying glass and zoom in where the eyes are located.

4. Change the foreground color to green. In case you don't know which is the foreground and which is the background, I made a diagram:

What type of eye color is up to you really, but since Louis has green eyes, I chose a darker shade of green.

Take a round brush of a nice medium size and paint right over the eyes. You don't have to be exact so don't freak if you go over the edges.

Zoom out to view it at normal pixels should look like this.

Note the psycho green eyes from hell look which is not what you want. You want the eyes to look more a real shade of green. To do that, just apply a soft light blend to the layer.

It should now look like this:

It should now have a light tint of green. If you wanted it to be more brighter, you can apply brightness/contrast to it but I didn't do that because sometimes I think it makes the eyes look too bright and too unreal.

5. Next I did the skin tone. Again I created a new layer and called it "skin". The method is exactly the same but I chose a sort of peach color (#FDC689).

Again, apply a soft light blend to this layer and you should get this:

6. Then I did the lips. I created a new layer, calling it "lips" and just like above, I colored it in with a shade of red that was close to burgundy (#9E0B0E). Something not too pink otherwise it'd look sort of like he's wearing lipstick or something and that's not a natural lip tone.

Again, apply a soft light blend to this layer to get this:

7. If you notice the eyebrows look a tad too light and I felt since Louis has black hair, his eyebrows can't be that flushed. So, I created a new layer, calling it "eyebrow" and colored it black.

Apply the soft light blend to this layer, I tinted the eyebrows just a tad darker. I used an eraser and erased any edges in the lips, eyes and face that had run off. Just to clean it up. And the finished product of coloring a black and white photo and now you know how.

8. However, I didn't stop there. Louis is a vampire with more paler skin than normal humans. So, I selected the original layer:

Then I chose a background color of white. See above diagram for which is your background color. After I chose a white background, I selected the diffuse glow filter which is found at filter -- > distort -- > diffuse glow. Settings you should play with since it depends on your photo but you should set graininess to 0 because you want smoothness and no grainy specs. Play with how much glow but generally chose something that won't blanket out the photo.

Finished product:

9. Now you wonder how I got the peek-a-boo edges. I then created a new layer on top and just filled it with the color white. You can either use the paint bucket icon or edit -- > fill. This should cover the entire graphic. Using your eraser tool, I chose a custom brush. The two brush sets I used are Touchstone's smudged brush and VBrush's watercolor brush. Be daring and just stamp the eraser right on top of the white layer. Choose different eraser brushes and you can set different eraser opacities, etc for any effect you want. Just stamp erase away what you want to reveal. If you don't like it, you can start all over again. So, when I was done, it looked like this:

I hope that makes sense. If not, give a shout. Also, if you have a request on how I did something...give a shout and I'll try to remember how I recreated it.

Personal Likes and Dislikes

etched_silver — Thu, 28 Aug 2003 01:58:22 GMT

I thought that before I type up my next layout, I would give a general list of things that I always do and not do when I design a layout. These are my personal preferences and I'm not saying it's right and you should all follow, but these are some of the reasons people always say that my layouts look so nice.

When I go about designing a layout, I think of the following factors:

1. What type of site is it. This will determine how I will lay it out. If it's a major fansite or my own personal site where I often place outside links to my writing, I will do a table format so these people can find their way around to other material on the site. If it's a small site that is more geared for a showcase feel, such as one of my fanlistings or the fanart gallery I run, then I will do a frames layout. If it's a blog/journal layout, I will do a table layout.

2. Navigation. This may seem pretty basic, but I've seen a vast majority of layouts where you cannot find the navigation. Yes, it's super cool and artsy to have a circle represent sign my guestbook but please, put some sort of indication that this is so either with an alt text added to the image source or something. Usually, if someone can't find where to move around your site, then they will leave. And don't get fancy with the naming of the navigational menu because that leads to confusion. I know that I often use different terms for my LJ layouts, but I make sure that the person can still move around without thinking too much into it.

3. Text colors vs background color. This is something that I always do and seriously do not understand why people do anything else. The majority of sites are still based on reading. Now, I know that putting a pretty wallpaper as your background is oh so purty, but does it not hurt your eyes when you are reading it? I've seen so many LJs where they stick this massive wallpaper and then use some sort of text color that is unreadable. Ask yourself. This is your journal, shouldn't you be able to read it? If I am getting a headache reading your journal, then you must either be blind or getting an extreme migraine. This is why I do not use a background wallpaper that covers the text. I actually stay away from it and use a basic color and use text that is a basic color that will not hurt your eyes. This may be a foreign concept to most, but black background, white text and white background, black text. It may seem retardly obvious but trust me....it's not. I've seen sites where people use a black background with a dark charcoal gray text. Does this not hurt your eyes when things blur together into one big black color? Or use of some color clashing colors like orange background against red text. I'm not making this stuff up.

4. Font size. I tend to use a nice normal size of about 8 or 9 pt with a font face of Verdana. Why? Verdana looks nice and it spaces itself properly on the web. The font size is a nice comfortable size so it's not freakin' large that your eyes fall out and not so small that you will go blind by the end of the day. I do not understand why some people use silkscreen as a font. I really don't. Also, don't force your visitors to download fonts that may not be on their computer to view your site. Most of the time they won't.

5. DHTML page transitions. What is that? It's those cool nifty special effects you see sometimes when you enter or leave some sites. It could be a gradual fade in or a funky sideways wipe screen. I'm sure some of you love it. I've seen it everywhere...but it truely annoys me after about 5 seconds. First time it's woah cool. Second time it's gawd almighty again! I don't use it at all except for one exception. I used the fade page transition for this RPG site because I wanted to give an illusion that you were finding some sort of lost neverland as you flipped through the pages of his diary. It was subtle and not in your face.

6. Midi music. There is a reason midi music is on most people's do not do list for webdesign. It seriously annoys after about 5 seconds. It also has this tendency to crash certain browsers or leave you in an eternal freeze session.

7. Graphics. This is something that is harder to do but something I seriously aim for. When I do a site graphic, I try to limit myself to at most 40Kb. The reason is if you don't like waiting 10 million and six years to download, then so will everyone else. I may be on cable now, but I still remember suffering dial up. That is why I save all my graphics to jpg. Gif is ok also, but I only do that for animation. Png and bmp are truely not advised. First the size is so big and it takes a long time to load.

8. Millions of animated gifs in one page. I don't know about you, but that really hurts my eyes. It also takes another century to load.

9. Having your entire site on one big long neverending scroll on forever page. I don't know why people do that. The reason it is annoying is that it will take forever to load. Plus, it seems like you are forever pressing page down. So, yeah...separate your site into sections.

10. Use a technique if it seems right. Examples: layouts that force you to scroll horizontally. Ok. This is my own personal peeve because I use a scrolly mouse and I'm too lazy to move anything other than my finger. But I think this sort of layout looks best if you are using it for a gallery or a personal portfolio. I've seen this used as a blog and well...why? Frames or iframes that are so small that you feel scrunched up. What is the point of that if your frame is so small that you see a horizontal scrollbar at the bottom?

As you can tell, I just stick to a very basic design with nothing fancy.

Licking Tobey Layout

etched_silver — Sat, 16 Aug 2003 08:25:51 GMT

This was my first layout I ever did on LJ. I based it off the same html coding for BeautifulOne.net. It was also the first time I ever did tables for I really love frames. It is defintely not my best and therefore, my least favorite layout because everytime I see it, I see small errors in it or things I can change.

Before I go on, you should now have a basic knowledge of HTML. If you don't, then you can just scroll on down this LJ and do a refresher because I went through that. Most noteworthy post to really know is my yack on basic tables because you are going to need it. I'm going to now go into nested tables because that is what all my LJ layouts are. Nested tables. You should also know how to set up a basic HTML file because I won't add those tags in otherwise I'd be repeating myself.

To view the layout, you can click here.

The entire layout is actually one table with two columns. I've made a diagram to let you
see where the columns are.

Column 1 is the one on the left where I stuck all my little useless info and column two is the one on the right where the actual journal entries go.

The basic source code is this:

<TABLE height="100%" cellSpacing=0 cellPadding=0 width=800 align=left border=0>
<TR><TD vAlign=top align=left width=260>
where the image goes and column one begins
<BR><BR>
<TABLE WIDTH=230 ALIGN=left>
<tr><td>
column one info and where colunn one will end
</td></tr>
</TABLE>
</TD>
<TD vAlign=top width=540>
the top image goes here and column two begins
<BR>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width=500 align=left>
<TR><TD vAlign=top width=500>
column two info and where column two will end
</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>

A little explanation because now it just looks like wtf, right?

First I made the graphic. I made it purposely so that the image of Tobey is on the left and the header is on the top. I then (in painstaking patience) spliced it up so that there are these two images:

where the image size is width=260 height=524

where the image size is width=540 and height=155

If you notice, I made a note of the image sizes. The reason is you need them to make the table not have any blank gaps when you put it together. I've noticed that in some sites that do this type of layout and when you switch from 800x600 to 1024x768 you get a gap between the images. How to do this? Step by bloody step.

1. <TABLE height="100%" cellSpacing=0 cellPadding=0 width=800 align=left border=0>

This line is the beginning of your entire main table. Draw it out on a piece of paper if it helps you because I do it when I create a layout. I actually do draw it on a piece of paper.

The width is set at 800 and is how large this table is going to be. Which is my mistake number 1 because at the time I didn't know a lot of people outside LJ actually read my LJ. So, to better accommodate those people with 800x600 browsers, I have since changed everything to a table width of around 750.

I have no cellspacing and no cellpadding. This will be one way to make my two images not have gaps.

It is also border=0 because I don't want borders to be seen.

2. <TR><TD vAlign=top align=left width=260>
where the image goes and column one begins
<BR><BR>

This is the first image on the right. Since the size of the image has a width of 260, I have set the width of this column to be 260 as well. This will make the column stay postitioned. The <BR><BR> is entirely optional. I stuck that in to give some space between the photo and the writing below.

3. <TABLE WIDTH=230 ALIGN=left>
<tr><td>
column one info and where colunn one will end
</td></tr>
</TABLE>

The writing of the links down that column is done with this. I created another table and inserted it in. I tend to set the width of this table to be slightly smaller than the width of column 1. Why? I don't know really. It helps to keep the writing in one fixed size so it doesn't spill out and knock column two out of position and create a gap.

4. </TD>
<TD vAlign=top width=540>
the top image goes here and column two begins
<BR>

This is the start of column 2. To make a nested table, I hope you refreshed yourself in that previous post I mentioned. You are actually creating another column within a table. This column has width of 540 because the second image has a size of 540. By making the sizes of the two columns to match your image sizes, this will make sure there are no gaps. And that is why I have a handy thing called a calculator when I do these. And this is why when people request a layout from me, it takes me at least a month.

5. <TABLE height="100%" cellSpacing=0 cellPadding=0 width=500 align=left>
<TR><TD vAlign=top width=500>
column two info and where column two will end
</TD>
</TR>
</TABLE>

This is the table where your journal entries will go. I made it to be a size slightly smaller than this column. It has a width of 500. I tend to make journal entry sizes to be around 500 or more because it's a comfortable size. Something too small makes it cramped and for those (like me) enjoy having friends who pic spam, it makes everything go wack.

6. </TD></TR>
</TABLE>

Then we end it all by closing up all the tags. Major tip. Be sure to go back and see that all tags are closed.

The actual LJ entry box is based off of Generator's LJ entry box because I really like how she set it up.

Now you are wondering, what about the line down the side? It's created with this graphic:

It's pretty simple to make. Just make a 800x1 pixel image and draw a thin blue line. The only thing is you have to position it so the line image from the main Tobey image will line up. What I did (and I'm sure there is an easier way but I don't know it) is do not throw away your original uncut image and continue to draw a line down that side. Then make a single line selection and copy and paste it into a new image.

Then stick it as a background image with this:

<BODY bgcolor="#FFFFFF" background="url of the image" bgproperties="fixed" bottomMargin=0 leftMargin=0 topMargin=0 marginwidth="0">

Where bgproperties="fixed" means your background will not move as you scroll.

I left all this bottomMargin=0 leftMargin=0 topMargin=0 marginwidth="0" at zero because I didn't want margins. Think of it as a Word document. If you want things to margins, just play with that and see what you get.

I also have a tendency to shift my layouts to the left by using <DIV align=left> tag. Generally stick this before the start of the main table and close it at the end of the whole table. That's simply my perogative. You can change it to middle or right.

There really is nothing to explain in the graphic. I really didn't do much. I just plopped an image of Tobey Maguire. Adjusted the color to a blue tint and did a scan line with a photoshop action. Scan line actions are found everywhere. Just do a google search.

Ok...the reason I will no longer do this layout is it takes too long and I have no patience to sit and splice images.

That's it for this time. Next time....my Ewan McGregor layout which is the same one I used for dreagonfli and hiyami.

livejournal styles

etched_silver — Mon, 30 Jun 2003 09:15:14 GMT

Now that I have things settled down a bit, I find some time to present another tutorial. This is something a lot of people ask me...how to set up an LJ style. I figured I might as well go through this little bit first before I start talking about the various styles that I set up.

Basically, you have to know the HTML basics that I went through briefly at the start. Most importantly tables because Livejournal layouts are actually made up of that. Styles sheets will help you also to create a mass effect on a whole. That's why I went through them, so that we are all at the same certain level.

What I do is, I create the entire layout offline. I open up old fashioned notepad. For some that find it easier, you can use an HTML editor. It doesn't matter as long as you get the same result. I create tables within tables (which I will go through with each layout I will work out later on, so don't freak at what I'm talking about). I include everything. Where the entry boxes will be. Where the mood and music will be. The comments. Everything.

Then, I create a style by going to "Edit Style" -- > "Create a Style". There you will see a list of views you can create:

Recent View
Friends View
Calendar View
Day View

I start with Recent View. When I first began, I really had no idea all those %%yadda meant and where it went. So, I highly suggest you choose a premade template and modify. I tend to choose generator because I like how it works out.

You then go through each part and cut and paste your entire layout. Where your HTML goes is at the very bottom of the page. That will be how the entire page looks like. You then cut and paste each part of what you made into the appropriate boxes....currents, comments, entry boxes.

Hit save and view. Your first one will take you forever and a lot of refreshing until you get it.

You then repeat with friends, calendar and day vie.

Next up....first LJ style I created because it was the simplist and probably my worst. I'll tell you why. Licking Tobey.

I really do not know any overrides anymore or at least what works on free accounts because I know a lot don't work anymore, so I just gave up. This is also under the S1 system. According to LJ, there is now a S2 system they are working on. I have no idea what they are talking about.

a simple rearrangement

etched_silver — Fri, 02 May 2003 16:41:12 GMT

I sat here thinking...why did I add LJ users to the friends list when this is not really my LJ and the main purpose is for HTML and graphics tips. So, I decided to sit down and just add useful LJ communities that give out tutorials in the friends section instead of random LJ users. I think that would be more useful, huh?

Anyways, that is why there is a sudden shift in friends list. I don't post anything that is friends only anyways and this is a resource area. So, if you ever need any other places that give tutorials, you can find it on the friends list here.

And if you know of anymore, let me know. I'll add it to the friends list.

Yeah, I think that will be more useful for everyone. :)

I, also, started to place the tutorials under memories. They are few, but soon they will grow because I'm not giving up. So, it will be easier to find for later reference.

I'm also on vacation (for those not on my friends list because I noticed some new people have joined us *waves*). I'll return after May 13th. At that point, I will talk about the layout set up for hiyami and dreagonfli's old LJ layout (because they are actually the same but different graphic) because litaschick was very interested in that a while back. Graphic tip will come after the actual layout coding.

Thanks for your patience.

enfaith's LJ layout

etched_silver — Fri, 21 Mar 2003 21:42:57 GMT

This will be the beginning of how I set up layouts along with how I made the graphic. Most of the time, it's completely trial and error. But I'll do my best to try and remember how I did this or that.

Things to note. I make my graphics with Adobe Photoshop 7 (though my earlier ones are made with Photoshop 5.5). I don't use Paintshop Pro because my version is verion 4 and I never bothered to upgrade it. But people who use PSP have told me that there are equivalents if you have the latest version. Also, if I'm talking about LJ layouts, they are all made for paid accounts and these things work only for paid accounts.

The HTML Part

enfaith's layout is different than most layouts I've done because it is in a pseudo in-line frame. Info on in-line frames can be found here and I won't go into it because I've never used it myself.

What I mean by a psuedo in-line frame is that LJ does not allow frames to be made nor does it allow in-line frames. But it does allow something similar as I've done with her layout.

One way, is to follow howto's tutorial to make an actual frame.

The other way, and what I did, was this override:

GLOBAL_HEAD<=
<style type="text/css">

</style>

<div style="position:absolute; left:45; top:230; width:650px; height:350px; border:solid 1px; border-color:#839000; overflow:auto;">
<=GLOBAL_HEAD

Where:

top = the margin size for how far from the top of your browser should be
left = the margin size for how far right your browser should be
width and height = the size of the frame
border = the type of border you want. It can be solid, dotted, etc. Examples can be found here.
border-color = the color of the border you want

The colored scrollbars and background graphic were added with this override. This can only be seen with IE 5.5. Also, by adding "fixed-no repeat" in the code, will prevent the graphic from moving and stay in a fixed position.

I also added this:

A:link{color:839000;text-decoration:none;cursor:e-resize}
A:visited{color:839000;text-decoration:none;cursor:e-resize}
A:active{color:839000;text-decoration:none;cursor:e-resize}
A:hover{color:FFFFFF; background-color:839000;text-decoration:none;cursor:e-resize}

to make the links hover with a different color. Where the colors can all be changed to whatever you want along with the cursor type. More cursor examples can be found here.

Putting it all together:

GLOBAL_HEAD<=
<style type="text/css">

</style>
<div style="position:absolute; left:45; top:230; width:650px; height:350px; border:solid 1px; border-color:#839000; overflow:auto;">
<=GLOBAL_HEAD

Notice I said override. Hers was not an LJ created style. I just used the "Generator" style and stuck that code in the override box that is found in the bottom of the screen. Fooled around with the colors to get something that worked.

The Graphic

She gave me the following images to work with to create this:

What did I do? I overlapped the images and used the "eraser" tool set a lower setting to erase away one image at a time so it will reveal what I only wanted. The eraser tool is my most overused tool. It can do everything from making thing fade out, etc. The colors were created truely by accident. And for the life of me, I really can't remember exactly what I did. I just lightened the colors and then used the "color gradient" tool, choosing a color that was slightly on the green/brown side. I ran my cursor horizontally across the entire graphic and it just changed that strange shade of green. Brushes of ferns, butterfly's and swirls were used and came from Relique.net. She no longer offers brushes anymore and I don't feel right setting up a download center for them since this was the main reason she shut it down. But there are many places on the web that offer swirls and butterfly brushes.

Font that I used is one I overly use. Batik Regular and Uncle Typewriter. Batik Regular can be found here. This site has a lot of typewriter fonts so, if you're into that type of thing and want a sort of grundgy feel to any of your graphi, this is it. And Uncle Typewriter can be found here. The fonts were typed in white and then I used the "overlay" blend function.

The strange smearing on the sides was done by the smudge tool set at varying degrees of opacity.

Cascading Style Sheets

etched_silver — Fri, 07 Mar 2003 07:06:10 GMT

This is something I'm new at but trying to learn because it's how most designs are moving into. So, this will be brief.

What is it and why use it?

Cascading Styles Sheets or CSS is basically coding that is similar to HTML but gives you more control over the look of the entire layout by letting you do things that normal HTML can do. It also can lessen the need to retype repeated coding over and over again.

A bad thing is that Netscape is not all that compatible with it unless you have the latest version.

More info can be found here. You can also find all sorts of different tags that can work with really good descriptions.

Typical common things that can be done are control of text color and size. Not making your background graphic move when you scroll. Making colored scrollbars. Most stuff that I know most of you reading this have done and is explained with examples in the above link.

And strangely enough, LJ styles uses CSS to control the entire look. Which is why I sat and tried to figure it out.

Where to Stick This?

1. Between the <head> ... </head> with something like this:

<style>
stick your code
</style>

2. By creating an external stylesheet and linking it to there between the head tags by use of this:

<link rel="stylesheet" type="text/css" href="nameofthefile.css">

How to do this? Open up Notepad and just create the code but without the need for <style>...</style>. Save it with a .css extension and upload it to your site. Then link it where the "href" goes. This is more useful for a whole website where you can change only one thing and the entire site will change along with it.

That's basically it because I'm seriously still trying to figure out style sheets. Sometime over this weekend, I will type up how I set up enfaith's layout. You should know that all my LJ layouts are for paid users only. I have no idea what overrides work anymore because so much of it has changed. I also use Photoshop for graphics but I do know there are Paint Shop Pro equivalents in the latest version. What exactly they are, I'm unsure because my PSP copy is version 4.

Frames

etched_silver — Sun, 02 Mar 2003 01:31:37 GMT

First, apologies for not posting something here in a long time. I grew a bit busy with various people's layouts and such. But I sort of cleared a lot of it away and back. Also, this tutorial, I had to create some extra example pages so you can get the general gist. Note that examples I created are really rough and slapped together to give you an idea of what it looks like.

Today, I will talk about frames. I'm a general frames-a-holic. I'm actually more comfortable using frames than tables. And I think a lot of my sites are in frames.

What is a frame?

A frame is a layout where you can view a number of pages all on one page. Frames are useful for large sites that are often updated quite regularly so you don't have to change the entire look when you just want to change one thing. It's also useful for making sure your navigation menu is always there. And like tables, it's useful to maintain control of what your site looks like. One draw back is that if you run a large fansite and you want to get into all those search engines, then I'd suggest tables since search engine spiders can't detect frames. Also, really REALLY old browsers (and I seriously don't know anyone that is still using those anymore) may not be able to view them. For me, I tend to use frames for smaller sites that are used more like a display case. Example of one way I do a frame can be found here. This is an example of an embedded frame which I will teach you how to do later on. But today, I will again give you the basics because basic is important.

To create a basic frame page, you need to create something called a frameset. A frameset will be what will show up on your page. Example:

<html>
<head><title>Basic Frame Page</title>
</head>

<frameset cols="30%,70%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>

</html>

What does each mean?

<frameset></frameset> is what will hold your frame.

A frameset must have:

1. cols="x,x" will create how many columns there will be in your frame. It can be two as shown in this example or more. This can be in percentages or pixels and equals the width of the column. But whatever choice your using be sure to whip out a calculator to make sure that the percentages=100% (or if you're using pixels, make sure the pixels equal the total width you want in the end). A * can also be used in one them, making that one flexible. Example: cols="30%,*"

and/or

2. rows="x,x" which is the same as cols="x,x" except instead of displaying your page in a column, it will be in a row. And it is now the height and not the width.

<frame src="..."> is what each seperate page you make will go. Which means, yes, you have to create an HTML page for each frame src you create. That's why I made a page1.html and a page2.html.

This is an example of frame in columns. And this is an example of frame in rows.

What about having both columns and rows in one page? This is called an embedded frame. Basic code. Notice that there are 2 framesets. One for columns and one for rows.

<frameset cols="30%,*">
<frame src="page1.html">

<frameset rows="30%,*">
<frame src="page2.html">
<frame src="page3.html">
</frameset>

</frameset>

And here's an example.

If you move your mouse over to the edge, you can push the frame. If you don't want this happening, add noresize to each frame src tag like so <frame src="page1.html" noresize>.

What about linking to a frame so you can change the page and whatever so I can navigate around?

This is where you name your frame src tags. They can be anything you want to call them.

Example : <frame src="page3.html" name="main">

And then, every link you want to direct to this area of your frame, must have a target="name of the frame you gave it" tag.

Example: <a href="page4.html" target="main">Goto Page 4</A>

Putting it together:

<frameset cols="30%,*">
<frame src="page1a.html" noresize name="left">

<frameset rows="30%,*">
<frame src="page2.html" noresize name="top">
<frame src="page3.html" noresize name="main">
</frameset>

</frameset>

See the example.

If you don't add the target tag, then if you click the link, it will open in the same frame and not direct it to a different frame. As can be seen if you click goto page 3 in the example.

If you want to open out of a frame, add target="_top". And if you want to open in a whole new browser even, add target="_new".

And if you are truely nice, you may do this for those who are still using browsers from when the internet first started. You can add this to after your entire frameset but before </html>. This is, of course, optional.

<noframes>
<body>
Write some thing that tells them to update their browser.
</body>
</noframes>

For other things you can do to make your frame look different, you can read it here. It talks about adding borders, no borders, etc.

Next yack session (probably later tonight because I feel so bad for not posting for so long), briefly useful CSS. Then I will talk about how I set up the first LJ layout I made because it's different than the other ones I set up for it's a variation on a frame.

Basic Table Knowledge

etched_silver — Sun, 29 Dec 2002 08:57:59 GMT

Figuring out a friend's layout reminded me that I haven't talked about tables here. Again, this is basic intro stuff and those that know it, can scroll on by. Tables is not exactly my strong point and I'm still learning it but they are useful for a lot things. Again any code that is in bold is what you can modify.

WTF is a table? It's just a geek term for placing all your "work" in a nice neat box that has columns and rows. A lot of the times, they are used to show "data" such as results from a survey. But that's really boring. Tables can help you make very nice orderly website layouts which is how I set up BeautifulOne.net. That entire site was made by several tables placed within a larger table called a nested table. But that gets awfully complex and I'll go into that later.

Tables layouts are useful for journals/blogs and small sites. If you run a major fansite and you want every search engine picking you up, then tables is another way to go.

IMPORTANT: Always remember close all your tags because you may get a messed up table or if you view this by Netscape, you get a blank screen.

Basic Table

<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>

Creates this:

cell 1	cell 2
cell 3	cell 4

<table> ... </table> = this is the code to begin and end a table
<tr> ... </tr> = table row
<td> ... </td> = table data. All data go inside a row.

How To Control What Your Table Looks Like

These can be done by using something known as attributes. A more detailed explanation can be found here and here.

Nested Tables

Nested tables are when you have a large table and you place smaller table within it. To do that, you treat the smaller table as just another piece of data to be placed inside <td> ... </td> tag. Note the bold:

<table border=1>
<tr>
<td>larger table</td>
<td>
<table border=1>
<tr><td>smaller nested table</td></tr>
</table>
</td>
</tr>
</table>

creates this:

larger table

smaller nested table

I'll let it digest for a bit because tables is not an easy thing to get and I really hate tables. But most of my layouts, especially on LJ are all tables. Actually, LJ itself is a whole table layout and that's why all layouts I make for myself and for others on LJ are in tables. In fact, they're all the same table just moved around a bit here and there. I told you. I give the allusion of compexity but it really isn't.

Next time, I'll talk about frames layouts and then briefly on cascading style sheets (CSS). And then I'll take each of my sites and LJ layouts and go through them, bit by bit for you should have the basics by then.

links, fonts and colors

etched_silver — Tue, 17 Dec 2002 09:36:10 GMT

Someone asked me how I get the site to actually show up and where to stick all this code. I forgot to mention. Sorry. I use basic Notepad that is found on every version of Windows. That's it. Save your file with the file extension .html (or .htm). Also, name your files in lower case because everything is case sensitive.

I found a totally excellent site on how to set up a site. It's called HTML Source. It's very clear cut and easy to understand. It has everything and would explain everything much better than I could ever do and I will reference it here a lot.

More basic stuff. If you know it, scroll on through. This is for those who don't know it. It will be basic for the first 5 posts (the one previously, this one, tables, frames and FTP). Then, I'll nitpick how I did whatever.

Whatever you add in the body tags is what will show up on your site. You can make text bold, large, etc or add pictures by the use of HTML tags.

But I'll stick a few basic tags, a brief explanation and what some people do that irritates me. Again, BOLD is what you change.

Body

In the body tag, you can determine what color your text, links and background are. You can even add a background image.

<body bgcolor="#colorhexcode" background="backgroundimage.gif" text="#colorhexcode" link="#colorhexcode" vlink="#colorhexcode" alink="#colorhexcode">

bgcolor = the background color
background = the backgroud graphic (optional)
text = color of your text
link = color of your links
vlink = color of the link after you visited it
alink = color of the link when you press it to visit that place

Colors are determined by hex codes. Use nondithering colors so it looks the same with every browser. A nondithering color chart can be found here.

Try to use colors that don't hurt the eyes. Make sure your text is readable to you. I tend to use light background with dark text and dark backgrounds with light text. If you are using a background image, make sure you can see the text. What peeves me is the background is some sort of psychodelic wonder that I'm sure looks groovy but then you can't read a word of the text. So, what's the use in that? This is a major reason I don't use a background image.

Pictures

Images must have a file extension of .jpg or .gif. I've seen some people use anything other than those file extensions which really bugs the crap out of me since it's a much larger file and massive slow to load.

To add a picture:

<img src="image.jpg" width=imagewidth height=imageheight alt="shortdescriptionofimage">

Not important, but I suggest adding the width, height and alt to all your images especially if you are going to use javascript, CSS or DHTML or in case your image doesn't load. The width and height are always in pixels. To find out what they are, open up your basic graphics browser and it will tell you the file size. A basic one I use is IrFan View because it's small and can view anything without me opening up Photoshop every time. It's free and easily found at places like Downloads.com.

Text

Great reference can be found here. It explains everything on how to do it. But what I will tell you is what peeves me.

Use a font that is already found on your computer because downloading a font just to look at your site ticks me off to no end and I know many people won't take the time to download it. Fonts that should used : Arial, Verdana, Helvetica, Garamond. Times New Roman is the default font type if you don't choose a font face. I tend to use Verdana all the time because it's easy on the eyes. Nicely spaced out online. Also use a reasonable font size. I tend to use font size 2 or 10 pt or 12 pt. Smaller makes it hard to read when you're staring at it online. Larger hurts your eyes as well for it glares out at you.

I will say it again. Font colors should not clash against the background. View your site and read it. Does it hurt your eyes? Yeah? Change it.

Links

Read here on how to add links to a site.

If your site is only one page and I have to scroll like 20 plus times before I reach the end, I'd suggest you make your site more than one page. To do that, create two files and name them differently. Example, I called it page1.html and page2.html.

To get to page2.html, type this in your page1.html in the body section:

<a href="page2.html">The Second Page</a>

Sometimes I use a link that will bounce to the section of that same page. I just type this where you want the link to bounce to on that same page:

<a name="#somename">take me somewhere</a>

And then I type this where the link you will click that will take you there:

<a href="#somename">take me somewhere</a>

Where #somename is whatever you want to call it.

You can also add an e-mail link:

<a href="mailto:youremailaddress">your text</a>

You can even force a subject to be placed in the e-mail. I tend to do that since I run several sites and it helps me know where this e-mail is coming from.

<a href="mailto:youremailaddress?subject=nameofsubjectquot;>your text</a>

Next time, basic table knowledge.

basic webpage setup

etched_silver — Sun, 08 Dec 2002 06:58:56 GMT

I figured I might as well start this by doing simple basic info first. Most of you may know this so I will be very brief. You guys can keep on scrolling for the first few days. But this is for those that have no idea how to begin for I know there are a number. Actually, I'm not even the greatest teacher. So, I suggest going to this site, Jessett.com. She does a fairly decent easy to understand job of introducing HTML tags and CSS tags. For those who are even more confused, you can try Lissa Explains It All which is geared towards kids and much easier to understand than places like Webmonkey.

So, I'm not going to explain a whole lot of terminology because face it. I don't even know them. But I'll try to explain it as simple as possible.

Anything in BOLD will be what you change.

To start any website, you need this basic coding that is required:

<html>
<head>
<title>Your site title here</title>
</head>
<body>
Your actual website material is here
</body>
</html>

NOTE: These things are called tags and must be closed. i.e. </ = closed

Whatever you type in the title will give you what is shown at the top of your browser screen. Whatever you type in the body will be what is your website.

Which brings the question? What goes in the body to make it show up? Here you will find a description of all tags that can be used in the body to create what your site will look like. But I'll begin with a simple one page site first.

<html>
<head>
<title>Your site title here</title>
</head>
<body>
<p>This is a paragraph.

<p>This is another paragraph.<br>
This is a break in the text that is done when you add .<br> to the end.
</body>
</html>

And that is basically it for setting up a one page site with no fancy crap.

Day 2...adding color and links and fonts.
Day 3...tables
Day 4...frames

And then I will do my sites and graphics because seriously, I think there are really great sites devoted to the basics.

Questions or whatever you want me to go through, leave comments.