Category Archives: Assignment Blogs

Assignment Blog: Final Project 2

This blog will be my last for the course .  I spent the last two weeks fine-tuning the details of my project site, primarily by reviewing each page in detail for errors and omissions;  ensuring that my CSS code was clean and tight; and, above all, ensuring that everything looked the same in all browsers, particularly Safari (and yes, it even works on my iPhone!).  My only true frustration had to do with manually inserting apostrophes and quotation marks for all of my text. My pages used a lot of these symbols; but, quite maddeningly, using the simple <q> coding did not display the properly curved symbols in Safari. When viewed in Chrome, Firefox, and even IE, these symbols came out perfectly with the <q> code.

I asked Prof. Petrik how I might remedy that issue, and she told me to use the “Insert>Special Character” option. This technique allowed me to select from the top bar of the Dreamweaver menu menu the correct apostrophe and quotation marks and insert them into the text; in each case, they appeared as either &#8220 (left quotation mark), &#8221 (right quotation mark), and &#8217 (apostrophe). And so, to ensure that Safari users would see the same thing, I had to manually insert these symbols one at a time by selecting the “Insert>Character> Symbol” features — a task that took me hours to perform. Cutting and pasting this code did not work; I had to make no fewer than four clicks each per entry. But I guess that if we’re going to develop Web sites that look the same across all Web browsers, we have to go to these lengths to get it right. My task would likely not have been so ominous had I used the “Insert>Character” feature at the outset. My only hope is that the developers-at-large figure out a way to allow the same code used in Dreamweaver and other Web-site-creation platforms to speak the same language across all browsers.

Overall, I feel rather proud of my Web site. Naturally, I will continue to tweak it even after the course ends. I intend to keep it active for the foreseeable future and to build another site this summer to host photographs and maps from my last book that never made it into the final published product.  But you can bet on one thing: As soon as the course ends, that crappy Portfolio site of mine is coming down! Hallelujah!

Steve Rusiecki

Note: As of Sunday, 3 May 2015, I have not seen any other student blogs upon which to comment.

Assignment Blog: Final Project

Well, the Final Project is finally here! I would to discuss my adventures with my gallery page this week. I had two choices to make:  (1) Create a gallery page that could host 12 images per the technique offered on the Lynda.com Dreamweaver 2014 CC tutorial, or (2) Create a gallery page using the image-enhancement technique shown to us by Prof. Petrik in class, which limited me to only nine images. Initially, I wanted to include the maximum number of cover or front-page images for each of my page’s three source publications. The Lynda.com tutorial’s technique allowed me to include four images for each publication, all with a nice color change to light blue when hovering over the image. After clicking on an image, the user was taken to a separate page with an enlarged version of the cover or front page matted against a white background and floated left. At first, I liked this technique, because it highlighted, without distraction to the user, the holistic impact of  experiencing the design, imagery, and typography of these publications much like the average American did during World War II.  The only downside to this approach was that I had to create 12 separate Web pages with a “return to gallery ” link on each page, causing the user to open numerous tabs on each click. I could not figure out how to avoid that dilemma.

I was eager to try Prof. Petrik’s technique; but, when I tested the image enhancements on my gallery page, they jumped out too quickly and were too large. The suddenness of that transition almost seemed violent — not an effect that I wanted for this Web site in particular.   I almost went back to the clunkier Lynda.com method until Prof. Petrik told me after class that I could adjust the speed and sizing of the image enhancements without creating a problem in the code. I went home and played with the CSS a bit; and, lo and behold, it worked perfectly. I made the images appear less suddenly (but not too slowly), and their enhanced size — roughly 1.5 times the normal size — looked great. I was sold on Prof. Petrik’s technique, and I’m happy that I was able to make it work to my satisfaction. Frankly, it’s the better way to create a gallery. Now I’m off to tweak the rest of my site and see what else I can improve upon.

Steve Rusiecki

Assignment Blog: Design

