Archive for the ‘Tutorial’ Category

Getting Started in Website Design

September 18, 2011

Hello Everyone,

If you have ever thought about creating your own website, but didn’t know where to begin, I have created some online video tutorials to help you build your first website.

I have “unofficially” identified six levels to Web Design & Development. These include, but are not limited to, the following:

6 – Content Management Systems (Joomla, Drupal, Plone, etc.)
5 – Interactive Design & Integration (Adobe Flash & Microsoft Expression)
4 – Template Design & Modification
3 – Visual Design (Extensive knowledge of Photoshop and Code is extremely essential.)
2 – Code (HTML/HTML5, CSS3, XML/RSS, JavaScript, JQuery, PHP, etc.)
1 – WYSIWYG Editors (a.k.a. “Web Editors”, “Text Editors”, etc.)

Now, I have creating professional websites for more than a decade and I am a coder (HTML, CSS, XML, RSS, JavaScript, etc.) but I am also trained to use web editors such as Dreamweaver. I’ve used it [Dreamweaver] way back when it was just version 3, no, not CS3, but simply 3 and Macromedia was the company that created the software. And although Dreamweaver is the king of the web design world, its price tag maybe out of the financial reach of many people. Even for students who have academic discounts – it can still be costly.

But, there are alternatives! KompoZer and Amaya are both Free Open Source Software for PC, Mac and Linux.

I’m currently conducting Graduate-level courses which require students to design, create and upload their own creations to the campus servers. Some students are familiar with Dreamweaver and have been encouraged to continue to utilize the multitude of features and flexibility this software has. However, many more students have never experienced the art of designing and creating their own sites.

Mind you, these students are not Comp Sci Majors. So, this experience should be as stress-free as possible. I’m having the majority of them begin at level-one and work with WYSIWYG Editors. For those who gravitate towards more challenging projects, I’ll introduce them to some level-two coding. As well as for those who possess some Graphic Design chops, we’ll touch on a bit of both level-two and level-three.

To begin, students can download either (or both) Amaya and KompoZer. As I stated earlier, I have created some online video tutorials to take them (or you) step-by-step in creating a basic website using a “cookie-cutter method”. Why, you ask? Simply put, Graduate-level students have a lot on their plate. Projects and assignments will usually have deadlines around the same timeframe as everything else – so, this method ensures that the website is done as quickly and is fully functional in a short period of time. This method is not just for students, but for anyone who is looking to design and create their own site for whatever reason.

So onward to designing a website.

1.0 – Make a list of items you want to have on your website. Its good practice to group like items into categories which will later on become the main links of your site.

2.0 – Once the list is completed, create a “storyboard”. This “storyboard” will serve as a “blue print” to create your site. It may look like a flowchart, a wireframe, a schematic, etc. The purpose is to visualize how your site is going to connect one web page to another.

This website can help you create you “blue print”: Love Charts – http://www.lovelycharts.com/

2.1 – Following the “storyboard”, you’ll want to sketch out at least two of your web pages. You don’t need to have drafting skills to design these two pages, but this is another way to help solidify your vision on how your finalized website will look once its completed.

3.0 – Now, you’ll need to download a web editor. Both amaya and KompoZer are free (and legal) to download. Adobe Dreamweaver is available for a 30-day free trail. Believe it or not, Microsoft Frontpage is still kicking around in various circles, even though Microsoft killed it in Novemeber of 2006. Why is it still around? Well, it used to be free.

Downloads:
Amaya – http://www.w3.org/Amaya/
KompoZer – http://kompozer.net/
Adobe Dreamweaver –  http://www.adobe.com/products/dreamweaver.html

3.1 – Some have asked about creating a website using online tools such as Wix.com, Weebly.com and Webs.com – and although they do serve a purpose, they are still very limited in their features, functions and flexibility.

To learn how-to work with any of the software mentioned here, I have included the links to my YouTube Videos along with descriptions for each.

[A] Installing Software onto a Jump Drive –

Description:

Educational Technology –
I’m demonstrating a video on “how-to” download and install software onto your jump drive. The reasoning behind this is a simple one – You may go into a computer lab/Internet Cafe, to do some work, only to find that the software you need is not installed.

With this method, you can sit on virtually any computer; plug in your jump drive; launch the software; do your work; and then save it!

In this demonstration, I’m focusing on properly installing KompoZer – a Free Open Source Web Design Editor – onto my jump drive. However, the software can be whatever you need it to be, The final stages of the video is a bonus, since the video shows you how to SAVE back to the jump drive.

[B] Create a web page in Amaya and save to jump drive –

Description:

Web Design: Beginner Level – Amaya is a Free Open Source application for creating websites. A variety of tools that most people will find intuitive. This module will demonstrate how-to create a basic web page and then save it to a jump drive.

[C] Create an entire website in Amaya –

Description:

Web Design: Beginner Level – Amaya is a Free Open Source application for creating websites. A variety of tools that most people will find intuitive.

