Computer Repair Blog

Sep
18

By

The Bento Box Demo Website

Category: Graphic Design, Website Design Tags: , , , , , , , , , 4 Comments

On our website design page, we recently added a new demo website to the portfolio. It is an example website showcasing a fictitious restaurant.

It was conceived to demonstrate a creative way to create a website using only a text editor and The GIMP, both freely available. It use image mapping and HTML/CSS. There are many pages that can be accessed by clicking on the page titles found throughout the bento box image. The text for the page appears in the white space to the right of the image.

Bento Box Website Thumbnail

The Bento Box Demo Website

You can get to the website by clicking on the image above. Have some fun playing around with it and follow on afterward to learn how it was done.

How was it created?

The Bento Box Demo Website was first created by opening an image of a bento box in GIMP. The image was found online by doing a google search. The GIMP project file can be downloaded here.

The first step was to create labels for the various pages. These were created using the text tool in GIMP and applying the text to individual layers. Then, by clicking on “Filters>Web>Image Map” you can pull up the image map menu that lets you select various regions of the image to use as hyperlinks. You can choose circle, rectangle, or polygon to select the regions, then just click again to pull up a dialog box that allows you to assign the URL. When all regions have been selected, click on the save button to save the .map file. This file can be renamed .html if you wish as that is exactly what it is.

From there, the map section is copied into the HTML files of the various pages. To see how the rest of the code was constructed, have a look at the page source. In firefox, you can easily do this by right-clicking on the page and selecting “View Page Source”. All of the pages are valid per the W3C validator.

Please note that this site is best viewed with 1280 resolution or above. Anything less than that will break the text box on the right.

Enjoy and feel free to leave comments!

Jul
18

By

How to Resize and Edit Images Using Free Software (GIMP)

Category: Graphic Design Tags: , , , , , , , , , , 1 Comment

Windows users are not well-equiped to edit photos and other graphics from an initial setup (new computer or new installation of windows). But, there’s a great program that is free for users of Windows, Mac, and Linux alike. It’s called GIMP and stands for GNU Image Manipulation Program. You can download it here: http://www.gimp.org/downloads/

Once installed, you now have a fully-functioning graphis editor that is very similar to photoshop, for free!

Open it up and load a photo by clicking on “file” and then “open”. Once your photo is loaded, you will probably want to resize it. Why? Well, most cameras these days take high megapixel photos that are great for large prints, but unnecessarily large for the web. By shrinking the photo, you will make it more web friendly by reducing its size which increases its load time (the amount of time it takes for an image to be downloaded and displayed) and takes up less space on your computer as well.

To resize a photo, click on “image” on the top menu of GIMP. Then choose “Scale image”. A window will pop up that gives you the current settings for the photo size. You will want to adjust the length and/or width. Without going too much into aspect ratio, let’s just say that you normally want to just set the width at 800 and then click the “ok” button.

Your image will likely look very small now. This is normal because GIMP is still using the same zoom settings from the large, untouched photo. To fix this, simply use your “+” key to get the photo to a proper viewing size.

Now, we can edit the photo.

To crop the photo, simply select the rectangular select tool (which looks like this ) and drag a box over the portions of the photo you want to keep. Then, click on “image” and then “crop to selection”. You should now see only the part that you selected.

Now that you have just the part of the photo you want, lets play with the colors and overall look of the image. Go to “Colors” and then click on “Levels”. This will present a window that shows you a color graph. Without getting too technical, this is basically showing you where the concentrations of color and light are in your photo. For our purposes here, simply click on the “auto” button and check out the results. Feel free to mess around here. Auto does not always give the best results. Drag the three triangles under the graph to adjust the photo image.

Remember to save your file once you are done editing!

There is much, much more you can do with your images in GIMP, but this should get you started. Have fun and please leave a comment if you have any questions.

Enhanced by Zemanta