For weeks I’ve been blogging about how I thought that black, white, red, and blue were the colors that best represented  the period I was trying to evoke visually on my Web sites — World War II.  Professor Petrik chided me to be more adventurous in adding color to my sites — that it wasn’t a horrible thing to “stretch” a little. My standing fear had been that stark color contrasts might fail to capture the World War II era and, most concerning of all, cause my site to appear “cartoonish” and disrespectful to the men who died on D-Day. But after learning how to colorize photographs in Photoshop and locating actual color images of D-Day, I realized that I could bring more color into my sites and still capture a proper visual representation of the era. Most importantly, though,  I couldstill do justice to the sacrifices made by the men who assaulted the beaches.  Therefore, I was determined to add more color to my Design assignment in order to complement my newly discovered color D-Day photographs and to make the site more visually appealing.  And, above all, I wanted to bring to bear all the skills I had learned throughout the semester, so I used my colorized image of Eisenhower and other design features to add some visual appeal that had been generally lacking in my other assignments.

The background image was going to be my greatest challenge, though.  But before I tackled backgrounds, I wanted first to add something visually appealing and colorful to my <h1> header, which seemed a bit dull. I located a nice color digital image of the Supreme Allied Headquarters Expeditionary Force (SHAEF) shoulder patch. Using what I learned about “position: absolute,” I inserted it to the right of the <h1> header area, and it looked great. The color hinting in the patch allowed me to bring in more colors to the site.  The image’s placement  worked just fine when viewed in Internet Explorer, Chrome, and Firefox. Unfortunately, the SHAEF patch appeared offset when viewed in Safari. After several hours of toying with the CSS, I somehow combined some commands for “position: absolute” with “float image: right,” and everything worked fine. Don’t ask me what I did; all I know is that it worked. It was an annoying glitch — to say the least.

For the background image, I selected a color D-Day image of GIs posing in front of their landing craft in England. The picture had some rich blues, reds, khakis, and greens — all colors that would work nicely with my site design. When I set the image as a background, it fit beautifully. I was particularly happy that the image featured a black GI, a much needed visual acknowledgement of the all-inclusive nature of the American contribution on D-Day.  The only problem is that the image was too clear and bright, taking away from the central focus of my Design site, the subject of which was Eisenhower’s “Great Crusade” message on D-Day. Professor Petrik urged me to lighten the image’s opacity in Photoshop, which I did — with excellent results. When I added the  image as my background, the color was still there but not as pronounced — or as overwhelming — as before. The main body of the site stuck out nicely, and I even changed the font color of my <h2> headers to green, which also worked well.

For the moment, I’m happy with the site. I plan to use a lighter opacity on the background images for my Final Project’s Web pages, and I’m excited to see how they will look.  In the meantime, I’ll keep plugging away!

Steve Rusiecki

 

Comment on Elizabeth’s Image Assignment

Elizabeth’s Portfolio Web Page

This week’s blog required an evaluation of a fellow student’s Image Assignment Web page.  I was assigned to evaluate Elizabeth Moore’s image work by identifying three areas of strength and three areas for possible improvement.  Here is my feedback on her Web page:

Areas of strength:

1. Elizabeth’s ability to matte an engraved image onto a clean background is nothing less than remarkable.  I would rate her results in this endeavor as the strongest skill she demonstrated for the assignment. She took an extremely difficult image; pulled it from a scrapbook; re-sized it; and eliminated, with impeccable attention to detail, all vestiges of the old, foxed, and water-stained background. Not only did she re-matte an engraving with near perfection, but she did it with a color image — a difficult task. I re-matted a color image for my assignment, and it was much more difficult than re-matting a black-and-white image. Wow.

2.  Another strength of Elizabeth’s re-matted image was her ability to maintain the original texture in the colored areas and, more importantly, in the shadows at the soldier’s feet.  She could have taken the easy way out and erased those shadows to avoid having to clean up (or restore) that area for re-matting, but she took the harder path and created a better outcome. Terrific!

3. Elizabeth’s colorized photograph brought out some great background details, particularly the frieze bordering the large poster behind the seated man.  Elizabeth’s color choice in this case was superb and really brought out both the details in the porcelain and the type of bright colors one might expect to see in 1940s Paris masonry. Very nice!

Areas for possible improvement

