sobota 16. ledna 2010

Cooltext

Cool Text: Logo and Graphics Generator
V dnešním díle seriálu o webových aplikacích vám představím Cooltext. Jedná se o webovou aplikaci, která umožňuje jednoduchou a rychlou tvorbu textových efektů. A to ve formě loga nebo tlačítka pro webovou stránku. Výsledné logo je možno uložit v několika formátech s to i s podporou průhlednosti. V případě tlačítek je vygenerován i HTML kód pro přímé vložení na web. Další příjemnou službou  poskytovanou aplikací Cooltext je databáze více než 1200 fontů, které jsou volně ke stažení. Jednotlivé fonty jsou roztříděny do kategorií podle typu fontu, autora a jména fontu. U ukázky jednotlivých fontů bohužel tvoří pouze jméno fontu, takže není možné poznat zda ten který font podporuje české znaky.

Nyní přijde na řadu návod na používání webové aplikace Cooltext. Po otevření webu Cooltext vybereme v horním menu sekci Loga na této stránce vybereme požadovaný grafický styl loga. Otevře se editační stránka, na které nastavíme veškeré parametry požadovaného loga. Nastavitelné parametry se mohou mírně lišit v závislosti na druhu vybraného loga. Prvním nastavitelným parametrem je zobrazovaný text, stačí ho nahradit vlastním textem. Následuje font, po kliknutí na obrázek aktuálního fontu se otevře nabídka s výběrem fontu. Tato nabídka, bohužel textová, obsahuje jednotlivé kategorie fontů s udaným počtem fontů. Pro vybrání fontu stačí klepnout na jeho ukázku. Dalším parametrem je velikost fontu, opět přepíšeme základní hodnotu vlastní požadovanou velikostí.

Další částí jsou barvy. Zde se může nabídka lišit v závislosti na vybraném designu. K čemu jednotlivé barvy patří však není těžké odhadnout, pokud se budete řídit zobrazeným ukázkovým logem v horní části stránky. Při výběru barvy máme několik možností. Barvu můžeme zadat přímo pomocí složek RGB nebo v hexa kódu nebo můžeme využít barevnou nabídku kapátko, případně seznam pojmenovaných barev. Pro použití kapátka klikněte na ikonu kapátka vedle barevného obdélníku. Otevře se standartní nabídka pro výběr barvy známá z grafických editorů. Posuvníkem ve pravé části vybíráme odstín a v obdélníku nalevo konkrétní barvu. Po úspěšném vybrání barvy klikneme na křížek v pravém horním rohu. Pro výběr ze seznamu pojmenovaných barev klikneme na barevný čtvereček vedle kapátka a následně vybereme požadovanou barvu.
Některé designy neumožňují výběr barvy, ale výběr vzorku nebo barveného přechodu. Po klepnutí na základní vzorek se otevře nová stránka s nabídkou přechodů (vzorků). Výběr potvrdíte klepnutím na požadovaný vzorek (přechod).
Posledním prvkem je výběr pozadí a formátu obrázku. V případě pozadí se nabízí možnost vybrat barvu pozadí nebo obrázek na pozadí. Výběr barvy probíhá výše popsaným způsobem, obrázek na pozadí se vybírá stejně jako vzorek. Formát obrázku je důležitým parametrem, v nabídce jsou tyto možnosti:
  • GIF
  • GIF s průhledností
  • GIF s průhledností bez ditheringu
  • JPG
  • PNG
  • PNG s průhledností
  • PSD formát Photoshop
  • XCF formát GIMP
Po dokončení všech nastavení klikneme na tlačítko "Render Logo". Otevře se stránka s informací o probíhajícím zpracování vašeho loga. Pokud je na této informační stránce číslo, tak udává vaše pořadí ve frontě požadavků na zpracování loga. Po dokončení zpracování se stránka obnoví a ukáže se hotové logo. V dolní části je několik možností: Stáhnout obrázek, Upravit obrázek, Získat HTML kód, Poslat obrázek e-mailem. Poslední dvě možnosti jsou podmíněny registrací, proto vám nemohu poskytnout informaci k čemu slouží.

Další možností je tvorba tlačítek. V horním menu vybereme sekci Tlačítka. Na této stránce nastavíme grafický styl tlačítka. Tvorba tlačítka je velmi intuitivní a navíc je usnadněna "živou" ukázkou výsledného tlačítka. Po dosažení požadovaného vzhledu, použijeme tlačítko "Render Button". Po proběhnutí vykreslení se objeví stránka s výsledným obrázkem. Pokud jste v předchozím kroku nezvolili žádný efekt myši tak uvidíte pouze jeden obrázek s možností stažení. V případě, že jste některý z efektů vybrali, zobrazí se obrázky dva a také HTML kód pro změnu obrázku při přejetí myší. Pro správnou funkci kódu je nutné stáhnout oba obrázky.

Poslední možností je stažení fontu. V horním menu vybereme sekci Fonty. Ze seznamu vybereme požadovanou kategorii a následně požadovaný stáhneme kliknutím na Stáhnout -jmenofontu- font.

Žádné komentáře: