Sunday, May 23, 2010

The Old School Way of Creating a Website!

Designing a web page with Photoshop isn't as hard as I thought it was going to be; it surely isn't brain surgery :-)

With the help of my dear friend, Eloise Pasteur, I was able to design an attractive webpage on my Mac from scratch using just Photoshop 7. To make it into a webpage, I used Smultron to write the CSS/HTML and CyberDuck to load files onto my server.

Windows users can use Photoshop, Notepad and WinFTP to complete this project.

This How-To article only focuses on the design of the site in Photoshop 7. As you will see, there are lots of benefits to using Photoshop instead of pre-created CSS templates. If you would like to learn the next step of this process, how to create CSS style sheets, click here.

While it may seem pointless to design a website with a photo program, there are lots of good reasons to do so. Many free CSS resources give you templates that all look pretty much the same (blog format, one, two or three columns, etc.). Designing in Photoshop allows you to articulate a stunning visual website that is unique.


As always, it helps to plan your ideas out ahead of time and to think clearly about what you want the end site to look like. Web design requires that we think about the user and any of the possible browsers he or she might use on any of the platforms.

In working with Eloise, I was able to identify the parts that my website MUST have and was able to think about what I wanted the website to "feel" like to the end user. I sketched out my ideas on paper.

Working with Images

Select or create images for your site (background, buttons, etc.). If you are creating original work, you can just skip this part and go to the next section. If you are using images created by others, read on!

The trick in using images found on the web is that you need to make sure you have permission to use them. Images licensed under Creative Commons can be used if their license allows for modification and/or commercial use. Flickr offers a pretty easy process for finding out which images allow for various kinds of uses.

To find an image, go to flickr and type in your search term. Once you get the results, click on ADVANCED SEARCH (next to the search box).

Scroll all the way to the bottom of the page and check off the box next to Creative Commons and modify. If your site is going to be commercial, you will need to check off that box, too.

If you prefer, you can also create buttons with programs like Buttonator. I created my own buttons using this image.

If you decide to use a background picture for your web page, you will need to find one that is not too distracting and works with your theme. You can use an existing picture or use the guidelines above to find one that is licensed under an appropriate Creative Commons license.

Building the Dream

Once you have all the ingredients picked out, you are ready to start building your dream. Start with the background layer first. You will want to think about the users and how their browsers will display your website. Since there are so many different sized screens and so many browser choices, it is good to use the industry standard.

In this example, I am using a background image of a book and flowers as bullet points.

Normally, a background image should be between 670px-1000px wide. There isn't really an industry standard, but Blogger uses 740px wide. Buttons and icons can range from 1px on up depending on the look you are trying to achieve. I used 25px by 25px because I wanted to sustain some of the flower's detail. You will want to check your site in different browsers to check the overall look.

The Layout Process

Once you have a rough idea about how big you want your images, you are ready to start laying out your work in Photoshop. This part is really fun because it is like table where you can just spread everything out and see what fits together nicely. Don't worry too much about the size of your images because you can always adjust them as you go along.

Step 1: Save your Background as Layer 0

Open up the Layer Palette (F7) (if it is hidden), and double click on "background." It will ask you if you want to rename it Layer 0; click OK.

Step 2: Create a Title

Using the text tool (the T on the toolbar), create a title for your web page. Play around with the color and font and where you want it located on your site. Just remember that not everyone has crazy fonts, so it is best to stick to standard fonts.

Once you have written what you want, click on the "move" tool (the little arrow at the top of the toolbar) and move the text where you want it.

Step 3: Adding Buttons, Bullets, and Icons

Each button, bullet, or icon will need its very own layer. You should definitely label each one as you create it to avoid confusion later. For example, the first flower in my project was named "flower" and when I copied it, it defaulted the name to "flower copy 1" and then "flower copy 2" and so on. Be sure to name each copy as you create it, so you are sure to match each image with the correct content.

Getting Ready for Publication

Once you have your image and text where you want it, you might want to add in some "space savers" as I did with the black boxes. These black boxes will be replaced with video screens that will be coded into the HTML. The black boxes help me visualize what the final website will look like.
The PSD file you generate is the design document that you (or another person) will use to guide them in creating the HTML and CSS files that go to make up the webpage. In addition, some of the layers may be used to create image files in a web-friendly format such as jpg or png. In my design, the flowers and the book background wereused in this way.

There are no free tools that directly convert the PSD design template into CSS and HTML, but there are some that aren't free. I used Smultron (a text editor) to create both, but you can use tools such as CSS Creator ( if you prefer, to try and generate the CSS automatically if you are unsure.

Finally you will want to FTP your files (HTML, CSS and jpg/png files, not the PSD) onto your server space so it is available on the web.

Your work in Photoshop is complete! You now have a unique webpage that looks nothing like the same-old stuff out of the web! Do you have any tips to add?

Image by Paukrus

Tuesday, May 18, 2010

Personal Learning Networks? The Latest Buzz Phrase?

I am always skeptical of new buzz words in education. Every so often, there is a new "flavor" of the week, and all the teachers run toward the light - until a newer, cooler, light appears.

I had that feeling about the phrase "Personal Learning Network." Ugh. Everyone was talking about their PLN this and their PLN that. Ugh.

So, I ignored it. I didn't listen to any podcasts about it; I didn't read any blog posts about it; I didn't tweet about it; I didn't read tweets about it...I ignored it.

But, then I went to the annual #CAISCT retreat and listened a bit more attentively because these folks are my friends, and I like and respect them a whole lot. And, by hook and by crook, I came away appreciating the concept and understanding the buzz.

We all have personal learning networks. For me, Eloise Pasteur and Jean-Claude Bradley are at the top of my list. Jean-Claude got me into this whole mess of loving educational technology with his work on UsefulChem and EduFrag gaming. Eloise has been my right hand woman in Literature Alive! in Second Life. She is also the first person I turn to when I need help with anything (ANYTHING!) computer related.

But, I sat down and just brainstormed on paper other people that I always read or look to...people, blogs, organizations...and, wow, I really do have a PLN.

Here are some other peeps and groups that I consider my teachers:

But, this list is small and my RSS is now up to 143 subscriptions, and my TweetDeck blips every 12 seconds because I search for #edutech, #edtech, #English, #teachers, #teaching, #professors, etc.

Yeah, so, ok, I get it. I have a great PLN and it is growing exponentially. I am not a fan of the buzz phrase, but I think the concept is right on. We have people from whom we learn, and these people make us the great successes we are at work, at home, and in life.

So, to my PLN - I love you; keep making magic and inspiring me to be a better teacher, professor, and creator.