Tutorials | Jodiann's Sky Pie Bytes Tutorials | Digital Scrap Design Tools Powered By Pie

‘Tutorials’ Category

Testing Image Map

April 13, 2011 by Jodiann aka Bean

Pardon, need to test my image map. What’s an image map? Well that was what I was thinking about a hour ago. Its a code applied to an image to make it clickable when mouse-ed or rolled over in certain areas. Like this…( fingers-crossed)

KimB Blog | About Bean | Facebook | Twitter | Bean Blog | Image Map

If I did this right, when you mouse over the image above your mouse cursor should changed to a pointy finger and notes to the location you would go to will appear. Clicking should take you there too. In this code version the links are also running along the bottom. If this works I will tell you how I did it. If it doesn’t…back to the drawing board! LOL!

Whoo HOO! Okay it worked! Yippee!

I see all these great siggies out there in forums that have all this info and click-ability and I WANTED one! Hoot!

So I made the image above in Photoshop. Its pretty big, probably too big for most forums ( 481×227) so I will be creating a smaller sized one as well. I also made this one in PNG format, for clean lines and transparent background. Its high in kb weighing in over 300kb. Again, could be too heavy for most forums too. Will definitely need a smaller size. Its a good first try, though. A quick check to the forums I visit to see the requirements would have been a good first start.

Here is how to do it, if you want to make your signature tag clickable.

Tutorial: Image Mapping Your Signature Tag.

1. Check forums where you are going to post your signature tag with image map for requirements.

2. Build signature tag to those requirements.

3. In your browser, open a window for each location your wish to link.

4. Upload your image to Photobucket or another photo hosting site. Keep this window open.

5. Open a window go to http://www.image-maps.com

6. Upload your image as directed by image-map.com.

7. Follow directions for mapping at image-map.com. This is where having your location windows open will really help. If you leave image-maps.com and come back you have to start over. So use the windows and keep the hair on your head and frustration to a minimum.

Note: I had trouble with the length of the code for the more advance image above once I got to the forums. There are limits to how many lines of code one can paste. So I had to drop FB Twitter Blog links. See new tag at bottom. You may have to as well.

