What is Adobe InContext Editing?

Adobe InContext Editing

Adobe InContext editing is something you would be interested in using if you create HTML websites and would like your clients to be able to go in and make simple content edits without you getting involved and without the client messing anything up too seriously. The whole editor is hosted by Adobe online so your client does not need to buy a program/application.

You may not know-especially if you have never used this-that InContext Editing is built in with Dreamweaver CS4, all you need to do is go Insert>InContext Editing>Create Editable Region. It is really easy and you have control over what aspect of the element the use can actually change. For instance if you have a simple text header or page title and you want to user to be able to change the text, but NOT the format (Bold, Size, Italics, etc…) you can specify that really easily right in the properties panel within Dreamweaver. You also have the ability to allow users to apply CSS styles (which you have setup before hand) to areas and or text that you have specified.

There is a whole lot of control you can give your clients without having to worry about them really messing up the structure of the website you created.

After setting up the page you would then use the Adobe hosted web side of things. The site is: http://incontextediting.adobe.com you simply login with your Adobe ID and you will see a control panel of all of the sites you are managing with InContext Editing and even a little “News” section which lets you know what changes have been made to the sites recently so you can always keep tabs on the action.

Long story short InContext editing is going to allow you to give your clients an easy and stress-free way to edit and update information on their web pages.

The way InContext works is like this:

1. Take Dreamweaver CS4 and create a web page using CSS and Divs (InContext needs Divs to work).

2. Select the Divs you want to be editable and go Insert>InContext Editing>Create Editable Region and tweak the settings that show up in the properties panel

3. When you save the page Dreamweaver will create some files for you, upload these few files along with the html page to you web server.

4. Go to http://incontextediting.adobe.com and log in using your Adobe ID (an Adobe ID is free!).

5. Register the site with InContext Editor by entering the site’s name, URL, and FTP info.

6. After setting the site up with InContext all you need to do is invite the client to hop on and start making their edits. You can even allow users to be only editors, or publishers (same as the editor, but they can publish their edits), or an administrator.

Adobe InContext is a great, great tool for web designers which allows them to create websites that are editable by the client and you even control the amount of edit-ability the client is allowed.

-Currently the Adobe InContext Editor is available for free.

-If there is interest I will do a tutorial on both the Dreamweaver side of InContext Editing and setting it up with InContext Online.

Adobe InContext Resources/Tutorials:

InContext Web Login Page: http://incontextediting.adobe.com

Adobe InContext Editor Page: http://www.adobe.com/products/incontextediting/

Get Started with InContext Tutorial: http://tv.adobe.com/watch/adc-presents/getting-started-with-adobe-incontext-editing/

Adobe InContext Features: http://www.adobe.com/products/incontextediting/features/

An introduction to InContext Editing with Adobe Dreamweaver CS4: http://www.adobe.com/newsletters/edge/february2009/articles/article5/

Applying InContext Editing from a business perspective: http://www.adobe.com/newsletters/edge/april2009/articles/article6/index.html?trackingid=EOCRA

Getting started with InContext Editing for end user: http://www.adobe.com/devnet/dreamweaver/articles/getting_started_with_ice_eu.html

There is even a Facebook Fan Page: http://www.facebook.com/pages/AdobeR-InContext-Editing/186947360706

Andy Warhol Effect: Photoshop Tutorial

Andy Warhol Effect: Photoshop Tutorial

In this video tutorial we will take a look at creating this interesting “Andy Warhol Effect” which is a neat solid color effect which transforms a photograph into this semi-painted looking piece of art. We will talk about Layers, Adjustment Layers, Coloring and Blend Modes all en-route to creating this effect! Enjoy!

-Follow me on Twitter! http://www.twitter.com/tutvid

Should I get a Tablet? Pros and Cons

Should I get a Tablet? Pros and Cons

There are a ton of questions one should think about and ultimately get answers to before shelling out $300+ bucks to get a shiny new tablet. We are going to check out some of the things I have learned in my tenure with a tablet by my side always ready to assist in my design, drawing, and retouching duties. The only brand tablet I have ever used it Wacom, their products are top quality, I have never had a single issue, hardware or software, and their tablets-if treated well-last for quite awhile. Not only to I go with Wacom but I stick with their Intuos line of tablets (the Intuos3 and Intuos4) which tend to be more expensive because they are more sensitive and just generally higher quality. With all that under our lid let’s move on and check out why you should buy that tablet, or save the hard earned cash for something more important.

