Using an FTP client

Things you will need for this:

• Your FTP server url (provided by your hosting provider)


• Your username to access your site (provided by your hosting provider)


• Your password to access your site


• You should also create folder some place on computer that will be used to copy your site.

Here is a question that I often get from my clients, "how can I load files to my website myself?" Some say that I am shooting myself in the foot. I think not at all. I'm all about empowering my clients. After all, there could be a situation were they catch me away from a computer. Gasp! For the most part even when they figure out how to do it themselves they still turn to me and ask for me to upload changes to their sites simply because they don’t have time or they rather concentrate on managing their business. Still I would like to point my clients to a source of material they can trust.

Let’s start with picking a client. If you have Dreamweaver or a program like it, an FTP client comes built in. I won’t be covering any one type of client, but whatever I use here you can pretty much for all the clients available. There are plenty of free ones out there but please exercise caution. We don’t want you downloading a virus or expose your site to malicious activity. You can peruse http://www.download.com for some FTP clients or any other software. They have plenty of for free and for a fee to pick from.

I have used AceFTP and coffee cup and have been very happy with them.

Once you have selected a client and you have it installed, go ahead and create a new profile. You might have to look for this but some clients might even have it as part of the installation process, so be prepared. In the profile editor/wizard/setup the first thing they will ask you is what to call the site or the site name. I usually go with the url of the site. I manage a few and after awhile they get hard to keep track of. So use www.yoursite.com.
Before you can fill this in you will need to check with your hosting provider for the right info.
There will be a place for your server, user ID and password. This is all provided by your hosting provider. It will mostly likely look something like this.
Server: ftp.yoursite.com
User ID: whateverYourSiteSaysItIs
Password: Password

The next thing it will ask you for is the location of your local folder. This is usually an exact copy of your site on your computer. I usually save stuff like this in separate drives on my computer but if you want to keep it simple you can just create/save a copy of the site on your desktop and then navigate to it.

The next thing you will need is the host folder which where the client be able to access the folders. If you are the administrator (in most cases the owner) and you don’t know or your site doesn’t tell you what the host folder is you can usually leave this blank and the client will work anyway. If you don’t have admin rights and or have access to the root folder you will run into problems and probably have to call customer support. Don’t be afraid to call those people and annoy the crap out of them. That’s what they are there for, use them, people!

At this point you hit finish and you should either have a new profile or be connected shortly there after to the site via ftp. What you will see is two windows like the image below.



Now you just click and drag over the folders or individual files you want to the right side. Once you do that you have, what we call in the industry, pushed live.

Next
Understanding some basic HTML will be next. I know that sometimes you don’t want to pay me for that minor copy change and I don’t blame you. Well now I will show you what to look out for so that you can make that minor text change.

Very cool pic

I totally dig the illustartion i n the window.

Animated gifs

Here is another fairly common task that needs to be addressed. Though I am sure you can find plenty of documentation and free software out there that will allow you to create this I thought it would be best if did my take on it using Adobe Photoshop.

Here are the steps for creating the “Big Blue Button” animated gif. I am going to assume that at this point you have all the states for the animation in your image. If you don’t have all the different states stop reading and create all the states, or as they call them in the cartoon biz, all the keys. Your keys are just the primary points in your animation. In this case your keys would be an image with the text “Big Blue Button” and the second key is a version of this image with the text “Does Nothing” and then it goes back to the front to “cycle” the animation in a never ending loop. The image of the layers I used is there so you see how I did it. All I did is hide whatever I didn’t use for the first state, and flipped on what I needed for the second key.

Once you have all your keys go to window and select animation if you don’t already have it visible. If you look at this pane you can see that you have a set of play controls like on a DVD player. Next to that you have the “tween animation” option followed by ”Duplicates selected frames”. Click on the latter. Now you should have two frames in your animation panel. Click on the second item and set you second image to it.

Now you want to tween or make inbetweens from the first image to the second. Click the tween button we mentioned earlier. You will get a popup window that displays an option for how many frames to add to your tween. I used 5 but you are free to use whatever you want.

Now if you want to have the tween animate in a cycle you will have to make another duplicate and this time make this from the same as the first one. Now click on the second key and tween it. Once your done it should look like this.

Now you can render for web and save it as a gif and there you have it. An animated gif.

The Theme for My Site

All art is telling a story. As artists we are all storytellers in some way or another. Whatever look we try to portray we are attempting to give off a feeling in that particular project.
If you look at my current site at http://www.edgarovalle.com/, I tried to give people a glimpse of what my desk looks like at home. It’s messy and there are drawings everywhere. I am sure you have heard of the writer that is constantly scribbling prose down on pieces of paper that lay around all over the house. Well I do that and I also do that with images. I am constantly drawing.

I use to have stacks and stacks of drawing pads that were filled with ideas that I had for characters and stories. It got so bad that at one point I had very little space to walk around on my floor. My parents eventually told me I had to get rid of some of that paper. Doing so was the worst thing you could have said to me back then. I would have preferred to get spanked then to throw away my boxes and boxes of scribbles.

Whatever the case, what I am trying to convey is a process that doesn’t ever really stop for me. There’s new ideas and old ideas sitting everywhere together in my head and I tried to do that a little with the different ages of the paper. Everything exists at the same time for me in terms of art. I come up with something and later on I will bring it out and dust it off and maybe twist it or change it a little to allow it to assimilate to whatever I am doing at the time.

Learn your quick keys

Learning your quick keys is imperative for efficient use of any program. The more keys you know the faster you can work. As you will be able to tell from this posting I’m a big PC user. Okay, all you artists can stop gasping now. Yes, I am a PC user, I'm sorry. I will admit though, I haven’t upgraded to Vista because I am afraid my puter will stop working and Macs are supposed to be more stable so the there's always that arguement hanging around, BUT I digress.