In this module, we’ll create a basic website. First up, design one “perfect” page. This page will have a HEADER, NAVIGATION BARS, space for the BODY of text (which comes in later), and FOOTER information.

You can, at this time select a background color. If you decide to go with a dark background, select light-colored text. (i.e.: Black background works with text that are white, yellow or even orange.

We then use “SAVE AS” to save the page as the different web pages for the site. Important to remember to give each individual page its own TITLE. The TITLE is what appears in the upper left-hand corner of all browsers.

In the next module, we’ll go over linking the NAVIGATION BARS.

[D] Create External Links –

Description:

Web Design: Beginner Level –
This module will demonstrate how to create external links to other websites from your own site. This demo uses the following software: Dreamweaver CS3, KompoZer, FrontPage.

Chapters:
FrontPage = 0m14s || KompoZer = 2m01s || Dreamweaver = 3m24s

[E] Creating Internal Links in Dreamweaver –

Description:

Web Design: Beginner Level –
In the module, we will cover the following:
1.0 – Create additional web pages
2.0 – Create internal links with the Navigation Bar
3.0 – Copy & Paste the Navigation Bar
4.0 – Save the web page you are working in

This demonstration uses the following software: Dreamweaver CS3, KompoZer, FrontPage

Chapters:
1.0-Create a New Page = 0m33s || 2.0-Save The Page = 0m59s || 3.0-Linking Your Navigation Bar = 4m04s || 4.0-Copy The Navigation Bar = 5m43s

[F] Adding TITLES to Web Pages –

Description:

Web Design: Beginner Level –
This module will demonstrate how and where to create the TITLE for your web page(s). This demo uses the following software: Dreamweaver CS3, KompoZer, FrontPage.

Chapters:
FrontPage = 0m16s || KompoZer = 1m46s || Dreamweaver = 2m32s

I am currently working on additional video tutorials to supplement the course content. If the information found here is helpful to you or if you have questions, comments and/or suggestions, please feel free to post your thoughts here in the comments or on YouTube.

To quickly find all these videos on YouTube, in the search box, type in the following: VegaDMS (It is cap-sensative.)

Thank you very much. Til next time…

You have been Teknolized!
-VegaDMS

Advertisements

3D Objects in Photoshop CS3+

August 3, 2011

Hi Everyone,

Its been a while.
I’ve been busy with re-organization and re-scheduling things around for the coming Fall 2011 semester as well as for my company. Any way, let’s jump right in with a sweet little workflow to go from creating a 3D Text to importing it into Adobe Photoshop CS3 or newer.

This goes out to all of my Graphic Designers, Comic Book Creators, Animators, Motion Graphics Designers and anyone who is interested in creating 3D Graphics and using Photoshop.

Keep in mind the following ONLY works with Photoshop CS3 and UP.

Steps:
1.0 – Create, say, some text in any 3D program.
Use: Maya, 3DS Max, LightWave or Blender (which is FREE to download).

2.0 – Give your text a 3D look via the EXTRUDE tool.
You’ll need to become familiar with the interface of the software you’re working with.

3.0 – Set-up the lights around your text.
I usually set-up a three-point lighting scheme – sometimes more lights depending on the complexity of the design. I found 3-pt lighting works well on 3D static text.

4.0 – Save your work in its native format. Then EXPORT your work as an OBJECT (.obj).

5.0 – Open Photoshop CS3 or higher.
I’ve tried in Photoshop CS2 and the tools needed to pull off the following are not available in this version.

6.0 – Open a new canvas with the desired aspect ratio.
Your aspect ratio is based on the final outcome of your design. In other words, what do you wish to do with the finished design? Will it be wallpaper? What is the aspect ratio of your desktop? If you’re going to use it in video – what was the video shot in 4:3 (standard) or 16:9 (widescreen)?

7.0 – Once this new canvas is open – go to LAYERS > 3D Layers > New Layer from 3D File Browse for the OBJECT (.obj) you saved earlier.

8.0 – Your 3D Text will now appear on the screen. Look at your LAYERS palette. You’ll notice there is a small icon within the icon of the layer. Double-clicking this small icon will give you a 3D Toolbar at the top of the Photoshop interface.

9.0 – With these new tools, you will be able to manipulate the angle of your text and position it exactly how you want it.

10.0 – There are several ways to add color to your 3D text. One is to place your mouse on the larger icon in the LAYERS palette, hold down CTRL and click to select the entire 3D Text.

10.1 – Add a new layer. Select a color and apply it. Use the BLEND modes til you see something you like.

[design sample]

Educational Technology

Let me know what you think of this feature and I’d like to see some of your creations.

Currently designing 3D/Photoshop workshop for the 3rd or 4th week of the semester. If you have any ideas for a workshop, please let me know – A.S.A.P. since I have to request the lab very soon.

Thanks.

-VegaDMS