On this page
Text Palettes
How to make a color text palette
How to make a rug

>> BACK TO INDEX of TUTORIALS

 

These "colour text palettes" were 1st created by Molly to go with the presentation of the Haiku palettes in the CL blog post written by Ketisse entitled: "HAIKU- Where Poets Create with Colors and Words"


>> HOW TO MAKE COLOUR TEXT PALETTES WITH PHOTOSHOP by Ketisse

These are for palettes where the colour names have a meaning, such as HPP (Haiku palettes) or 'Your palette tells a story'


Examples using these palettes

 

See HOW TO below
NB: DO NOT FORGET TO REMOVE ALL LINE BREAKS

OPTION 1

Rainbows HPP

Raindrops on my face

Apollo

in the temple

rainbow

in the sky

OPTION 2

Rainbows HPP

Raindrops on my face

Apollo

in the temple

rainbow

in the sky

OPTION 3

drink this

wine

Enjoy Every Drop

Like Wildflowers

in soft summer rain

OPTION 4


Above was 1st created by her. with a white background
in your eyes today i saw something i've never seen before



OPTION 5 - See explication below


OPTION 6 Combination of option 1 and 2, input backgroun, font, underline colour for each line.

Hot Like...?

American Women

Don't Eat Them!

They're Hot!

Hot Like

passionate dreams

See HOW TO below

 

HOW TO:

1)
Copy the code from the option file you want
paste the code to any simple text editor or just use the comment space below

OPTION 1
OPTION 2
OPTION 3
OPTION 4
OPTION 6 - NB: Don't forget to remove all the line breaks!!

2)
In the code, replace:
> HEX_COLOUR_CODE with the HEX code numbers (leave the hash sign # - option 2 has 2x HEX to replace per line)
> COLOUR_NAME with the name of the colours
> LINK_TO_PALETTE_PAGE with the URL of the palette page

PS: Double click on the text to replace, it should select the right amount

You may need to adjust the widths - on the 1st line where you see:

<div style="width: 330px; ...

change it to narrower or wider

examples:

narrower: width: 280px;
wider: width: 380px;

3)
IMPORTANT!
Once all the text replaced REMOVE ALL THE LINE BREAKS !!! - Line returns, new lines.. how ever you call them. Make all the code go on one long text line.
and paste the code where you want - Voilà!

OR: you can take a screenshot to use as image file
See :
How to take a screenshot
How to embed an image
How to link an image or some text <-These are in-page links, it leads to a specific comment - let the page completely load and you should be in front of it:

 

OPTION 5 HOW TO

To make the above rainbow version
1) Go here Felocity.org Textify 2) Combined the code with this : OPTION 5 CODE

If you just want the simple text version I still advise to link to the palette page so it become click-able.
To link select all the code and proceed as you link any text or image:
> See How to link an image or some text <-This is an in-page link, it leads to a specific comment - let the page completely load and you should be in front of it

 

Example with different line widths
----------------------------------------------------------------------------

Raindrops on my face

Apollo

in the temple

rainbow

in the sky

----------------------------------------------------------------------------

I have added +10px to each border each time.
In the code it's where you see "border-bottom: 10px ...

border-bottom: 10px
border-bottom: 20px
border-bottom: 30px
...etc

Click 'reply' to see the code

 

This is to make palette tables or pattern patchworks like this (It's exactly the same for pattern and palettes)


>> See more rugs

1)
I've prepared the code of an empty rug
All you need to do is fill it with the palette/pattern links you want
>> EMPTY RUG CODE FOR PATTERN *(this will not work for pattern previews that are not square)
>> EMPTY RUG CODE FOR PALETTE



Copy this code and paste it in to a simple text editor (eg. for Windows: notepade or Worldpad, for mac: TextEdit ... or just use the comment space below or if your rug is to big to fit in a comment, this)

NB: If you want to save the file, save it with the extension .txt or .html
If you use MS Word or a word processor: avoid .doc, .docx, !! - or it maybe better to put it on a page/comment here at CL
Or use this while you work

2)
Get each palette/pattern page link and preview link .
This screenshot shows what to get and where to put it in the code:


Click to enlarge

In the code, paste each pattern/palette page link and preview link:
This screenshot shows how to paste the copied link and what the result should look like

Click to enlarge

3)
Add more or remove lines to fit the quantity you want

The pattern code is for 4 items on each row.
If you want to put 2 change the "width:25%" to "width:50%"
If you want to put 3 change the "width:25%" to "width:33%"
If you want to put 5 change the "width:25%" to "width:20%"
If you want to put 6 change the "width:25%" to "width:16.6666%"
and so on...


4)
At the end : REMOVE ALL LINE BREAKS without leaving any space between the lines
This means: join the ending and begining of each line link this:
</a><a href....

NOT like this, with a space in-between
</a> <a href....
PS: Unless you want a thin gap between each image - but you will then need to change the size (1 space takes space too!) - See the "How to resize an Image" above

Typical mistakes:

Click to enlarge

See here for some Super basic HTML 'good-to-knows'

 

palette rug code

For handy, I'll also put badges here below - click reply to copy the code

In order

Haiku [HPP] badge

Your palette tells a story Group badge

Your palette tells a story forum badge (the link is different)

 

You are welcome make & preview your text palettes and rugs here
then delete it, or I'll delete them once in a while

 

Bipolar radioactive cactus poison candy, in you i taste god. Crazy!

195,235,11 100,245,102 8,237,160 51,37,59 228,66,45 228,66,45

Anna, seriously...they should let you run the site. You know all the tips and tricks!

OrigamiMei wrote:

Anna, seriously...they should let you run the site. You know all the tips and tricks!

In fact I do run the site .. but like a butterfly! xD
When I saw I received notes with similar questions - I decided to make my answers public. So it's supposed to be a gain of time...

Thank you! :)

ycc2106 wrote:

Happy Fathers Day

My Dad

shines like diamonds

on fathers day

the only one

starlight

Thank you ycc2106 for your instructions. I finally made a gradient rug. :)