Now quick key or short cuts or whatever name your operating system/software may use, are in your puter and are also intregrated into your software. Your software have them, your browsers have them, hell even your operating systems have them. Some of the most common keys I use are:

Ctrl + N New file
Ctrl + P Print file
Ctrl + C Copy
Ctrl + X Cut
Ctrl + V Paste
Ctrl + Z Undo (my most used of all time. Sigh, if I can only undo in real life)

Okay, these for the most part are found in every piece of software. You should know them by now. If you don’t, then you better start learning them!

Other keys that are useful are:

Alt + Tab Allows you to switch apps quickly
***TIP: If you hold down on the Alt key after pressing tab once you will see all the apps in use and allows you to scroll through them as you watch using the tab key

Ctrl + tab Scroll through files used in one program.
Windows Key + E Opens Windows explorer
Windows Key + D Toggles all programs on the screen to hide or show.

Now if you are in a certain program, lets say Photoshop, you can access the menu item using the alt key. One that I seem to use a lot is Alt + I + I. This will launch the resize window and allow you to change the actual size of a file. Why “I” twice, well what happens when you hit Alt +I the first time is you launch a menu which in this case it’s the “images” menu. If you notice holding down the alt key in any app will underline letters clicking on any letter underlined will open that option. The same is true in whatever menu follows. Going back to the “images” menu, hitting “I” a second time will select the “image size” option and give you the image size menu. Now I know, that ctrl + alt + I will give you the same thing without having to access the menu at the top, but I learned it this way and it’s now stuck in my head.

Here’s a bunch of quick keys I use pretty much every time I use Photoshop:
Ctrl + Shift + N New Layer
P Pen tool
U Vector shape tool
V Move tool
B Brush tool
Shift + B Toggle through Brush types
[ Decrease brush diameter
] Increase the brush diameter
Shift + [ Decrease hrdness
Shift + ] Increase brush hardness
M Marquee – selection tool
A Path Selection tool / direct selection tool
Shift + A toggle selection tool types
T Text tool
I eyedropper
Shift + I toggle through the eyedropper settings
S stamp tool
J spot healing tool
G Pain bucket/gradient tool
Shift + G Toggle bucket/gradient tool options
Ctrl + J Duplicate layer
Alt + [ Jump to a lower layer
Alt + ] Jump to a higher layer
Ctrl + [ Move current layer down one layer
Ctrl + ] Move current layer up one layer

Again, this is not the definitive list, these are the most useful set of quick keys I have learned and are by far the most used quick keys for me, which might not be true for you. I’m sure you are now saying to yourselves, “but hey wait a minute! You forgot one!” No I didn’t. I left the best for last. Ctrl + S ladies and gentlemen is by far the most important quick key you can learn. Saving is now part of my natural movements on the keyboard. I hit it like every two minutes – I pretty much trained myself to naturally hit it after every major change. To find a more complete list of quick keys for photoshop or any other program for that matter go to the help menu in your app and type “quick keys” or “short cut”.

Cutting out photographs

One real world photoshop tip I learned was cutting out photos. I myself love getting the project that involves cutting photos off their backgrounds. It’s totally something I can do for hours. Now taking the photographs, as I have learned recently, is something I am not too fond of – I’m sure you will be able to see why in the following photos of my lovable but completely nutty niece.

I volunteered my photography services to my sister so that I can practice shooting pictures. I also have a background and decided to make my parents’ living room into a studio for a night. Now my niece, who loves being in front of the camera is also, as you can see, the daughter of the devil and was completely unable to sit still. I have about 150 pix or so of her pretty much in a blur. Fifty of those pictures were of her with her foot aimed at the camera – I didn’t get the foot thing, but it made her laugh like a crazy person. The best pix are of Curious George with his friend Totoro the spirit of the forest and the other pic is where I finally lost my mind and ahem… lightly scolded my niece using my "not-so-indoor voice". If you look closely she seems like she is only pretending to be hurt and upset – What she really wants to do is laugh at her then momentarily insane uncle.

Seeing as I don’t have many options, I will use the holding-back-the-laughter-at-the-crazy-uncle-as-I-pretend-to-be-angry pic.

Here’s how you do it:

1. If you took the pic out of a digital camera, when you bring it in to Photoshop it will probably have a little lock on the layer in the layers palette. You have to unlock it or it won’t allow you to do the next steps. To unlock the layer hold down the "alt" key and double click the lock icon. You should now have that layer unlocked.


2. Use the vector mask option to make a mask. I like using the victor tool a lot more than a regular raster based masked because tweeking the line is a lot easier. Also if you get good at it you can cut out an image fairly quickly and definitely faster than if you where to do it with a raster based mask. So select the pen tool in your tools palette or hit the “P” key. Also try to learn your quick keys – it will allow you to work more efficiently. For me I also learned that using quick keys will save your hand from carpal tunnel.



3. In the options at the top you should have a different setting you can adjust. In the area where you can choose the type of path you can make choose paths which should be the option in between shape layers and fill pixels.



4. Now you can cut away to your hearts content.Note: as you go around you can use the direction points that come off the anchor points to curve the line in the direction you want to go by switching to the direct selection tool (the white vector pointer) or while using the pen tool holding the ctrl key and clicking and dragging the direction point. If you don’t like the curve you created you can hold alt and click and drag off the anchor point.



5. Once you have the cutout you want right click anywhere on the canvas and you should get a popup menu. In that menu, select “create vector mask”.
   At this point, I will add a solid color or work on a background that would look good for the image. I am just going to through a background with a gradient just for a little something.

There you have it, a cut out of an angry child on a plain background. Enjoy!