lovehistory.net

I’ll admit to struggling a bit with this week’s videos. I’ve been using Photoshop for many, many years, and if there is one thing I know for certain it’s that there is pretty much nothing about that program that is intuitive. Everything I do using that program is self-taught and probably not at all the way one is “supposed” to do it. I learned more about the Save to Web box in 6 minutes and 46 seconds than in the 2 years I’ve been futzing with CS5 on my own. So many things I didn’t know how to do! I feel so uneducated! So far these videos (and I’ll admit I’m only about halfway through) are a mix of overview and surprising new information tucked away in functions I’ve already used with what I wrongly thought was thoroughness. I find these videos to be a lot less hands on, at least at the point I’ve reached, and as I usually use Photoshop to edit photography meant to be displayed at full optimization, all the time spent on making images lighter and smaller seems baffling. But I’m glad to finally be getting some guided learning about this very sophisticated program that goes beyond editing in RAW and manipulating light and color. And to my classmates that have never encountered Photoshop before: it can be just as frustrating of a time suck as coding, but once you get trapped it’s actually very fun. And there are ways to simplify the process too once you’ve bumbled through the first round of editing to find something that works.

As for The Non-Designer’s Photoshop Book, I’m similarly thrilled and baffled. Shadows and Highlights, where have you been all my life? Only a few months ago I was bemoaning the fact that my skills with the self-healing brush failed at removing phone lines from a photograph and low and behold, I only had to read 28 pages to find the solution to that vexing problem. But again, a word of caution. The solutions presented are really great, but just because you follow the steps to the letter doesn’t mean things will turn out the way you want them too the first time. Sometime execution is easier said than done, and sometimes you just have to futz with it for a while. Tools don’t always work right, settings need to be changed, and each image is its own beast. They have individual personalities and will require individual attention. One reason our videos this week are so tedious is because our teacher is demonstrating the amount of tinkering necessary to get what you want. In fact, she’s probably cut down on the amount of tinkering and sheer frustration that can sometimes go into making images look and behave as you want them to. That said, layers are your friend! And yes, Photoshop can be just as fun as it can be challenging. Try to keep that in mind too. Look at it as a toy box that just happens to be full of sophisticated equipment.

As for our color sites, the short articles were very helpful, and I’m glad to have the list of tools designed to help us select colors. I am always wary of colors because I know how hard selecting the right ones can be. I’d like to share a link to a color choosing tool that I really, really like: The Color Scheme Designer. This page offers an amazing variety of functions that helps you design whole color schemes. It’s also just fun to play with. I highly suggest you give it a look.

Oh! I’ve also made some changes to my type page. Still not perfectly happy with it, but I think there is some improvement, and I have addressed some, if not all, criticisms, hopefully with a certain degree of success.

Edit: This week I have comment on Geoff and Richard’s blogs.

Edit: My type page design is now mostly polished and done, complete with my executed plan to included Courier New in the design. It’s very spartan – I am realizing that I am perhaps too much of a minimalist – but I think it’s a good first start, especially considering how frustrating the design process was at times. Those footnotes! I still can’t figure out how to italicize the titles, but I have to step away for a while or I’m going to pull out my hair. /Edit

Here is my type project as it stands so far. It is not finished in so far as meeting the requirements (no endnotes yet, for example), but I didn’t feel I could discuss it in my blog without posting a link, and it’s finished enough to discuss my font choices.

I am not happy with it. Well, I’m not completely happy with it. I found my biggest challenge for this project was selecting a set of different fonts that went well together and also matched my historic time period.

The text of the page comes from an old paper I wrote as an undergrad on civil defense, which I examined through the lens of a short story by Philip K. Dick (the king of science fiction) entitled “Foster, You’re Dead.” Because this is a web format, I tried to grab a few key paragraphs from the much longer essay and break them up using sub-headings so that the flow of the text would be logical and easy to read on the web, without being TOO texty. You know, so as to keep the attention of those roving eyes. I’ve chosen this specific topic because it fascinates me, and I’m considering trying to do something concerning the civil defense program for my final project. The image I’ve chosen to include is actually taken from the National Archives’ website (if you click it, you will be taken to the image’s specific page in their catalog), and at this stage I’m pondering how I might make use of their digital and physical archives to help my own project.

Anyway, more specifically about the type. I decided to host all my own fonts, partially because I thought for this exercise it would be easiest and cleanest in my code if I began by working only with @font-face. I think this decision must have made my life about 100% easier in terms of building, because I had zero trouble getting my fonts to work (at least as far as I can see).

