A New Project I'm Working On.

Having mastered the web comic trade like no other I've recently been working on a project involving a blog and continuous learning exercises. Basically it's for graphic designers like me who have some web knowledge but want to learn everything hardcore. I'm going to be documenting my process. It's not a tutorial, per se, but a mish-mash of information (including tutorials and links to tutorials) to help everyone who wants to learn web design learn that subject with clarity, ease, inspiration and accuracy. I might also do a graphic design tutorial on things like Illustrator. Photoshop and Illustrator are huge programs that have basic functionality people need to know about when they're using it for actual projects. There's also a lot of stuff you really don't need to know about, especially when they're in there specifically for certain professions. Functional teaching, I guess you could say.

So if I buy a book on CSS and it sucks I'll be able to write up about it, why to avoid it and what they could have done better, and perhaps give an alternative to read instead. So instead of going through Amazon and reading a crappy review (out of context of learning a subject) everything will be connected in one continuous effort. I'll also be able to place that book in the Beginner, Intermediate and Advanced ranges for the audience. I'll also be interviewing notorious web designers to get their feedback and advice for everyone out there.

I'm a pretty good graphic designer, but I really want to learn the online realm more and it will help that I have experience webmastering on my old gaming site WrestlingGames.com (#1 wrestling game site on the internet including IGN and GameInformer circa 1999 - 2001). But I'm talking about hardcore CSS, PHP and MySQL.

Hopefully in the end it will end up helping people out, and keeping me motivated in my goals (because I'll have an audience to answer to).

Anyway I designed the logo so far (and the basic layout) for the website blog. Check it out. I'm hoping there's some interest for people to learn this stuff so we can keep it going along. So far I've gotten positive feedback about it but TNL is usually more open and honest.

http://www.the-nextlevel.com/board/a...1&d=1201754546

(We don't know what we're doing) made me laugh more than Robobo ever did XD

I however, like the idea, the learning process is always an interesting thing to watch. Or read.

It seems like a pretty noble and interesting idea to me. One wonders, though, if there might not be some commercial avenue you'd take this down once (or if) it becomes popular enough.

I will use this.

also: i recognize that font. noob.

I don't like the spacing between the O and W in "how" either.

Other than that, sexy.

Quote:

---

Originally Posted by FuryFox

It seems like a pretty noble and interesting idea to me. One wonders, though, if there might not be some commercial avenue you'd take this down once (or if) it becomes popular enough.

---

Once I'm done learning Web Design I plan on using the site to continue learning everything I want to. I want to learn Spanish. So this can be applied to doing that as well (helping people find good tutors, good reference on and offline, etc). I hate to use the term tutorial because it really isn't. It's like a guide of what to read (including tutorials, books, references, etc.) If it gets popular I'll put up ads. It's also pretty keen for book links to Amazon too. I mean, I WILL be writing tutorials if everyone else's are lame or aren't simple enough for beginners to follow... but that's only a small portion of the help I want to provide. But at its core I just want to learn web design and keep a log of my progress. Formatting it so others can learn is just my way of giving back to a community I plan on pilfering pretty badly along the way.

I absolutely fucking HATE it when I'm reading a tutorial and it casually drops pretty important information you need explained but assumes you know it (because it's such an afterthought to them). The less this happens when you're learning something the easier the transition is from noob to amateur to intermediate. Being a pro comes from experience, I've found from my experience.

Quote:

---

Originally Posted by Josh

I don't like the spacing between the O and W in "how" either.

Other than that, sexy.

---

I kept the kerning pretty lazy because of the handwritten nature of the font. I think it's a free font I used which is probably why it's easily recognized. I'm not sure though, I just went through the library of fonts I already owned and found one that made the logo look less mediciny and more stylish.

This is the best idea anyone's ever had, Andrew. I look forward to future development.

Quote:

---

Originally Posted by Drewbacca

I absolutely fucking HATE it when I'm reading a tutorial and it casually drops pretty important information you need explained but assumes you know it (because it's such an afterthought to them).

---

the photoshop bible is just one example of this. chapters 1-3ish are really simple shit and then suddenly they start producing some results without actually explaining them the whole way through.

Quote:

---

Originally Posted by Drewbacca

Basically it's for graphic designers like me who have some web knowledge but want to learn everything hardcore.

---

http://kirupa.com/, like site title says, a resource for making designers better developers.

Also, I love the idea, as an interactive developer who is admittedly pretty bad (but getting better) at design, I'll find it interesting to see the learning process in the exact opposite situation as me. Being a designer trying to become a better developer.

