Showing posts with label gradient. Show all posts
Showing posts with label gradient. Show all posts

Friday, February 21, 2014

#Concave or #convex 3D Bubble Text effect + #Zazzle product creation templates

Starting to put more of my own collections of memorabilia on the swag at Zazzle, and having a good time with the effects you can get with two layers of text.

The text below looks concave, like it was printed on the side of a very large bubble or sphere, bowed-out toward the viewer. This technique can be done with photoshop, but can also be accomplished with the zazzle online product building tools.
Personalized Bike Racing Cycledrome
Personalized Bike Racing Cycledrome

The trick is to make two identical text layers, and then change the font size and the color of only one layer. Make sure that both layers are centered vertically and horizontally.

The usual arrangement is to make the smaller text a dark color so it looks like a drop-shadow, and to keep it on the bottom layer, "below" the larger text. You can get an interesting effect if you reverse this arrangement. If the smaller text is on the top layer, then it looks like the text is convex, bowed-out away from the viewer.


The inspiration for this idea originally came from an email newsletter by the good folks at ZazzleHow2 on Facebook. "Learn how to make personalized 3D text on Zazzle with our most recent Zazzle How2 video". You can view it on the Zazzle How2 Acceleration Resources web page, which also has videos about making zazzle templates. 

Briefly: To get a drop shadow, create one text layer with the correct font, size and position on the product. Click the box to make it a template object. Then, use the Zazzle pull-down menu to "copy" and "paste" to make an identical copy of the text (control-c does not work).

Then, carefully drag the text on the screen one little pixel to the right, and one pixel down. Change the color of this text, and rearrange the layers in the list so the drop-shadow is below the other text layer.

We used this to get a white drop-shadow outline the text on a dark background for the image of a swan at the KidsLife store on Zazzle.




To make a customizable drop shadow for zazzle template, verify that both text layers have the exact same Product page label: and URL parameter name: , and ✔ Allow editing on product page. Your customer will only need to fill-in the text once, and both text layers will update at the same time.


Wednesday, November 7, 2012

Cool tech stockphoto - Test pattern, grid and scale inspired background images © blitzkrieg

Photo: technical backgrounde © blitzkrieg #29185968:
Random grids and patterns that remind me of Cal Schenkel's artwork for Frank Zappa album covers, mixed with those great test patterns that appeared on television as late as the 1970s and 80s when TV stations actually went off the air at night. At about 2 or 3 AM the last B-movie of the night ended and they would play the national anthem to signal the end of the broadcast day. Yes, TV stations actually did not operate for a full 24 hours a day seven days a week (that would be called 24/7 now). Images below © blitzkrieg @ fotolia

technical backgrounde

draftground with cursorcube background

technical backgroundddraftbackground with arm

lines draft backgroundA

technical backgroundb


RCA America "Indian Head" test pattern 

Saturday, January 28, 2012

New CSS Image Values and Replaced Content Module Level 3 - 2012.01.12 | w3.org

CSS Image Values and Replaced Content Module Level 3:
January 12, 2012
w3.org example
background: linear-gradient(45deg, white, black);
An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient-line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient-line are indicated by the intersection of the gradient-line with two additional lines that pass through the bottom-left and top-right corners of the box.

4.1.2. Linear Gradient Examples
*  

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

4.2.4. Radial Gradient Examples
*  
radial-gradient(farthest-side at left bottom, red, yellow 50px, green);
NOTE: THOSE ARE THE ACTUAL THE CODE PARAMETERS

*  
repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)


Related articles

Saturday, February 19, 2011

Tara Donovan show in NYC

Ok, Tara Donovan is my favorite artist

this gradient is created with ......


thousands upon thousands of nails

LinkWithin

Related Posts Plugin for WordPress, Blogger...