Before we get going what the heck can a tablet be used for? How can if be beneficial to ME? By no means can I cover every little thing a tablet can be used for because you can use it as your primary cursor device and dump the mouse all together (although I recommend you let the mouse stick around), but a few of the things a tablet will REALLY help you with are Photo retouching, Digital painting, and doing a lot of the little mundane things in Photoshop like painting a quick selection or a simple layer mask, it shave a massive amount of time.

You should get a tablet if:

You do a lot of Photo Retouching:

I do quite a bit of this and whether it is Photoshop, Camera RAW, or Lightroom I drop the mouse as soon as I open the program it’s it my Stylus (think of it as a fancy word for “plastic pen”) and Wacom Tablet all the way for everything from selectively correcting exposure and correcting red eye (which shouldn’t be happening with a good flash setup!), to selecting files and dragging the little sliders around, everything. If you do any Photo retouching you will INSTANTLY see the benefit of having a tablet.

You do Digital Painting:

My first thought when I broke out my tablet was “Wow! This thing is breaking down all the walls that the mouse seemingly set!” and I literally sat there for a day downloading stock photography and tracing image after image after image. Tracing did two things, it really helped me see and understand how this tablet thing was about to totally speed up my workflow in Photoshop, but it also helped with getting used to using a different pointing device than the tablet and within a couple days it was nearly second nature.

You use the Pen Tool a lot:

This goes for Photoshop, Flash, Illustrator and any other Pen Tools. The reason I say this is because I really enjoy using the Pen Tool with the Wacom, there is something about it, I don;’t know what but it goes much faster and it feels more natural. Using the Pen Tool was never really a drag, but now it’s really great!

You do ANY Sketching:

Well this is kind of a no-brainer, but think beyond sketches, sure sketching makes sense, but you can go into a photograph, create a new layer and quickly start circling areas that need work and writing notes. Doing something similar without the tablet either looks really sloppy and takes a bit of time (using the mouse), or looks nice and neat but takes a ridiculous amount of time (using stroked paths, or selection lines and the Type Tool). The tablet saves time in virtually every aspect of the design process regardless of the program, I use mine all over Photoshop, Illustrator, Lightroom, Flash, I even find myself dragging stuff around in Dreamweaver every now and again (although there is really no advantage over the mouse here).

You do Digital Calligraphy:

Gone are the days of a billion brushes and special pens and a little box full of specialty-this and specialty-that, you have all of that to your disposal in Photoshop and it’s Brushes Panel. Using the pressure sensitivity of this tablet you can really do incredible things. Mimicking a real pen or pencil stroke is really easy and the amount of, size, opacity, and irregularity (Size, Angle, Roundness, Scatter Jitters) simply by the pressure you apply or the tilt of the Stylus you are holding. The control with these Intuos tablets is incredible.

Well it’s not all sunshine and happiness, let’s check out why you should NOT get a tablet, why you should just save the cash and spend it on a new baby stroller something.

If you spend all day drawing boxes:

If you are working with layout editors and are doing nothing where you need any kind of freehand edit-ability you probably don’t need the tablet. Still it may be helpful if you make frequent trips to Photoshop. If you spend all day in Flash or Dreamweaver drawing/layout you could also get away with not having a tablet.

If you spend your day coding:

This one is fairly clear-cut, if your typing all day whether or not it’s Flash, Flex, Dreamweaver, or any code editor, you really are not going to need a tablet. Just remember the tablet is great for doing things as if you were drawing on paper.

Speaking of paper I have heard of people who like to cover their tablet in paper to give it a more “natural” feel. They feel more like they are drawing on paper. I never really liked the way this felt, but if it helps with your transition I say “Go for it!”.

These Tablets by Wacom really are something else, you have all kinds of buttons you can program to behave like Ctrl or Shift or Alt or Spacebar so you can quickly move around your document(s). No batteries are ever required, the tablet is powered via it’s USB port and the peripherals (typically the Stylus and Mouse) need nothing.

Size-wise you want at least a 6 inch by 8 inch area, with the newest Intuos4 tablets that would be the Medium or Large sizes, so you would be looking at spending $349-$469.

Check out the Intuos4 line on Wacom’s website now and pick one up for yourself!

Leave a comment or two guys, it’s much appreciated!

Have a great weekend all!

My top 5 free most useful Web Apps/Downloads

My top 5 free most useful Web Apps/Downloads

