Archive for February, 2005
25th February 2005
It is always fun to learn something new.
I am currently developing a website at Esystems that is completely CSS, and I am using this as a basis for learning all about compliance in every sense and testing in multiple browsers, which I don’t do as much for Rotheblog.
Well, this site has a flash banner, and Flash is an interesting creature when it comes to validation. I had read about the Satay method before, but had never implemented it. So, read about how I got the Flash to validate using Satay and what I found out for myself.
I also added a couple of tips to the CSS section.
Sections Updated: CSS | XHTML, Flash
Dinner at Christine’s with David
David Wray stopped by at Christine’s on Tuesday night. He is flying out to Orlando on Wednesday, and thought this would be a good time to get together.
We had a great dinner of mexican food and ice cream, and then watched a lot of funny comedy central cartoons until we couldn’t stay awake anymore. From what I understand, Christine said that after we left she and David looked at some photos for quite awhile into the morning. Hard to believe that we met him just four months ago, because he has become a good friend really quick.
How do I create a rectangle by entering in specific dimensions?
In Illustrator, you have a something called the “Rectangle Tool”. So, let’s walk through how you can draw a rectangle with specific dimensions.Choose File > New - This will create a new canvas to work on. You can name the document here if you want. I am just going to call my document “Rectangle Test”.
Then choose your dimensions. For this exercise you can just choose the standard letter size canvas from the Artboard Setup > Size menu. Hit enter to accept this information and let’s get started.
On the left side of the screen you should see your Illustrator Tool pallette. It will look like this.
As you will notice, the fourth icon down on the right side of the toolbar looks like a little square. This is your “Rectangle Tool”. Click this with your mouse, and then click once anywhere on the canvas. You will then get a dialog box that looks like this;
This is where you can enter a specific size for a vector rectangle. For this example I just used my default settings as you see in the photo of 100 x 100 points.
How do I crop something in Illustrator? How do I use Clipping Masks?
This is a question I have gotten, and never gotten an acceptable answer. Because Illustrator is a vector program, where you create illustrations using complex shapes and colors, it isn’t really meant to edit a raster image like Photoshop would. Photoshop has the capability to crop an image to any size, but to achieve something of the same nature in Illustrator, you need to use what is known as a “Clipping Mask”.
Basically, what a “Clipping Mask” is, is a window to see an image through. You mask off the area you don’t want to see, and show through the area that you want to focus on.
This is how you make a mask. First, follow the steps below for making a new canvas. Now, let’s import a raster image, a .jpeg, a .tif, whatever type you into Illustrator.
Go to File > Place. Now choose an image from your computer to put into Illustrator.
You will now have what looks like an upsidedown 90 degree angle. This is the basically the upper corner of your image, and you need to set where you want this upper corner to set on your canvas. You do this by clicking once anywhere on the canvas, and the image will appear.
Now, like below, we are going to draw a rectangle on the canvas. Either you can click once and set the dimensions of your square, or you can select your “Rectangle Tool” and draw it by hand. When you select the tool, you will have a small cross-hairs. Click on the canvas once, hold, and drag your square out until it is the size you want. When you are satisfied with the dimensions, release your mouse.
Hopefully you have drawn the rectangle over the section of the image that you want to show through, but if not, just select the rectangle and move it. You move the rectangle by using the tool that is the solid black pointer. Click that tool, then click the rectangle, and move it to the desired position.
When you select the rectangle to move it, you will notice that it highlights the border in blue and has small little squares all around the perimeter. These are so you can scale the rectangle if you neeed. In order to make your mask, you will have to have the rectangle selected, then Hold Shift, and click the image also.
Now to make your mask.
Go up to Object > Clipping Path > Make, as you see in this screenshot below. This will show your mask.
This article is not exhaustive. You can release, or revert back to what you had in the beginning by releasing your mask with the menu option in the same area.
But what we are going to cover now is how to rasterize the dimensions of your masked image.
The bounding box, or blue highlighted box, will always retain the original dimensions of an image of a mask, no matter how small of an area you mask off. But, if you are satisfied with the mask, and know you won’t change what you have done later (Maybe your client is really great and won’t change their mind) then you can rasterize your mask. This will make you image not editable anymore, so make sure you don’t need to change it.
Select your image again with your black pointer selection tool and then go to Object > Rasterize. This will bring up a dialog box with a bunch of options.
For this example, you don’t need to change anything in particular. Just make sure that your color model is set to CMYK, and that your resolution is set to 300DPI. Click ok, and now your image is rasterized, and you won’t be able to go back and edit it.
Like I mentioned, you will still have the original bounding box. If you only want the actual size of the image to highlight when you click on it, then you will need to use the crop tool in a photo editing program like Photoshop, and then Place the image into your Illustrator file first.
I sincerely hopes this helps.
24th February 2005
I didn’t get off my lazy tuckus last night to write anything. I actually got home at like 7, chilled for a bit, and then talked with Aubrey about trade show stuff coming up in early March until nearly 9:30. Then I got sucked into playing stupid Hexic for about the rest of the night.
I added one, not very good photo, from Tuesday’s dinner at Christine’s. That was good fun.
But most of what I am adding tonight is design knowledge. I got a Gig worth of Ram this week, to up my system to 1.75 Gig, so I have been smokin around the internet, finding out all sorts of information.
We don’t have anything specific going on this weekend yet. But I am sure some things will come up.
Sections Updated: Photo Diary, Illustrator
22nd February 2005
I think because I didn’t play video games of any kind for so long, I have that much more of a problem with a “different game every hour”.
So, my game of the hour now is Hexic. This is a game I came across on MSN messenger also, that I happen to investigate more and found out you could get a stand alone version that didn’t need a second player to try.
In a way, it is in the same vein as Tetris, but only that it is a vertical moving game that has an object to match certain blocks. Basically, you click on any combination of three hexagon to rotate them in 360 degree fashion. If they make a set of three that are in a triangle formation, the three disappear and the rest of the blocks continue to fall down and fill the screen with new ones.
You can play all sorts of different versions, but my favorite is the timed, where you make so many in X amount of time.
Wanna try it out? Then go ahead and download Hexic and install it on your computer tonight, and write me all about your brain rotting adventures!
So, other than gaming. Sarah had the day off yesterday and I think did her a lot of good. She was in a really good mood for the most of the day, and the fact that she talked to the Czinders and Anne helped too.
On Sunday, Christine and I went to a small comic book thing here in Indy. We went and talked to a local creator that does some good work, and I picked up the first six books of a series called Ex Machina. I actually had one of the vendors overhear my conversation twenty feet away from his booth and dig the issues out for me, and then offer them to me for cover price, which the book is pretty hot. I was pretty amazed. Then later some other random guy overheard Christine and I talking about a free book that people got with Admission and this guy just handed us his copy, for free. It was a bizarre day. Very un “Comic Book Guy from Simpsons” like stereotype of people. They were, dare I say it, helpful.
Tonight we are going over Christine’s. David Wray is stopping before his flight out of Indy for the Orlando comic convention, so we are doing dinner at her place and games and stuff.
I have seen three digit hex codes to define color. What are they? How do three digit hex color codes work?
When first starting to look through CSS styles sheets to see how things were done, I would come across hex codes for colors in this format:
color:#000;
I think I may have read about how they worked, but glazed over it. I had the impression that a three digit code meant that you were shortening a repeating number that was all the same. So for the previous example I figured that the shortened three digit version was actually the full definition for the color black which is;
color:#000000;
But today I learned that was wrong. Instead the code is a shorthand for three sets of digits that repeat. So this is my new example;
color:#060;
This shorthand version for this hex code is actually this written out in long version;
color:#006600;
Need another example? Ok how about;
color:#251;
Translates into;
color:#225511;
So you see, it takes each one of the repeating numbers, and pairs it down. This is just a small little simple way that may save you time, and may even save you a little bit of loading time for the style sheet, but in all actuality, I think is a little more preference. Most of the advanced style sheet users do it this way, so at the very least you look like you know what you are doing.
21st February 2005
The photo gallery is finished!
I did write some of my first lines of real, thought through PHP. But in the end, Chris Antoine wrote most of what was going on in the background, and as usual, I understand it, and I asked good questions that helped me even remember it more, but did I write it? No. Could I write it again if I lost it. Maybe, probably not.
So, go and check it out.
Sections Updated: Photo Diary
Loading ...