I’ve mentioned before that I have a weakness for grunge fonts, and I was pleased to discover that I could actually sneak one into my header, HVD Peace. The design of my page is supposed to evoke the feel of a fallout shelter sign (hence the color scheme) – one that is worn, a relic. HVD Peace, despite its name, has a military and perhaps more appropriately utilitarian appearance to it. It mimics a worn, graffiti stencil, giving it the sense of being aged that I wanted. I actually built a second grunge font, Gesso, into my stack. I really like Gesso, and it was just a bit too modern for this project, but if for some reason HVD Peace doesn’t show up for some, Gesso still presents the aged look, but it casts a more sci-fi feel to the project, especially as a serif. I think that’s actually okay – my paper does discuss science fiction, after all.

So the logo font was the easy part. It’s the body I struggled with and that I’m still not happy with. I really like my sans-serif, Gentium, which I’ve used in various weights and styles for my headers, caption, footer text, and (unfinished) navigational menu. I had a lot of trouble finding a serif that I liked, probably because I just have my heart set on Futura. That font is so perfect for the time period, especially something attempting to mimic the appearance of instructional text. I think it would’ve looked great. But, it’s not an option – it’s not a webfont. So after much back and forth I went with Roboto. I’m still not sure how I feel about it. I may still change it.

One thing I do want to do between now and Monday is actually work with some Courier New. Those basic fonts can work for us too! I want to use it as a stylized text. I hope to add another header in between by “subtitle” and my first “subsection” explaining very briefly that the text is an excerpt. This little bit will be in a larger size. I also want to style my pull quote in Courier New, if not Gentium. My thinking with Courier New is that the font will give my page a sort of “typed,” look, as it the text were being pulled from an old military report. If it doesn’t work, maybe I’ll post screenshots just to show the difference, or to demonstrate visually what I was thinking.

All in all it was a fun exercise, but I found trying to make the page period appropriate to be most difficult. In my case, my content speaks to both a military theme and also a cultural, science fiction theme. Most graphic design I see around Civil Defense spins the biazzaro, Philip K. Dick, angle of it. I went the other way. But my choices were also dictated by my images. I don’t hold the copyright to any pictures of families sitting in their shelters in front of mountains of canned goods, smiling like they’re not prepared for the nuclear apocalypse. Copyright, I’m anticipating, is going to be my biggest problem. So goes the life of a 20th century cultural historian.

Edit: This week I commented on Megan and Jeri’s blogs.

To those of my classmates who chose not to pay for the exercise files that accompany the lynda.com videos, I highly suggest you invest the extra $12. I found myself zonking out on a lot of the videos this week, as many were basically filmed PowerPoint presentations, but when we finally got into the code, being able to work along with the instructor helped me focus my attention. Additionally, and perhaps more importantly, working along in the exercise files makes learning and understanding the coding about 100 times easier, at least in my opinion. It certainly helped make Dreamweaver feel manageable after after that first set of videos. It’s the difference between learning and doing. We’re all poor, I know, but if you’re struggling with building I suggest you at least try out the exercise files.

I found this week’s videos helpful in explaining how to integrate web fonts into our own pages. It seemed that, in a way, this series was a little bit of a retread of what we watched last week, minus the strong emphasis on design principles. That is okay with me, though. The focus and reiteration of these lessons helped reinforce the technical aspects of selecting and using web fonts on our pages. Integrating good design technique is what I suspect will be the difficult part. The sheer amount of fonts in and of itself is overwhelming, and I’m glad for all the websites this instructor showed us to help us work to build font stacks and work with fonts in browser.

At this point I don’t really have anything profound to say about Stunning CSS. It’s more technical manual, more stunning than gripping, however, I did sit up and say “Ahh,” several times, particularly when reading about how to cheat bots when using header images as backgrounds. I am both anxious and excited to try that trip. I suspect this book will become more useful when we begin to apply the knowledge we attempted to absorb this week, a handbook whipped out every time a building problem rattles nuggets of memory. And if all else fails, we can use the index.

I have commented on David’s blog this week.

Where to start this week?

I’ve always enjoyed working with fonts – I have a special weakness for grunge fonts, unfortunately – but I’m not sure I’ve ever been very good at it. Therefore I found this week’s readings, the film Helvetica, and the lynda.com tutorial Typography for Web Designers to be very helpful in understanding why designers make the decisions they do concerning fonts. It is scientific and mathematical as opposed to simply artistic, and it is also historical. Without a basic understanding of all of these elements, it is much more difficult to use fonts properly.