I am not going to cover the obvious web services and applications such as Gmail, YouTube, WordPress, TweetDeck, or Tutvid.com. Instead I am going to stick with some stuff that maybe some of you have not used before and see if we can discover some interesting things on the internet that we can all use! Before I get started I just want to ask you guys to post any cool applications or tools that you know of that are free, basically if it is something that you use and think would be useful to other people go ahead and let me know about it, heck maybe I’ll grab it and start using it all the time, who knows? Anyway back to the stuff I really like, here goes!

1. TaskFive.com

Taskfive is a super cool web application that allows you to create simple to-do lists. As the name sounds you can set up to 5 tasks to do each day in the super clean and easy-to-use interface and then check them off when you have finished them. The coolness does not stop there however as Taskfive also keeps track of what you have done and gives you an 8 of 10 tasks complete visual so you can keep track of how productive you were that day/week. You can also get a “Company Report” which gives you a percentage of tasks completed and days were all tasks were completed as well as things like longest undo tasks and all kinds of neat info, but Taskfive does not stop there it allows you to have an email sent to you each day with your tasks. This becomes especially useful if you decide to add more than one user to Taskfive, this does cost money, but it allows you to send email task sheets to your employees and they can log on and check off what has and has not been done and you get a report on everything. I really, really like Taskfive and it is the first thing I look at each morning and the last before I call it quits because that is when I am setting up stuff for the next day and checking to see what I have coming up. Check it out folks, Taskfive.com!

2. WhatTheFont!

WhatTheFont! Is possibly the coolest tool I have found in quite a while, very cool, but also super duper useful! This tool basically takes an image of a font (and the image does not even have to be super clear as long as you can see the outline of the text fairly well) and upload it to their system and it will return a list of fonts that match the font in the image thereby allowing you to get the font that you see in the image. Really, really cool, free and extremely simple to use. Check them out by clicking here WhatTheFont!

3.  Adobe Buzzword

As much as I love working alone and being able to do my own thing you know as well as I do that in pretty well any business your “contacts” can make or break you. Regardless of contact relationship I tend to enjoy spending some of my time working with other designers, developers, photographers, and trainers, it’s just a lot of fun to join up with other guys and get colab stuff done and share ideas and info. One of the things you typically need when working with groups of people, especially via the internet, is a way to sort of stockpile all of your ideas and notes in one place where everyone can get a hold of them and maybe even make changes if necessary. Some of you I am sure know about Google Docs, which I have nothing against, matter of fact I am using Google Docs on a rather frequent basis as well, but Adobe Buzzword is different. Adobe Buzzword allows you to create document just as you would in a word processor and then attach images, headers, footers, change fonts, font color, and document background color. It also allows you to then send the file off to a list of email addresses or just a nice single email if you so wish, but it is also closely linked to Adobe ConnectNow which allows you to hold meetings right over the internet and use your webcam and microphone to share notes, attach files, audio or type chat and more! Adobe Buzzword is a very cool online app available for free, just log in with your Adobe ID. Click here to check out Adobe Buzzword!

4. Doomi

A while ago when Adobe launched AIR as a platform for desktop publishing I was pretty excited, not really for myself as I don’t do much in the way of desktop publishing, come to think of it I don’t do any, not that I wouldn’t get into it, I just haven’t as of right this moment. Anyway true to my nature I began searching for a nice, simple, easy to use, no-frills, to-do list and a while later found this great, great little AIR app called Doomi. It really does not need an explanation, you type in what you want to do and check it off when your done and it is removed from the list to a hidden holding area for the finished tasks to sit until you dispose of them. Super easy to use and a nice looking app as well. Go ahead and download Doomi right here, right now.

5. Screenr

Screenr.com is a free web-based service that allows you to record your screen with audio and create a video which you can share via your Twitter account. The quality of the videos is actually very nice. The Website as well as your video is compatible with the iPhone so folks on the go can view your content as well! Using the website you can record and save your screencast as well as share it and even go and check out the other videos made by folks using Screenr, very, very cool service. Click here to check it out! Screenr.com

Be sure to leave a comment!

Realistically Changing Photo Color in Photoshop

This is actually pretty easy, but as is the case with pretty well any image you open in Photoshop, keep an open mind and be ready to do things a little differently. There are a lot of things that can determine what you need to do and in the case of the image I am using I want to be careful and remember that there are reflections on the side of the car that will remain their original color so we may need to spend a little extra time and play with how we brush the color on. There are a million and one ways to change color in Photoshop and this is a really great way to do it and maintain being able to change that color later on.