Good luck man, and if you need any help, resources, questions, comments, or whatever I'd love to support a project like this.

i have absolutely NO web skills or knowledge :(

Thanks Brand. I might take you up on your offer some day. For the design side of things I know a lot of resources on the web to help you get good materials. Good brushes and vector art coupled with knowledge of Photoshop and, more importantly for the graphic designer, Illustrator and Quark XPress (or InDesign) is key.

There are also other techniques 100% certified to make you be able to render style on to a blank page. I am a firm believer that while creativity can't be learned, you can really push the limits of your mind by creating a really good environment for creativity to prosper.

I'm finishing up the rough design of the blog tonight in lieu of going out. Once it's done i'll post it up. It's a pretty easy blog format.

whats a general ratio of people who still use Quark? it's been my understanding that the shift has movied more towards InDesign lately. (i use either or. just wondering)

i was actually suprised at one interview i went to. they used Corel lay out their stuff. i never used it before and when they asked if i had ever used it i said no. then i sat down and in 10 minutes made a rough layout since it was so similar to Quark. i never even knew they had something other than Painter before that interview.

90% Quark Xpress still.

Everyone loves InDesign, but it's going to be a slow transition if it ever even happens. 90% seems high, but 2 years ago Quark was like 98% so there is some movement. I'll use whatever, but since I have more time logged in Quark I'm more comfortable with it. Some printers won't even accept InDesign files. Those are usually the guys who still have Quark 4.0 on their primary ripping computer though.

Quote:

---

Originally Posted by Dyne

i have absolutely NO web skills or knowledge :(

---

With our powers combined we could be a force!

I have admittedly very little design knowledge despite having gone to art school, yet am pretty well versed in many programming languages (with a fond love for ECMAScript based languages).

Quote:

---

Originally Posted by Drewbacca

90% Quark Xpress still.

Everyone loves InDesign, but it's going to be a slow transition if it ever even happens. 90% seems high, but 2 years ago Quark was like 98% so there is some movement. I'll use whatever, but since I have more time logged in Quark I'm more comfortable with it.

---

It's amazing the difference in usage percentages that you get from people who aren't trying to pimp InDesign out. I went to a CS3 conference back in July that covered mainly InDesign, and some Photoshop (yet completely lacked Flash, which is what I went for!!!!). The lady who led the conference kept on stressing numbers that up to 60% of Quark users since CS2 was released have since migrated to InDesign.

I know my agency uses InDesign, but I have no doubt your numbers are far more realistic than Miss Adobe Pimpstress.

I hate Quark.

I grew up on PageMaker 7.0. OLD SCHOOL. InDesign is my buddy.

Jeez, it seems like half the people hiring are looking for Quark. I've even seen some people stress not InDesign.

How hard is Quark to learn? I've played around with it a little and it seems like it's pretty straightforward.

InDesign is much more user-friendly once you learn the conventions it uses. Quark Xpress seems a little more natural once you get used to it, but there is definitely a learning curve due to the reliance it has on print methodology (clipping paths, colours and prepress techniques).

yeah i'm gald i bit my teeth on Quark first because then InDesign was a breeze.

Hrm, i've only seen the surface then. Can anyone recommend me some good websites or books that would help me learn it? I'm trying to beef up my arsenal.

i learned Quark in uni. used a book called QuarkXpress 4 (shows my age) by Elaine Weinmann when i started. then just being with it constantly showed me the rest.

Quote:

---

Originally Posted by Finch

Hrm, i've only seen the surface then. Can anyone recommend me some good websites or books that would help me learn it? I'm trying to beef up my arsenal.

---

idunnohow.com ;)

Actually I can't really help you (lol sorry man). I went to school and learnt it through using it and the teacher's lessons. I didn't even buy the "required reading" text book so I can't even point you to that.

I've got a good leg'up on the design so far. I've attached a thumbnail of my progress tonight.

Quote:

---

Originally Posted by Drewbacca

idunnohow.com ;)

---

I thought you might say that. Eh, well i guess it's a trip to B&N sometime this week for me. I'm decent at figuring stuff out myself, so maybe i'll just try some projects with it and helpfile what i can't figure out.

Quote:

---

I've got a good leg'up on the design so far. I've attached a thumbnail of my progress tonight.

---

Looks nice. The bands in the upper right are a little weird. Are they straight and is this some kind of optical illusion or is it clever self commentary on not knowing what one is doing?

Quote:

---

Originally Posted by Finch

I thought you might say that. Eh, well i guess it's a trip to B&N sometime this week for me. I'm decent at figuring stuff out myself, so maybe i'll just try some projects with it and helpfile what i can't figure out.

---

I'd help you out if I knew how. If you have any questions once you begin learning just post them here or PM them to me and I'll answer them as best as I can.

Quote:

---

Looks nice. The bands in the upper right are a little weird. Are they straight and is this some kind of optical illusion or is it clever self commentary on not knowing what one is doing?

---

I purposely tilted them that way to be WACKY AND WILD! Yes it's to make it seem less rigid and perfectionist, since the blogging format is so traditional I need to do something to jazz it up. I had them straight originally and it was boring. I'm also now noticing that the right hand of Shrugs McGee (that's what I named him in my photoshop file) looks weird and rubbery. I'll have to fix that tomorrow.

You might want to fan those bars out a little bit more. It currently doesn't look like its done out of style, it looks a bit more like a fuck up.

just saying...

wasn't that his point?

Couldn't hurt to make the angles more dramatic. I'll check it out and see if it conveys better (I'm assuming it will, since two people said the same thing). I also need to make the actual update table larger. I want to make a link to the learning guides right on the main page somehow (maybe the last updated tutorials will go up on the page). I think I'll call the follow-alongs Learning Guides. Since they link to everything and contain commentaries (news posts I write) as I evolve and learn along the way.

Quote:

---

Originally Posted by Dyne

wasn't that his point?

---

No. WACKY AND WILD was his point. It looks like it was a mistake while designing, and not a design choice at the moment. desu desu?

yeah i get that and what you're saying, but since the point of the website is that its there to teach people who dont have a clue, i thought it worked well weather it was intentional or not. the "mistake" seems legit in this sense.

I'd rather it be blatant than subtle. I've already corrected it. The right hand side not being flush helps it along, too. There'll be other ways to make the site more problematic looking but I'm not sure if we'll utilize it outside of a few splatters if it doesn't look right. It has to look professional regardless of what my philosophy is. I don't want to have to redesign it for awhile and sleek usually holds up longer than experimental.

The guy shrugging breaks the plane way too much, and the sunglasses look retarded.

I like the format you're using for the updates, though.

Are the fonts you are using for the titles and dates all web safe fonts (I can't tell, I have a TERRIBLE eye for fonts)?

If not that's a change you're going to want to make so that those areas can be updated easily without having to create images.

Web development is fucking evil. A loathsome, heinous act IMHO. I commend those of you who can do it though. I sure as hell can't.

I think the same thing of animation. :)

I went to school wanting to go into 3d animation, I left school with absolutely hating animation and loving interactive development. Though I have the utmost respect for people who can animate, because I find it tedious to the point of ripping my hair out but know how fucking difficult it actually is

same thing with me. i went to school starting an animation program and the first project we had (30 second hand drawn animation all shot one frame at a time with about 75 others doing the same thing. we had ONE camera) taught me i didn't want to do it anymore. but now i respect the hell out of animators even more.

Looks good.

Drop the sunglasses on header dog and I think the design is nice n' solid. Great layout for sure.

If you take to web stuff as well as you took to design I think you'll do great. :)

Quote:

---

Originally Posted by Brand X

I think the same thing of animation. :)

I went to school wanting to go into 3d animation, I left school with absolutely hating animation and loving interactive development. Though I have the utmost respect for people who can animate, because I find it tedious to the point of ripping my hair out but know how fucking difficult it actually is

---

Quote:

---

Originally Posted by Dyne

same thing with me. i went to school starting an animation program and the first project we had (30 second hand drawn animation all shot one frame at a time with about 75 others doing the same thing. we had ONE camera) taught me i didn't want to do it anymore. but now i respect the hell out of animators even more.

---

See its all about which tedious act you enjoy doing the most. I fucking can't stand programing, and all that other shit that goes into web design. I want to just come up with a design, and like have it work. I don't want to have to make sure it works in IE, make sure it works in FF, and Opera, and Safari and all that kind of shit. When I did my website my friend and I worked out a design idea and then he coded all that shit, it never would have happened if he didn't. That simple little lightbox action I have going on was such a bitch to get working, it would work in IE but not FF, then it would work in FF but not IE. I give you guys who can code and make web shit work huge huge huge props, because I can't do it and I know how hard it is to do.

I have a new thumbnail to update with but for some reason TNL's attachment feature is being a dickweed so I've uploaded it to Robobo's old FTP. I'm not happy with proof #2 completely so the third round of revisions will probably shake things up a bit. I don't hate it, but it's not as hot as I want it to be. But it's coming along. Removed the sunglasses on the guy, but otherwise I'm keeping shrugs. The shrugging action fits in perfectly with the theme of the site.

New Thumbnail:
http://www.robobo.com/crap/idunnohow...npage%2002.jpg

New revisions:

- Removed sunglasses as per the feedback here.
- Added an ABOUT idunnohow.com blurb at the top to let new users know what the site is about right off the bat. A lot of blogs use this and claim it works well to hook readers.
- Increased the slants on the links section and added more off-angles in other places to help keep the crooked lines consistent.
- Made the update table much, much bigger to accomodate a bigger sidebar and update space. If this site is going to have a lot of reading material on it I wanted the update table to be able to hold enough copy so it doesn't become tedious to follow. I'm thinking about adding a toolbar to the right side of each learning guide so people can request certain features for guides or report inconsistencies and errors (or better ways to accomplish a goal).
- Made the body copy font slightly larger for the same purpose as the change to the size of the update table. Easier to read.
- I plan on eventually having advertising so the white space might be a little less space and a little more content, but I'm going to try to keep the white space as much as possible.
- I'm sure there were other changes. I'm not entirely happy with the bland graphics on the right hand section so I'll be working on them a little bit.
- I put a link to the most recently updated learning guides right on the main page. Since this is the focus of the site letting users quickly know what content has been updated will help us keep the main page fresh with new information.
- Added in Digg, Stumbleupon, Reddit and de.licio.us for networking purposes. I also forgot to add in a Tag Cloud I am now remembering as I type this out... fuck... i knew I forgot something.

Quote:

---

Originally Posted by Brand X

Are the fonts you are using for the titles and dates all web safe fonts (I can't tell, I have a TERRIBLE eye for fonts)?

If not that's a change you're going to want to make so that those areas can be updated easily without having to create images.

---

Actually I found a cool resource that uses flash to convert all of your type to any font you wish, and the file per page is like 10kb's. I don't have the bookmark on this computer but I'll try to remember to get it and post it. And if the user doesn't have flash it defaults to the system font. I'm using Baskerville, which I believe is a system font available on 90% of all computer. If not a sub of Times New Roman wouldn't hurt the overall design. Good point, though.

I like animation a lot, but if I eventually learn Maya or something I'll just start with Flash and 2D and work my way in. But Flash mainly for Actionscripting and its useful application for the web. I want skills that are useful to make me money firstly, then things I want to personally accomplish secondly (like learning to speak french and spanish). Every discipline has its shit holes and rewards. I think design is easier to fake until it's too late to do anything about the shitty designer that's sunk its teeth in to you. Before I'd even consider animation I'd do figure drawing tutorials and guides first to take me from novice to advanced. I could probably interview Fury Fox, JM and rezo for those guides.

Brand:

http://www.mikeindustries.com/sifr/

go to this site. it's the site that has the flash site plug in used for circumventing all system fonts with real, type set fonts. Also for anyone else who might find this trick useful.

Very very very very very very very....::catches breath:: very very very fucking cool. I created something similar to this a while ago, but it wasn't nearly as accessible or SEO friendly as sIFR is. Which are the 2 of the main reasons I stopped using it. This is something I will DEFINITELY be using in the future. Fantastic find Andrew.

So I just got done messing around with sIFR for a while, and it is pretty damn cool. It's 100% cross browser compatible (going all the way back to IE5.01). Pretty damn easy to implement and customize, and very accessible when you have Flash disabled.

My one complaint is loading speed. I ran a test with every character embedded in the flash file, spread over 3 different fonts, and loading from a wireless connection on this current computer took just under 5 seconds. While loading with web safe fonts was less than a second. Once the embedded fonts & .swf files are cached in your browser it lowers the loading time, but the initial loading was a bit much from a developers standpoint. And while 2-5 seconds doesn't SEEM like a huge deal when loading a page, it looks pretty weird because you're not used to loading like that on a standard webpage.

I recommend when using this Andrew, stick to one, maybe two non websafe sIFR font usages. Also, if you have Flash, only embed the characters you need. For instance if you are just using a sIFR replace on numbers, just embed 0-9, this will lower the file size of your .swf.

On that note, I'm definitely sending an email to our designers to be like "HEY, YOU'RE ABOUT TO BE VERY HAPPY NON WEB SAFE PAGE HEADERS FOR YOU". Again, great find.

What, no rep? Up yours. Also you're welcome.

Or are you?