8. Finish Mapping. Be sure to input a Base URL ( I used my blog) and Image URL : Remember you kept your photo host window open? Go there now and copy the direct link ( starts with http://) into the Image URL window.

9. Get Code. Copy code to Wordpad or other similar text writer program. Save.

13. Highlight the entire code and paste it into the source window of your blog or in the signature area of the USER CP of whatever forum you frequent to test.

14. Positive test? Congratulate Yourself. You are Awesome!!

Smaller Image with fewer links…forum tested. Passed the code line requirement.

Happy Image Mapping!!

Jodiann

Tweet This Post

Category Tutorials | Tags: tutorial | 1 Comment
CU TOP 20 Black Styles for Photoshop

June 11, 2010 by Jodiann aka Bean

Top 20 Black Styles at Kristine’s Place

Top 20 Black Styles at Digiscrap Warehouse

Top 20 Black Styles at DigitalScrapDesigns

The Top 20 Black Styles counted down by yours truely! When my friend Kristine ( Yep! Owner of Kristine’s Place) said, " Hey how about making some black styles?" She got me thinking. I looked through my style sets with new eyes. I had a few black styles I had made for myself but for the most part each time I wanted a tinted black solid color I had to digitally mix it up. If I was on the ball I save it as a swatch. Most often I didn’t save and I had to do it over and over. Not hard, but wouldn’t it be great to have a few to quickly click on right in my Styles Palette? So I made a dozen tinted black solid styles and used them for a few weeks to see how helpful they really were. Very! It was a snap to click a black style and get a tinted black fill, edge, line, whatever! Sure one can call up on Hex Black #000000 anytime that’s simple without a style, but clicking around in the color picker for a bit of red/black or purple black…well that’s just tedious and then one has to remember to save as a swatch. Something I often forget to do even after I have color picked my heart out and got the right color I get busy playing with it and forget to make a swatch.

So I found the ready made Tinted Black Solids a real timesaver.

Once I narrowed the black solids down to the best ones Blackberry, Black Coffee, Blackboard, Black Smoke, BlackWalnut, Black Water, The ones I relied on again and again. I turned my attention some glossy styles and highlighted styles that look their best on black. I thought that would be pretty easy, but I found it to be quite a challenge since black can rob depth from a highlight or gloss. Re-working them again and again really paid off. I find myself using each of these quite a bit. BlackGloss, BlackMatte, BlackFlat, BlackIce.

With the Top 10 Solids all set, it was time to play with patterns. I used my thinker box to come up with some transparent patterns for everyday use. BlackLace, BlackStripes, BlackStripedFur, BlackStars, BlackChecks, Each one is a happy surprise when used OVER a color layer. See demo. Really loved the versatility of these! Try the Black Lace over Red…VAVOOM! Last in the show are the solid patterns. I focused on what entered my mind as black, Black Jeans, Fossils, Granite, Snake Skin, Tonal Black Checks, and Obsidian Stone. In the last week, alone, these solid patterns have been the basis of papers, a few frames and I printed out a photomat for a graduation certificate using the Granite Style. Piece of cake! So easy!!

To sum it up, Top 20 Black Styles are seamless, using large PNG images for high quality and low repeats. I just couldn’t narrow it down to 20 so there are 21 unique ones. 23 total. The 2 Stripe styles are counted as one, same with the Snake Skin style. Its just so much easier to use these with one horizontal and one vertical stripe. Saves a bunch of flipping. Who wants that when you Styling? HOOT!

Original Styles created by Jodiann Cates using Photoshop CS3. Using her own photos and Photoshop made PNGs as well as CU photos and PNGs of other artists, CU Custom Shapes of other artists.

PS7, PSCS, PSCS2, PSCS3, PSCS4 and PSE compatible.
Drop Shadow Free.
Quality Checked.
This purchase contains:
23 Top Quality Black Styles; Seamless and adjustable in .ASL format 300 ppi.

1 Text Document with Unpacking and Installing Instructions.
CU4CU CU PU S4H S4O Commercial License Included.
You may use these PS Styles to create your own products to sell. With the
exception of using them to build Styles Sets or Patterns Sets for resale

Top 20 Black Styles at Kristine’s Place

Top 20 Black Styles at Digiscrap Warehouse

Top 20 Black Styles at DigitalScrapDesigns

Check out this limited time freebie offer by Kristine of Kristine’s Place!

Freebie Alert!

Thanks ‘Stine!

Quick and Easy Floating Check Paper Tutorial with Top 20 Black Styles

This is so easy!

To Buy Styles…

Top 20 Black Styles at Kristine’s Place

Top 20 Black Styles at Digiscrap Warehouse

Top 20 Black Styles at DigitalScrapDesigns

1. Open a transparent image. I choose 300×300 image at 300ppi

2. Apply Style: Jodiann’sTop20BlackChecks17

3. Duplicate Layer. Apply Style: Jodiann’sTop20BlackChecks16

4. Add New Layer. Keyboard Shortcuts: PC> Shift+Control+N Mac> Shift+Command+N

5. Move Black Checks 16 Layer to Top.

6. Merge Down.

7. Again. Apply Style: Jodiann’sTop20BlackChecks17.

No freaking out, it will look like nothing happened, roll with it, Sweetie!

8. Double Click Ctrl+Shift+N Layer. Apply DropShadow.

9. All Done!

Here is a close up…

You can chose to recolor one or both of these layers.

10. Save as a PSD layered image ( .PSD) for easy changes and recoloring.

11. Then Save as a JPG, reducing the Quality to 8 ( no less). Quality barely suffers, yet paper is now more compact for sharing. ( Thanks Kimmie!)

By playing with the opacity settings, adding an edge then blurring it for a softer look this is what I came up with.

Sinclair the un-affected cat gives us all much needed advice! WHOOT!

Happy Weekend Precious People!

Tweet This Post

Category Tutorials | Tags: | 2 Comments
CU Bokeh: Point of Light Styles

June 4, 2010 by Jodiann aka Bean

New in Stores and 30% off until Thursday, June 10th…

12 Bokeh Styles ( boke = blur in Japanese) These simulate a blurred reflection when a camera looks into a light source. Use these Transparent Styles behind a photo mat, extracted photo, to fill in an element, to create papers, to make photo mats, as an overlay right on your photos. Duplicate the layer you wish to see then add this bokeh style, since it is built to replace whatever is on the layer its applied to.

All of these styles can easily be re-colored, but the light whites with grey or yellow tones have been made especially for re-coloring, one of each shape. Special Thanks to KOL for the inspiration!

Original Styles created by Jodiann Cates using Photoshop CS3.

PS7, PSCS, PSCS2, PSCS3, PSCS4 and PSE compatible.

Drop Shadow Free.

Quality Checked.

This purchase contains:

12 Bokeh Styles; Seamless and adjustable in .ASL format 300 ppi.

1 Text Document with Unpacking and Installing Instructions.

CU4CU CU PU S4H S4O Commercial License Included.

You may use these PS Styles to create your own products to sell. With the exception of using them to build Styles Sets or Patterns Sets for resale.

TUTORIAL

Let me show you hot to make a cool reflective paper in Photoshop with these Bokeh Styles. Its super quick and lots of fast fun!

1. Start with a 12 x 12 300 PPI Transparent Image.

2. In your Tool Palette load a semi-dark shade of your favorite color. Today mine is 466c8d

3. Now load a lighter shade of same color. I pulled from a lighter but grey-er section of the same color window to get a0b2c1

                      Looks like this when loaded…



4. Choose your Gradient Tool



5. Click top center of your 12×12 image> drag down > release. To get this below.

You can go corner to corner to add an angle but for now its a simple light to dark, top to bottom gradient paper.

6. Duplicate Layer.

7. Apply a Bokeh Style. I used Bokeh Point of Light Style 10. Setting the Pattern Scale to 184.

           To set pattern scale, double click words” Pattern Overlay” in your layers palette.

8. Add a New Blank Layer ( Shift + Control + N)

9. Drag Style Layer over Blank Layer.

10. Merge Down.

11. Apply Gaussian Blur by 25.0. Reduce Opacity to 42%.

12. Duplicate Layer 1 ( Gradient Layer) Drag to top of Layers Palette.

13. Apply Same Style again. Scale Style to 200.

Don’t be afraid to mess with the opacity of this top layer to soften the effect or even re-color it if you like.

14. Save at a PSD to preserve layers.

15. Then, save at a JPG to save your reflective paper as a flattened image for sharing or to work on later.

Happy Weekend!

Jodiann!

Tweet This Post

Category Tutorials | Tags: | Comments Off
CU Halftone Styles for Photoshop

May 29, 2010 by Jodiann aka Bean

Hey There Happy People!

As I hinted around about yesterday I got these Halftone Styles in the stores today.

I’ve been messing around with them and came up with this tutorial using the above Halftone Styles and and throwing in some of the semi-new Chalkies: Bold Summer Styles as a base and to recolor. Its really easy to do and you will LOVE the quick creativity! Talk about kicking out an Element or Paper fast!!

Let’s get started.

1. Open a 5×5 transparent image 300 ppi.

2. Draw out a Custom Shape. Rasterize Layer.

3. Fill in with any Style you like. I used “New Leaves” of Bold Summer Chalkies.

4. Duplicate the image.

5. Add a Halftone, pick a larger patterns for a larger WOW!

    I used Halftone Style 01.

6. Now, I want to recolor just the dots. Normally just clicking any Style in the menu will change the color of the entire umbrella. I want just the dots.

SO…

I will have to affix the style permanently to the layer. Keyboard Shortcut: Shift+Control+N ( Shift+Command+N for Mac) Creates a New Layer.

Click and Drag the Halftone Layer ABOVE the New Layer>Merge Down.

Dragging

Done Dragging

Merged Down

The Style is permanently affixed to the layer. Click any Style in your Style Palette Menu to change it from Black. I chose “Scallop” from Bold Summer Chalkies.

Pretty Great! You could stop there, but maybe you want more color or more interest? Let’s keep going.

7. Duplicate Top Layer (Halftone 01)

8. Apply another Halftone Style, a smaller pattern this time for a punch of detail. I chose Halftone Style 07.

9. Affix the Style to the layer as above…

         A. Create New Layer.          Shift+Control+N ( Shift+Command+N for Mac)

         B. Click Drag New Layer Below Halftone Layer.

         C. Merge Down.

10. Click any Style to recolor. I chose “Tomato” from Bold Summer Chalkies.

Mmmm! I likie! I will stop here. You can continue adding more detail using as many cycles of this affixing and re-coloring move that makes your heart happy!

11. Save as a layered file ( .psd) *** Why? ***

THEN!

12. Save as a single image with transparency ( .png)

13. Quality Check the image for jaggies and you have made a quick element in less than 10 minutes.

Way FUN and this creation only took about 7 minutes! WHOO HOO!

*** Why? ***

Saving a layered file is helpful to fix mistakes, that’s smart, but mostly its just plain FUN! Months down the road you might want to know how you did this. The layered file remembers so you don’t have to. Short-term… Its great to play with!

Open up that layered file back up.

Duplicate it.

Now click on any layer and toggle through the other choices you could have made. See the possibilities? Try another layer, change the color, the style you used etc! WHOO HOO! Now you are playing. In the end, we digital scrap to feed our creativity and have fun!

Don’t forget to have a BIG helping of both! Weeeee!

Huggins!

Tweet This Post

Category Tutorials | Tags: | 1 Comment