I tried to put some of the principles into practice when I worked on designing my portfolio project – I’d never thought closely about using fonts to establish visual hierarchies as well as meaning on the page – to me hierarchy had to do with placement of elements and the way fonts looked was incidental – a decision based on gut feeling more than anything else. I’d also never thought about how variation within the same font is just as important and powerful as variation between fonts. As is such, I kept my font selections simple in my initial design for my portfolio site and instead played with italics, sizes, and weights to create visual difference on my page (and to direct visual flow, as discussed in White Space is Not Your Enemy). I watched the lynda.com videos on embedding fonts and found them to be very exciting, but I have not yet tried this technique on my own site.

One thing I struggled with was the logo. I know it is best to have not only text-based navigation, but a text-based header. A properly chosen and stylized font can give the same appearance of an image. And I know at this point that logos created in Photoshop must be viewed as blueprints. But at this stage I was unable to figure out using Dreamweaver how to layer text over my image, which I know is possible using CSS. So I uploaded the JPEG logo with text as a placeholder of sorts to demonstrate my planned intention.

To explain the logo: I chose the font Neuva STD because I think it looks right for the 1950s period of the image, and I chose to italicize the text and add an exclamation mark to mimic the ebullient advertising copy of the day. The image itself I purchased from iStockphoto.com. I’m not sure yet what my CLIO II personal project will be, but I’m hoping it will have something to do with domesticity in America in the 1950s (my areas of study are more thoroughly explained on my About Me page), so I selected an image representative of that time period. The color scheme on the page is also meant to reflect the time period. The yellow reminds me of the color of the refrigerator we had while I was growing up. Even if my CLIO II project ends up having to do with a different time period (as it very well might due to copyright restrictions), I can still use this image and concept at a later date. To me this future usability justified both purchasing the image and building a design around the related concept.

The size of the text in the body is 1em, which I know might feel “horsey” in terms of design, but I’d like to leave it for now. I tried designing with a smaller font and didn’t quite like the look. I think the larger font almost gives the page a more playful feel, in line with the aesthetic I was trying to convey in the image. Also, I get migraines reading small text on computers, so it was just easier for me to work with the larger font. I’m biased, I admit it. The navigation, in contrast, is smaller and italicized, a visual contrast I liked. I also chose to right align my validation badges in the footer to balance all the elements that are on the right side of the page at the top. Adding simple borders between the header, footer, and body served to break up the content without creating distracting chunks of color. I tried designing with different background colors and found I preferred the simple, clean look of a uniform background.

Wow! I did not intend to spend so much time in my blog talking about my design process but it took up a lot of frustrating and fascinating time. And what was most interesting to me was that I couldn’t move forward with other elements of the design until I was happy with the fonts, especially after the deluge of information about them. I scrapped my page three times before getting it right, and that third time the first thing I did was figure out the fonts. After that everything else seemed to flow into place.

Coincidentally, by that time I was much further along in the lynda.com tutorial. What I learned more than anything else from those videos is the importance of working with your fonts as design elements and not as text. Viewing the tutor using the fonts in word processing software to test them out PRIOR to putting them into her code blew my mind. It reminded me of how I sometimes “draw” websites in Photoshop before I try to code them (like the logo I made for this one). Visualizing fonts in this way really helped me when I went back to recode my own page. I love working with Photoshop – drawing there makes things much easier. In the future I will try to draw with fonts as well.

I found Thinking with Type to be most useful in terms not only of the way it historicized fonts and types, but in all the visual examples it provided of type in action. Simply looking at other uses of type helped me understand again that type is not just text, it is a design element. And it also helped my own thinking to see the many, many different ways people use type, and the many different kinds they use.

That thought brings me to Helvetica. I have nothing against Helvetica the font, but as I watched the film I found myself most identifying with the designers who hate Helvetica and search for other ways to use type. Then again, as I said, I love a good grunge font. But the longer the film went on, the more static and ubiquitous Helvetica became. I knew it was popular and beloved but I didn’t know just how pervasive it is. It also made me think of my own experiences with Helvetica. I’ve never been able to use it my own design (here I am mostly referring to images and text together) and have it look right. Here it is, this clean and simple font, and I am usually very minimalist in my own photography, and I just can’t make it work. It always look wrong. It could have to do with other things, like the way I am styling the text with effects like drop shadow or playing with the fill settings, or even the words I am trying to use with the image. But it’s really not always as easy as it might look to design with Helvetica and have it turn out as satisfying as it can be. Then again, my favorite sans-serif is Futura, so maybe I’m biased.

In any case, I’m looking forward to actually trying font embedding in my own site, and to figuring out a way to perfect my logo. All and all an interesting week.

Edit: This week I have commented on Sheri and Richard’s blogs.