1. The colorized image of the seated man was good, but the details in his jacket became lost in the heavy application of blue color. I learned the hard way that the lighter touch is best, and Elizabeth certainly has that skill as evidenced by the excellent coloring job on the frieze. I would recommend re-coloring the man’s jacket using a lighter opacity and a judicious use of the Burn Tool.  A lighter color might have also allowed Elizabeth to bring out in starker relief the blood stains on the man’s jacket. More red to signify blood from the man’s injury might have given the image greater visual impact.

2. I understand fully that the shadows at the feet of the seated man precluded a clear picture of his left foot, but I recommend that, in the absence of such detail, Elizabeth use some freestyle coloring to draw at least an outline of where the shoe should be. She did it for the right foot, and it worked reasonably well.

3.  The vignetted photographed is perhaps the one thing that needs the most attention. Frankly, I had trouble seeing the difference in both images. Elizabeth described how she darkened the area surrounding the two men to make them stand out, but I did not see the effect all that well. I would recommend a less opaque darkening effort to achieve the intended effect.

Overall, Elizabeth did an excellent job and has demonstrated an impressive grasp of Photoshop and her ability to include “Photoshopped” products in a highly attractive and engaging Web page.  My thanks to Elizabeth for the privilege of providing feedback on her excellent work.

Steve Rusiecki

Assignment Blog: Typography

My greatest struggle with the Typography assignment was finding the best two fonts that would represent the World War II era and, more specifically, my focus on the print media of that period.  Since I subscribe to Adobe’s Creative Cloud, I have Typekit available as an application. I scoured the available fonts in Typekit for letter styles that would best represent World War II and the fonts used primarily in the headlines and print columns of newspapers.  Since I own original copies of many World War II-era newspapers, I used several of them as comparison pieces for the different fonts in Typekit. Luckily, I found one — a sans-serif font — that matched almost perfectly the font style used in  headlines of the period. The name of this font was League-Gothic, and I downloaded it into my Typkekit “kit,” which could hold only two fonts for the Web at a time.

My next search was for a serif font that would match, or at least resemble, the main-body type found in the  main columns of period newspapers. But, more importantly, I wanted a font that would be easy on the eyes and large enough to keep each line of text on the Web page between 14 to 17 words. I had difficulty finding good examples; but, after switching back and forth between and among several “candidates,” I stumbled upon a font that seemed perfect: Leitura-News. It had a unique style that was easier on the eyes than the actual type found in the bodies of World War II newspapers, but it also evoked an art-deco feel that channeled the era. I was hooked! I downloaded the font to my Typekit “kit” and prepared to embed it in my page using the enabling code provided.

But before I settled on these two fonts, I had heard several of my fellow students in class, when critiquing my rather blandly styled Portfolio page (lots of blues and grays and, yes, dare I say it, Arial font!), state that for them, World War II type evoked a kind of “stenciled” look backed up by lots of “green” colors.  My experience with World War II images and artifacts over the years did not necessarily support this stylistic impression of the era. “Green” was actually an olive drab that leaned closer to a brownish tint. In any case, I wanted to see if I could locate any fonts that supported both my historical impression of the period and my fellow students’ impression of it. I located online a Web site for free fonts (www.dafont.com) that actually carried a selection named “D-Day” — the subject of my primary research interest. Amazing! But I must admit that when I opened the D-Day font, I found it to be awful. I knew instantly why my fellow students invoked a stencil-type image of fonts when thinking about things of a military nature. The font style resembled the letters used in the title image of the old TV show, MASH.  Not only did the MASH letters not resemble the stencil style used on World War II footlockers and vehicles, but it was more closely reflected the font styles that I knew were uniquely associated with the Vietnam period. In short, the D-Day font was “ahistorical” in the extreme and, dare I say it, anachronistic.

After searching for other fonts on other sites, I realized that my first two Typekit choices — League-Gothic and Leitura-News — were the best options. I pasted the embed code for each font into my Typography page’s HTML code. Strangely enough, League-Gothic was already a font selection in Dreamweaver, so the embed code was unnecessary for that font choice. Unfortunately, I would have to upload the files and view the site in a browser in order to see Leitura-News in action. This aspect of Dreamweaver is a downside for me. But when I viewed my font choices live on my Web site, I was very pleased with how they appeared and, most importantly, evoked the World War II era of print media. Not a bad start for a Web-site novice!

Steve Rusiecki