Step One: Open your image (Or click on this image and right click and save it and use this image) in Photoshop and we are ready to go!

Step Two: Check out the base of your Layers Panel and you will see the little “New Adjustment Layer” icon (it looks like a circle, half black, half white), click on it and choose “Solid Color”.

Step Three: Choose any color you like from the dialog box that pops up. I chose #ff5d00

Step Four: Again look at your Layers Panel and actually click on the Layer Mask for that Solid Color Adjustment Layer and hit the hotkey Ctrl/Cmd + I. This will invert the color of the mask, flipping the white to black.

Step Five: Grab the Brush Tool, set your Foreground color to white and paint over the areas of the car you want to change the color of. Painting white in the mask reveals color.

Step Six: Now the car is looking pretty bad, but a simple Blend Mode change makes all the difference in the world. Typically when you have an object that is colored already you can just use the “Hue” Blend Mode, but personally I like to use the “Color” Blend Mode if the object is colored or not and if the final effect is too strong I just dial back the Opacity.

You can easily change the color by simply double clicking the color swatch on that Solid Color Adjustment Layer and choosing a new layer!

Quick Recap:

1. Get an Image
2. Create a Solid Color Adjustment Layer
3. Choose your color
4. Invert the Mask so it is filled with black
5. Paint white to reveal color
6. Change the Blend Mode to “Hue” or “Color”

Hope you guys enjoyed the quick Photoshop Tip!

Have a great week!

July-August Newsletter for all to see!

Click Right Here to Read the PDF Tutvid.com July/August Newsletter!

Well the latest newsletter is running a couple days behind because I decided last minute (about 20 minutes before actually sending it out) to implement the design for this months newsletter, which hopefully will finally settle the layout issues I have had pretty much since the newsletter started.

Because the newest newsletter is just about ready to come out (It should be released this evening) I am posting this link on my blog for those of you that are not on that mailing list. Check it out, it is the full newsletter with a link to the project files all for free.

Coming very shortly you should see all the tutorials in this newsletter as videos on YouTube as well.

Enjoy and if you have any feedback please feel free to drop a comment!

Rotating Text Gradient Fills in Adobe Flash

Rotating Text Gradient Fills in Adobe Flash

A quick Flash tip for you guys today! Have you ever applied a gradient to text in Flash only to be disappointed that it is applied letter-by-letter instead of across the entire thing? How about when you go to change the angle of the gradient so the color gradient runs top-to-bottom? It can be a real pain in the neck especially if you have a bunch of letters.

First, how do we apply a gradient to text?

When you type out a word in Flash using the Type Tool (T) you can apply all kinds of fills, but Gradient is not one of them.

What you need to do is select your text and go Modify>Break Apart and then you will have a bunch of one letter text fields so go Modify>Break Apart again and you will have raw shapes. Now use your Color Picker and fill with a gradient.

Things are looking up, but we want to rotate the gradient so it is white at the top and black at the bottom… How!?

Grab the Gradient Transform Tool (F) and select the text, oh that’s right this method only allows you to select one letter at a time, really a pain in the neck, again, if you have a bunch of letters.

Here is the quick and easy fix for this, first select the text on your stage and then grab the Gradient Tool (K) and simply click your text and it will be filled all the way across. Now because this technically is one big fill grab the Gradient Transform Tool (F) again and click the text, cool we have the whole thing! Use the little circle to rotate the gradient and the little square to mask the gradient together so the white is right at the top of the text and the black right at the bottom.

There you have it!

Flash Camp Philadelphia – November.07.2009

Calling all Flash Designers, Developers, and both Flash and Flex Users! Coming to the City of Philadelphia on November 7^th of 2009 is FlashCamp Philadelphia!

Visit the Official Website!

I have been working with a few other guys (who really have been doing to heavy lifting) involved with Adobe’s Groups here in Philadelphia and finally there will be a nice educational Flash Event in Philly!

This is no slouch event run by a bunch of push-overs! You definitely want to check it out! The event’s primary sponsor is Adobe Systems, yep that’s right maker of Flash (and Photoshop, Dreamweaver, Illustrator, After Effects, and all other cool design/video/sound software(s) ) and Adobe along with a group of other great sponsors will be at the event!

