Archive for the ‘Tutorials and Demos’ Category
See all content for this category
What is that smudge on the Office Ribbon?
Tuesday, August 9th, 2011In the previous post we looked at Office 2007 and the “Mystery Tabs“. Today let’s look at the Ribbon and it’s secret feature.
First, a quick overview of “The Ribbon” – In 2007 the menus are gone and replaced with a tabbed “ribbon”.
The Ribbon is set up in Groups and are organized in families. Things that never lived together before are now all on the same ribbon. For example, in Word and Excel there is a Page Layout Tab that holds nearly everything you would want when thinking about your document layout.
On the Insert Tab, the products all have a “Illustrations” group. This didn’t exist before. It is the home of Clip Art, Pictures, Shapes (which is really the old Drawing Toolbar), and “Smart Art” (which will need to be another post – just remember, it’s all about the bullets), which is a new way of creating diagrams. The idea is that come of the useful, but buried features are being given a second chance to be used now that they can be easily found. In Excel many helpful features were extracted from the buried Auditing toolbar and moved out were they can be seen (and used).
In Office 2007 and 2010 click each tab and look along the bottom of the big, thick bar (Ribbon) for labels. These are the Groups. In the picture in this post (click on the image for a larger view) you’ll see “Adjust, Picture Styles, Arrange, and Size“. These are the Groups for this Tab, and they have a secret.
Secret?
There are lots of ways to modify the clip art on the page. You can add frames, change colors, and so on.. Somewhere on that tab however is a button that will give you the hidden options. You won’t find it unless you have pretty good vision though.
The features are under the “Dialog Box Launcher Button” (gack, what a name). Not every group has them, but the Size Group on the Picture Tools/Format Tab does. Note:Â if you don’t see that tab, click on the image. See that little grey smudge in the lower right corner of the group? It’s a grey box with a little arrow in it (and is really, really tiny). That’s the button you want. Fun, right?
So? What’s the problem?
Here’s my frustration with this button. Someone looking for hanging indents in Word (without using the ruler) can spend a long time digging around to get the 2003 dialog box to come out. It’s under the button on the Home Tab in the Font Group.
Once you find it you’re fine but it’s not exactly intuitive now is it?
Intro to ePub – part 2 of 3
Wednesday, August 3rd, 2011ePub Tips, Tricks, and Links
In the first post of this series, I had you create a very simple file (with a template the Terry White was nice enough to provide) and preview it in Adobe’s Digital Editions software.
In this post I’m going to share a lot of links and some general Do’s and Don’ts for epub and digial book creation. In the third and final post we will be making a file from scratch.
What am I getting into?
If you are a regular InDesign user making content for eBooks can be a bit of a brain twister. In essence you are making webpages. Much of the control you had is gone, and some of the really fun features that can be seen in interactive files won’t work in book readers. To give you a sense of how new this might be, I’m putting some of the tips I gathered together below
General
- .epub is an XML based format designed to enable text reflow. All content will be linearized so plan for one long stream for text and images.
Layout
- Make each page one text box with inline graphics
- Make the cover ONE image
- Create separate document for cover page – have it be one image or imported ID file
- The book panel is a good way to make separate chapters that are seen in the conversion
- InDesign has an option for automatically making a TOC in an epub file. Create a TOC style and specify it on export. The Automatic ID TOC is turned into navigation men
Formatting
- You are creating Cascading Style Sheets when you convert (think like a web designer)
- Change Nested or Grep styles to regular styles
- Use Space Above, Below, and Indent to make space around images
- Soft Returns are turned into hard Returns
- Use Paragraph and Character Styleson the text (these will convert to CSS for the .epub file).
- You can’t totally control the fonts the user will see (the type of reader that is used will determine how fonts are seen)
- Convert Nested and Grep Styles to Paragraph and Character Styles
- Epub does support font embedding, but not all eBooks formats do and not all eBook readers that support the epub format will use embedded fonts
- Use OpenType Fonts
Exporting
- If you don’t want to make a new file you can apply XML tags to existing content and use the Structure pane to reorder it for export
- For long documents break document into chapters and use the book panel
- Create a Table Of Contents – this will become navigation in the e-reader
- For a true TOC you may need to make a manual page with hyperlinks or cross-ref’s
- Un-anchored content will float and end up at the beginning or end of your file
- Keep main graphics between 300 and 600 px wide
- The cover is often best at 800×600
- Images are converted to RGB
- Add Metadata
Graphics
- Epub supports several image formats, including JPEG, GIF, PNG
- Anchor Images to an empty paragraph (then center align and use space before and after) or paste Inline
- Use color images
- InDesign coverts graphics to JPEG and GIF when exporting to epub unless you choose to copy the original images
- Convert InDesign art by Cut/Paste into Il or PS and Placing in ID
Conversion
Altered
- CMYK will be converted to RGB on export
- Convert Tables to lists or images if you can
Preserved
- Hyperlinks to URL’s, files, email addresses, and text anchors
- Cross Ref’s are converted to hyperlinks on export (Note: Some eBook readers don’t support any hyperlinks)
- Footnotes are kept, but are converted to endnotes
Discarded
- Multiple Carriage returns
- Empty Frames
- Frame attributes such as Fill and Stroke
- Custom settings for Anchored Objects
- Text wrap setting. Use Space before and After instead
- Hyperlinks that reference specific pages
- Master Page Items
- Automatic Page Numbers
- Page Breaks
- TOC generated by the InDesign TOC feature (do this anyway – it becomes navigation )
- Artwork made with InDesign vector tool (those you should copy into Illustrator and place back into InDesign)
- Not all text formatting is preserved
Links
- Digital Editions Reader
- Open-source EpubCheck program hosted by Google at code.google.com/p/epubcheck
- Free, standalone, cross-platform Javaâ„¢ app, ePubChecker
- More information on epub format -Â http://idpf.org/
- Free open-source eBook conversion tool www.calibre-ebook.com
- InDesign to Kindle – Adobe
- Terry White – http://terrywhite.com/techblog/
- Colleen Cunningham has a massive and massivly helpful list of resources here - http://www.digitalbookworld.com/2011/indesign-to-ebook-resources/
Ok, got it – now what?
Take an existing Indesign file (a reasonalbly fancy one) and export it to epub. Look at how the content is moved (and what doen’t convert). Next time we will finish will a soup-to-nuts tutorial – see you then!
Camera Confusion [Guest Post]
Monday, April 18th, 2011Decode the jargon before buying
You want a new camera but don’t know where to start – the Canon camera looks like something you’d find in Batman’s car, the Nikon that has more megapixels than you can count and the miniature Pentax looks so complicated you’re afraid to pick it up.
HOTSHOE! APERTURE! EXPOSURE! ASPECT RATIO! LIGHT METERING! HIGHEST ISO IN THE UNIVERSE! … All these words are thrown at us when we’re looking at buying a digital camera and sometimes it’s hard to know where to begin or what’s really important. Here are two terms to know when you walk into a camera shop – so you can hold your own when the salesman starts his cruel and grueling pitch.
Megapixel
A megapixel count is a way we measure image resolution. One megapixel equals one million pixels, which are the minute dots of colour that form a whole image. The more pixels there are in an image, the higher its resolution will be – and the larger you can print it.
*Many people incorrectly believe that megapixel count is the most important thing to know when buying a camera. While resolution does affect print quality, there are a host of other factors to take into account before buying a camera that works for you. A good way to determine how many megapixels you need is to decide what you’ll be doing with the pictures you take – if they’re just for fun, uploading to internet sites and sharing with friends on social media, then you certainly don’t need the latest 16 megapixel Nikon digital camera and can safely opt for something with a much lower megapixel count.
ISO
This is a term set by the International Standards Organisation. Every digital camera has an internal image sensor that reads the amount of light that floods the camera when the shutter goes off. If the ISO is high, the image sensor will be more sensitive to light and if the ISO setting is low, it will be less sensitive. The ISO setting can be used to get the best out of a situation when there is limited light – a high ISO will allow the image sensor to pick up more light in a club that’s dim, for instance. During the day, when it’s bright, you’d set a low ISO so that the camera is less sensitive to the amount of light entering it.
*Shooting on a high ISO often means that your images won’t be perfectly crisp and clear. The higher the ISO, the more noise you get in your picture – noise refers to the ‘grainy’ look that images shot in low light settings sometimes have. You can combat this by using a flash or a tripod and most cameras these days are able to produce images with reduced noise.
There are many other things that you should look for when choosing a camera, such as zoom capabilities, flash, aperture settings, lenses – but you can learn about these things one step at a time!
Jason Acar is a professional writer who has written on a wide range of subjects from nikon digital cameras to travel. He also has a passion for writing helpful articles for people working in their respective industries.
Intro to InDesign CS5 and ePub -part 1
Saturday, April 9th, 2011Your First ePub InDesign Document
What is ePub?
Wikipedia defines epub thusly:
EPUB (short for electronic publication; alternatively capitalized as ePub, ePUB, EPub, or epub, with “EPUB” preferred by the vendor) is a free and open e-book standard by the International Digital Publishing Forum (IDPF). Files have the extension .epub.
EPUB is designed for reflowable content, meaning that the text display can be optimized for the particular display device used by the reader of the EPUB-formatted book. The format is meant to function as a single format that publishers and conversion houses can use in-house, as well as for distribution and sale.
If you’ve never tried making ePub documents with InDesign, and think it will be a lot of work and/or a true pain, I have good news… Terry White is your new best friend.
There is a lot of information out there about making ePub content and it can be overwhelming. I’ve compiled some information from multiple sources and will give you a reasonably in-depth list of what ePubs can and cannot do – BUT first things first.
For this tutorial, I’m going to ask you to download two things, place a few graphics and export your first ePub file. After that please come back next week for the second article where I give you lots of links and general tips to help you if you decide to add ePub creation to your arsenal.
OK, what do I do?
The first download is Adobe Digital Editions, the link is below. This will let you view the content you make. The second is an InDesign CS5 template by Terry White that will let you place in a few images and make an .epub file in minutes. There are more resources from Mr. White and more that I have to show you but I’m going to ask you to just do these things first.
Here are your links for the two downloads you need.
Terry White’s CS5 Template
Adobe Digital Editions Installer
What’s Next?
- Download and Install Digital Editions
- Open the template in InDesign and place images into the frames and save the file
- Now look over the template. The text won’t match the graphics but we don’t need to change out the text as we will make a full file later. The template’s scary in it’s simplicity isn’t it? There is a good reason for that – epub is linearized. Everything flows in one big stream. If you tried to make an ePub document from a typical complex InDesign file you would be very unhappy with the results.
Let’s make this into a book and view it in the reader
- Export the file to ePub
- In the export dialog box make sure that “Use First level Entries as Chapter Breaks†is checked in the “contents†section
- Export (depending on your settings, the file may open right away or you may have to double-click on the ePub file, which will be found wherever you saved the InDesign file.
- Look over your book
- Come back to my site for part 2 of Intro to ePubs
Easiest Damn Color Rules Ever!
Friday, April 1st, 2011Some people really love choosing “the right” color for their content and will spend ages getting it the way they want. Some people just want to be able to put colors on their content that works well and doesn’t make babies cry. This article is NOT for the first group.
Kirsten’s Super Simple “Heraldry Color Rules”
OK, these are not “MY” rules, but they are the ones I use in class fairly often. I am a bit of a color geek, though not a patch on my oil-painting husband. So, when it comes to making designs I’m reasonably happy spending a nearly ridiculous amount of time messing with color combinations. There are many, many people however for whom spending time that way is not only not productive but headache inducing.
We have the idea, can you hurry it up a bit (and be less damn wordy) ?
Um, yeah. Sorry.
If you are not sure what colors “go”, just follow these simple rules. Feel free to break them when it makes sense to you. You will find plenty of heraldic examples that break these rules but here are the basics.
The Rules
Metal on Color and Color on Metal
What is “metal”? White and Yellow stand in for silver and gold.
Red, Blue, Green, Black… your colors can go on either of the metals, and the metals can go on any color.
You don’t put metal on metal (like white text on a yellow shape) or color on color (like blue text on red or vice versa). In the image above, the black outline means it’s not white on yellow. It’s white on black on yellow. Basically it’s an easy way of keeping good contrast. Having said this I just made a layout in InDesign that used a dark cyan background with a tint of the same color as the title text. If you’re going to leave clear contrast behind, do it mindfully. Pale grey text on white is my least favorite graphics fad but there are times things like that can work.
But no one follows these rules anymore, do they?
Let’s see… Adobe, Dunkin Donuts, Subway, Chili’s, Harley Davidson, Starbucks
– and check out the logo for the US Cyber Command
There are examples of breaking these and it working fine…
Nasa’s logo has red on blue but it’s not red text – which I think would be harder to read than the white they use.
So, if you’re not sure about your colors. Take an easy shortcut. Just think Heraldry.
Adding a Twitter Feed
Friday, December 3rd, 2010Why I put a twitter feed on my site and a brief tutorial on how (as well as making it validate xhtml strict) –
So, I did it. I created a twitter account and put the feed on the main navigation page of my site. The question of course is WHY?
I have been thinking about how I could both make my site easier for me to update and make it more likely that I will actually post real content and no just throw in links (like I’ve been doing for 98% of the time I’ve been up). I decided I would use the twitter feed to add links as much as possible and would make creating actual posts something that would be at least a paragraph or two.
That’s why I did it – here’s how. If you are using WordPress as the underlying structure for your site (like I am), AND you have widgets available in the template you are using, then adding a tweets section will take you only a few minutes.
Step One – First go to twitter.com and create a new account. Create a tweet so you can see if it works when you add it to you site.
Step Two – I did a search for add twitter to wordpress and found a useful page at quickonlinetips.com. I originally chose Twitter Tools but found it was more than I needed and more of a headache to add. I ended up with the criminally simple Wickett Twitter Widget. If you want to install the plug-in, here is the easiest possible way, do this…
- Go to the plugins page on the backend/administrator side of your wordpress site
- Click the Add New button
- Search for what you want and click the link that says “install”
- Activate the plug-in
It’s literally that easy! I picked one that had no detailed settings page so I was able to add the feed directly into a widget area.
There is a catch! I have a site that uses a valid xhtml strict template. Adding this to my site made the validation cough up two errors. It’s a longer post for another day why this matters to me, but as it does I needed to fix it.
There is a solution! The error are written in a stunningly stupid way and make it seem like the code is missing closing tags – it’s not it’s missing the type attribute in the script tags. Just add type=”text/javascript” in the opening script tag(s) and it should validate fine.
CSS3 Media Queries
Sunday, November 7th, 2010Here are several links on a wonderful feature of CSS3. If you have not had a chance to look at Media Queries and you are either a CSS person or might be making mobile content, check it out.
Creating documents with an easy screen capture
Saturday, November 6th, 2010Screensteps
My husband found this software and I am going to try it out. If you make documentation with screen captures like I do, you might find this helpful. I will post more on this after I’ve had a chance to play with it.
From the Blog
- WordPress, I both love and hate you
Saturday, April 28th, 2012 - A Learning and Development Professional’s Continuing Education
Wednesday, March 21st, 2012 - Photoshop CS6 Sneek Peek #3
Monday, February 13th, 2012