An easy service for you to edit your photos online can be found at PXN8 (Pixenate).
Basic instructions:
1. Click on the "Choose Your Image to Edit". Navigate to the file you want on your computer and double click or press "Open" to upload.
2. The service will say "Uploading image, please wait", then it will open the editing tool. Resize, crop, enhance as you wish. I love the "fun effects" option. Note that there are UNDO and REDO buttons if you try something out and you don't like the result.
3. Click on "Save" when you're happy with your picture. This will open a download window (it automatically formats your pic as JPG) so you can save it to your PC.
A simpler service is also available at Snipshot.com.
Other similar services offering different capabilities are Cellsea, Online Image Editor and Fotocrib.
Showing posts with label banners. Show all posts
Showing posts with label banners. Show all posts
Wednesday, May 9, 2007
Friday, May 4, 2007
Blogger 101: Banner Photo
As I mentioned on the Cafe Mom Discussion board, I learned today that blogger now has an auto-insert picture function for the header background (e.g. the tulips above). In case you didn't pick up on the hints elsewhere, here are the directions...
You get to it by clicking on the "edit" button for the page header bar under "page elements" (which is under "template").
Add your photo and *presto*!
A couple of important tips:
You'll need to size your photo "just so" to fit with your template. Nothing like trial and error.
I would suggest keeping the photo size reasonably small - perhaps under 100 kb for the sake of those with slower-loading computers. (the tulip one is about 70 kb).
Try to get a picture with room for your title and description AND/OR adjust your blog title color so it's readable with the picture. I "photo-shopped" out two tulips to make this one fit better.
Warning: At the moment, adding the photo to the banner seems to gum up the preview mode in the "fonts and colors" window. Not critical, but annoying.
You get to it by clicking on the "edit" button for the page header bar under "page elements" (which is under "template").
Add your photo and *presto*!
A couple of important tips:
You'll need to size your photo "just so" to fit with your template. Nothing like trial and error.
I would suggest keeping the photo size reasonably small - perhaps under 100 kb for the sake of those with slower-loading computers. (the tulip one is about 70 kb).
Try to get a picture with room for your title and description AND/OR adjust your blog title color so it's readable with the picture. I "photo-shopped" out two tulips to make this one fit better.
Warning: At the moment, adding the photo to the banner seems to gum up the preview mode in the "fonts and colors" window. Not critical, but annoying.
Customizing Your Banner in Typepad Pro
Before I start, let me just say that I am by no means an expert. I'm learning about CSS through trial and error—mainly error! I've figured out a few tricks for working with custom CSS in Typepad, but if you're more skilled than I am, by all means please chime in with advice/corrections/etc.
If you have a Typepad basic account, you can insert a banner image in the design feature, but your options will be limited.
If you have a pro account and want to customize your banner, the first thing you need to do is size the image correctly. You'll want to figure out how wide your blog is (this example assumes you want the banner to be as wide as the entire blog). One way to check that is through the "View Page Source" option in your browser menu. I use a Mac, and both Firefox and Safari browsers have a "View" option in the top menu bar. Go to your blog (the actual blog, not the Typepad panels), click anywhere on it (not on a link, of course), and then go to View in the menu bar and choose "Veie Page Source."
This pops up a window that shows the code for your whole blog page. If you scan through this, you should be able to see a line that tells the maximum width of your blog, probably something around 700px.
In whatever photo software you use, size the photo to the appropriate width. Now you're ready to upload it to Typepad.
In Typepad, click "Control Panel."
Click "Files."
On the right is the Upload Photo option.
After you've uploaded the photo, you'll need to know its URL. On your Files page, look in the list (at left) of file names. Click on the name of the photo you just uploaded. It'll open in a new window; highlight and copy the URL. It will be something like: http://mytypepadblog.typepad.com/myphoto.jpg
Now you can stick that photo at the top of your blog!
Click "Weblogs."
Click the name of the blog you want to customize.
Click the Design tab.
Scroll down and click on "Edit Custom CSS."
Now you need to paste some code into the CSS window. It will be a variation of:
There are lots of other ways to tweak the CSS for your banner, depending on which Typepad template you're using, but this is a good place to start.
If you have a Typepad basic account, you can insert a banner image in the design feature, but your options will be limited.
If you have a pro account and want to customize your banner, the first thing you need to do is size the image correctly. You'll want to figure out how wide your blog is (this example assumes you want the banner to be as wide as the entire blog). One way to check that is through the "View Page Source" option in your browser menu. I use a Mac, and both Firefox and Safari browsers have a "View" option in the top menu bar. Go to your blog (the actual blog, not the Typepad panels), click anywhere on it (not on a link, of course), and then go to View in the menu bar and choose "Veie Page Source."
This pops up a window that shows the code for your whole blog page. If you scan through this, you should be able to see a line that tells the maximum width of your blog, probably something around 700px.
In whatever photo software you use, size the photo to the appropriate width. Now you're ready to upload it to Typepad.
In Typepad, click "Control Panel."
Click "Files."
On the right is the Upload Photo option.
After you've uploaded the photo, you'll need to know its URL. On your Files page, look in the list (at left) of file names. Click on the name of the photo you just uploaded. It'll open in a new window; highlight and copy the URL. It will be something like: http://mytypepadblog.typepad.com/myphoto.jpg
Now you can stick that photo at the top of your blog!
Click "Weblogs."
Click the name of the blog you want to customize.
Click the Design tab.
Scroll down and click on "Edit Custom CSS."
Now you need to paste some code into the CSS window. It will be a variation of:
#bannerUse the Preview button to check how it looks. You might need to adjust the height setting or the background position. Change the text-align setting to left or center if you like.
{
height: 325px;
background-image: url("YOUR PHOTO'S URL");
background-position: 15px 15px;
background-repeat: repeat;
text-align: right;
}
There are lots of other ways to tweak the CSS for your banner, depending on which Typepad template you're using, but this is a good place to start.
Subscribe to:
Posts (Atom)