There will be prizes and giveaways as well as a bunch of great speakers including Ryan Stewart who is an Adobe Platform Evangelist working with Adobe [Check out his website here]. There will be a bunch of other speakers as well, click here to view the list of speakers on the FlashCamp Philadelphia website!

Place this badge on your website/blog and show your support!

From the FlashCamp Philadelphia site…

“

Flash Camp Philadelphia is a full-day event featuring top industry experts on the Adobe Flash Platform from both inside and outside Adobe, with a special focus on presenters from the Philadelphia area. Come advance your Flex and Flash skills, meet members of the Adobe team and network with local companies and fellow developers. Sessions will be geared towards developers and designers with little to advanced levels of experience with Flash, Flex and ActionScript and other Adobe technologies. There will be plenty of giveaways, raffles, swag, continental style breakfast and lunch. It should be a blast for everyone in attendance.

“

Sounds like a good time and certainly one educational, info-packed day of learning and Flash fun in the City of Brotherly Love. The best is always saved for last! If you are a student it will cost you only $22.00 to get in, non-students get in at only $45.00! That is CRAZY! There is no reason for you to be sitting at home when you could come out and join us!

Again, Visit the Official Site for more details!

Follow us on Twitter as well!

Remembering 9/11, WorkAwesome, and Uploading for Free

Wow, what can I say, 8 long years years since September the 11th, it’s crazy because I can remember it like it was yesterday. Sitting there actually doing my Math school stuff in my bedroom (I was home-schooled) when my Mom started freaking out and called me downstairs and she had the TV on and obviously I saw the first plane’s damage, but my initial reaction was “ahh… no big deal, it was probably just a small plane, damage doesn’t look that, that bad” but I didn’t realize how huge (wide) those towers were and it was quite a big deal. I saw the second plane impact and later on learned I had a friend standing literally right outside the towers when it all went down and I also did some work for a guy who was working at the top of a different high rise in NYC and he took some photos, but long story short definitely a day I’ll never forget and certainly a humbling day for all of America.

-WorkAwesome

Alright time to move on! The folks who run The Envato Network (PSDTuts+, NetTuts+, and ALL those sites) have launched a new site called WorkAwesome. It looks like the general theme of the site is going to be helping you become a more productive worker and get things done and focus on work and all that good stuff. I am a huge fan of getting it done and always try to stay as organized and on time/on point as possible so this site is definitely a nice shot in the arm and will provide me, personally with additional inspiration/motivation which is always a good thing! Check it out, WorkAwesome.

-Upload Robots

I found this site very recently, actually it is a very new site, but it looks really, really cool. I bookmarked it after running through the quick little Tour they have of the site. It is free to upload and share files WITHOUT a wait. Not only do they hack the wait time away, but they also make it super easy to upload your file in a nice, clean, well-thought out web interface. Guys, you need to check this out, really a cool website with a lot of potential!

Their “About” page really says it all, go check it out. Sign up and start uploading it is that easy adn the sign up process is about 4 form fields: Username, Password, Email. Check em’ out — Upload Robots

The Adobe Bridge Image Processor on 9.9.9

The Image Processor in Adobe Bridge is a really great time saving tool. I use it all the time for saving RAW files to a JPEG and TIFF format while resizing them (with constrained proportions) and saving to a certain location of the hard drive AND applying an Action from Photoshop as well.

The Image Processor is actually in Photoshop, but you can launch it from The Bridge.

You can get to the Image Processor form the The Bridge by going Tools>Photoshop>Image Processor. If Photoshop is not opened up it will launch at this point and you will see a dialog box with a whole bunch of options.

Check out the dialog box in the screenshot below:

Adobe has wisely divided this dialog box up into 4 chunks which makes it a lot easier to digest, let’s take a look at exactly what is here in this dialog box.

-The first thing we see is the “Select the Images to Process” section.

The Image Processor will select all the images in the folder you are in when you launch the Image Processor but if you select some images it will apply to those selected images, not everything in the folder.

-The second thing is simply choosing where to save those images.

You can save in the same location you are loading the images from or choose a different folder all together.

-Thirdly we have the “File Type” options.

This is really pretty cool because you can save those images as up to three different image types, choosing quality and re-sizing options.

-Lastly we have the “Preferences”.

Here is where we can choose to run an action on those selected images. This can be great because you can add a round of Sharpening, a Vignette, maybe even a watermark, really any kind of action you may have and even add a little Copyright info.

Go ahead and hit “Run” and it will work it’s magic and in a few moments you will have a bunch of exported images just like you specified in the Image Processor.