SPONSORED LINKS
Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

The Old Habits of Nymphont Die Hard

The Old Habits of Nymphont Die HardI have been playing around with templates on Blogger for a little while now (Blogger templates specifically since 2009, designing for the web altogether since 1996) but I must admit I have quite enjoyed creating the GlitterBurned Gallery, as well as it's new "companion blog," the GlitterBurned Blog.

In creating these two blogs, I experienced a couple "firsts," of my Blogger blogging experiences. One such Blogger first, was in creating the gallery. This was my first design of a "gallery" style on Blogger, consisting of multiple posts positioned beside one another on the main page of the design, each dominated by an image/photograph. In this case that dominating image, would be a screen capture of the blog which is the subject of the particular post.

Another first, in a long time at least, is the "liquid" design style I have used GlitterBurned's new blog. Now, mind you, this is far from the first liquid layout I have ever created. No, no, I most certainly created my first liquid layout before the year 2000. Nonetheless, it has been years to be honest, years since I have created a new "liquid" layout prior to this.

And by "liquid" what I am referring to is the lack of a fixed width to this layout, (save for the minimum width!) and the design's ability to slim and strech according to the width of the screen.

Doing these "firsts," brings to mind two questions.
  1. Why havent I created a liquid layout for so long?
  2. Why now?
I'll answer them both. One factor in my chosing to create fixed width layouts for so long is, honestly, I didn't have to.

Coding is something that I actually enjoy, thus I do keep abrest of the latest and newest techniques, changes, and so on. In the same token, however; I also keep abrest of issues that pertain to my niche of blogging. And of course, being master of my domain, I am at liberty to make executive decisions regarding what my designs need to support.



GlitterBurned Blog Screen Capture

A screen capture of the new GlitterBurned Blog, and it's "liquid" layout.

Let me explain my motives a little further. I work on an archaic computer with an equally archaic and dismal monitor, and use Windows XP. Not the latest, not by far. There is little past browser shots in my arsenal for cross browser testing.

That said, I knew I could design best for PC users, more specifically, Windows users. If my computer and browser could do it, the majority of fellow Windows users with a relatively recent browser, would have similar capabilities, and likewise an additional (growing) number of Window's users, would have similar capabilities and then some as well. Thus a good number of folks would get an experience close to what I intended them to.

How does this relate to my reasonings behind creating liquid layouts or not? It's with the rational that my computer is sub-standard with an equally second rate quality of web experiences; a fixed width layout befitting a reslution of 1024px or larger was not so much to ask.

Excluding of course the unending assortment of new mobile and hand-held gadgets with to-die-for-web-capabilities, I felt comfortable requiring a minimum of 1024px viewable width for my designs to display correctly, because excluding the aforementioned shiney handheld toys, existing machines uncapable of this width most likely are incapable of an experience anywhere near to the one I intend regardless. They are valued as highly as are all those I design for, but alas, there is nothing more I could do for them.

Another major factor in my fixed width fixation for the past several years, I don't have a widescreen. I don't get to appreciate the aesthetic of liquid layouts too often.

So why now? I would rather ask, why not? I can do it after all. It's good to freshen up, it's only been a few years. And besides, I did set a minimum width, it's not like I've made a mobile layout or anything. XD

read more

New Blogger Powered Design Showcase!

GlitterBurned New Blogger Powered Design ShowcaseI have just launched GlitterBurned, a gallery showcasing Blogger powered designs. All of my visitors and fellow bloggers' are cordially invited to browse the gallery, and of course, to submit their Blogger powered blogs to the gallery if they would like.

The blog is still in it's infancy, but I decided to go ahead with the launch in hopes that I can better craft it to suit the needs of visitors as well as contributors.



GlitterBurned Blogger Design Showcase

Above all, I hope the gallery will serve as a resource for inspiration, with a growing collection of Blogger powered gems.

read more

Custom Blogger Fonts With Cufon

Custom Blogger Fonts With CufónI have been asked many times how I use my own font LT Oksana, as a custom font throughout this blog as I do. The answer is simple, with Cufón of course! And I am going to share with fellow user's of the Blogger platform just how to use Cufón in your Blogger blog!

Before We Begin...

First things first, for this to work, you will need the following:
  1. A Blogger Blog
  2. A font file that permits Web Embedding. This is very important. Many fonts require the purchase of an additional license if they do permit web embedding. All of my fonts do for instance, for the most part at least. So be sure that you are allowed
  3. A place to host javaScript files. Some that I have heard of are DropBox, Google Code, Fileden, and Ripway

Grab the Cufon Script

If all of those things have been aquired, head on over to the Cufón website, and click the "Download" button (circled in pink in the screen capture image shown below) to get a copy of the main Cufón javaScript you will need. Saving the file depends on your browser, but just be sure it saves with a ".js" extension.
Download Cufon

Completing the Generator Form

Directing our attention back to the Cufón website, begin the form by clicking on the browse button under the Heading that reads, "Select the font you'd like to use," to do just that. (Screen capture shown below)
Select the font you

Make sure the checkbox regarding permission to web embed is checked. (As shown in screen capture below)
Permission
Proceeding down the form are the options pertaining to the glyphs or characters to be included in your custom font. "Basic Latin" is checked, and you might also want to check the box just below that as well, "Latin-1 Supplement" which should cover some commonly used accent characters. (Depicted in screen capture below)
Select glyphs

A section labled, "Security" comes after this on the form. If using a custom domain, it is a good idea to enter your domain in the text box provided, this limits your custom fonts usage to that domain. Otherwise leave this textarea blank/empty. (Shown in screen capture below)
Domain Security
Options for the Performance and Size of the custom font will be next. I recommend using the default input for font scaling, which I believe is 360 units per em. I would however, change the "units allowed for path optimization" to "0" and uncheck the box beside it that reads "Allow path optimization," however this is optional and may not suit your needs.(Shown in screen capture below)
Performance and Size

I would also make sure the box next to "Include kerning tables (improves readability but slightly increases file size)" is also checked. It may increase file size, but... if the file is not too large already and the font is well kerned, it might be worth it. It's really a matter of preference or necessity really.
Accept terms

Complete the form by checking the box beside the text reading, "I acknowledge and accept these terms," (above screen capture) and click the "Let's Do This!" button (Shown in screen capture below) to generate your own custom font javaScript file.
Generate Font File

Depending on your browser, you will somehow be prompted to save this file. (Shown in screen capture below)
Save file


Adding the Code

Now that you have downloaded the Cufón javaScript as well as the script for your custom font, you will need to upload them to your javaScript host and get their public URL's.Insert those URL's where indicated in the code shown below:

<script type="text/javascript" src="YOUR_MAIN_CUFON_SCRIPT"></script>
<script type="text/javascript"  src="YOUR_CUSTOM_FONT_SCRIPT"></script>
<script type="text/javascript"> 
    Cufon.replace('h3');
</script>

Highlighted in green in the code above is the h3 tag. It designates that all occurances of text within an h3 tag are to be replaced with Cufón. I chose to use h3 since in the majority of Blogger templates, h3 tags are used for post-titles. In that case, all post titles will display in the custom font. If you would like or feel capable, add or change this section as desired.

Back up your Blogger template by downloading the current template, then paste the code (edited to replace my dummy text with your actual javaScript URL's) into your Blogger HTML's <head> section, just after ]]></b:skin> (Get to your Blogger HTML via the Blogger Dashboard under the "Design" tab and subcategory "Edit HTML")

Save your new template & then take a look at your blog to see your new custom fonts in action! For more advanced styling options, visit GitHub Styling.


read more

Chibi Vector Illustration Showcase

Chibi Vector Illustration ShowcaseWith the goal of becoming a better "vector artist," and just better at digital illustration all around, I have been doing a lot of personal (not for work/client) illustrations. I quite enjoy it, and have tried my hand at a few styles of illustrating that were new to me as well. One of the styles that I am particularly fond of, is creating "chibi" illustrations.

The term "chibi," is derived from Japanese language, and it means small  or little. Within the culture of anime and manga illustration, it specifically refers to the drawing of a character in an exaggerated form, most often small and or in child form, with a large head and large eyes. Illustrations in this style are sometimes referred to as "super-deformed." See  Wikipedia's definition of chibi.

Though I do not consider my own "chibi" illustrations to be anime or manga, I do use the term "chibi" to define them. Most are in the typical ratio of chibis or super deformed chibis, that would be head to body ratio of 3:1, but not all. Simply put, in this showcase, are some of my "illustrations of people and characters with big heads and little bodies" :)

My Fair Lady Illustration Illustration copyright Lauren Thompson
"Audrey Hepburn - My Fair Lady" © Lauren Thompson
First in a series of Audrey Hepburn as Eliza in "My Fair Lady" illustrations that I am going to create, so stay tuned! Mouse drawn in PhotoShop, all vector. No raster, blur, or PhotoShop styling/elements.

Ariel Chibi Illustration copyright Lauren Thompson
"Ariel Chibi" © Lauren Thompson
I like the colors in this, but I received a comment that it does not look very much like the Disney Ariel that we all know and love, and I had to agree. Hence, I have started working on a new Ariel illustration, again, stay tuned... Mouse drawn in PhotoShop, no raster, blur, or PhotoShop styling/elements, all vector (except for the background which I did raster & use a plug-in filter).

Claudia the Vampire Child Illustration copyright Lauren Thompson
"Claudia the Child Vampire" © Lauren Thompson
Claudia from Anne Rice's novel and feature film, "Interview with the Vampire." Her appearance somewhat was inspired by the look of actress Kirsten Dunste, who played the charactr in the film, namely her super tight ringlets. Mouse drawn in PhotoShop, all vector, some brush tool used.

Material Girls Illustration copyright Lauren Thompson
"Material Girls" © Lauren Thompson
What can I say about this? I was simply compelled to create this, my vector rendition of the infamous 2003 VMA appearance of Britney Spears, Madonna, and Christina Aguilera. Mouse drawn in PhotoShop, All vector; no raster, blur, brush or PhotoShop styles. This would be an example of chibi's that are not super deformed or true to definition; they are chibi with exaggerated proportions, but to a lesser degree.

Laila Does Lolita Illustration copyright Lauren Thompson
"Laila Does Lolita" © Lauren Thompson
Laila, the pink and yellow haired chibi girl, is my OC (original character). Here she is in a "Sweet Lolita" styled fashion. Mouse drawn vector in PhotoShop, vector with some brush tool and other elements used.

Laila Likes the Dark Illustration copyright Lauren Thompson
"She Likes The Dark" © Lauren Thompson
Laila my OC again, in a look that she is more comfortable in, "Gothic Lolita." All vector made in PhotoShop, no brush, blur, PhotoShop styles.

I hope you enjoyed viewing these, I sure enjoyed illustrating them! View more of my digital creations on deviantART and flickr. I would love to hear your thoughts on them, so please do leave a comment below. Thanks!

read more

Illustrations, Deviations & Other Inspirations

Illustrations, Deviations & Other Inspirations Though it has been far too long since I have posted last, I do return from the entry lapse bearing gifts. I would like to share some of the fruits of the labors that have kept me from blogging all this time.

I have been hiding out on a few of my other favorite online haunts, namely COLOURLovers.com and deviantART. Cathartic and habit forming, I spend far too much time perhaps, creating palettes and patterns at COLOURLovers. If you are not yet familiar with the site, I highly recommend it. It's good fun. And the palettes come in handy, they really do.

The "fruits,"  I am going to share with you for example, all have benefited from palettes I created on COLOURLovers. The mention of those "fruits," brings me my other aforementioned hideout, deviantART. I have been lurking there quite a bit as of late, in the pursuit of becoming a better "vector" artist, driven to acquire and hone skills in vector illustration.In this post I share some of the artwork I have produced on deviantART whilst I have been absent from blogging.

And I do regret neglecting this blog, I will try not to get so comfy in the shade of deviantART or COLOURLovers that I neglect this blog again.

Without further adieu, I give you the illustrations, deviations and other distractions of Nymfont. For more details on an illustration, the artwork titles below each piece is linked to it's home on deviantART. Enjoy!

Can't Escape Typography and Poetry
Can't Escape

Introducing Laila
Introducing Laila

devious me
devious me

Painting the Roses Red
Painting the Roses Red

Lauren -All Vector TextArt Sig
Lauren -All Vector TextArt Sig

I am entirely self taught in all of my designing, vector illustrating included, so I'd love to hear your thoughts and feedback on my work, feel free to comment. Also, I would love for you to join me on deviantART and COLOURLovers.com if you are a member. Thanks for stopping by, have a super day!

read more

26 Cityscapes in Web Design to Inspire

26 Cityscapes in Web Design to InspireCityscape imagery has been put to prolific use in web design and is nothing new, yet despite the repetition of the concept and it's common applications, I find myself hard-pressed to refer to it as a trend. Because,-- cityscapes' are something entirely human, capable of conveying something relate-able and appropriate in a cornucopia of settings.

What I find about them to be most interesting and intriguing, is the truly universal appeal of the cityscape within web design. Favored by professional designers and non-professionals alike, it is used comparatively within e-commerce sites and personal blogs alike.

The two most common variations of the cityscape in web design, without question are a cityscape along the top header, and similarly along the footer. This common style could fit many definitions of a "trend," but the day to have declared it overdone has long expired. The cityscape in web design now inspires as wells as begs the challenge of it's reinvention yet again.

Here are 26 amazing and diverse examples of spectacular cityscapes' in web design, which I hope might inspire and challenge you.

Alexart
Alexart - Inspiring cityscape in web design example

Andy Sowards
Andy Sowards- Inspiring cityscape in web design example

Banamex
Banamex - Inspiring cityscape in web design example

Discover Garden
Discover Garden - Inspiring cityscape in web design example

Dublín en Español
Dublín en Español - Inspiring cityscape in web design example

George Lazaros
George Lazaros - Inspiring cityscape in web design example

Le Blog de Gruny
Le Blog de Gruny - Inspiring cityscape in web design example

Loworks store
Loworks store - Inspiring cityscape in web design example

Morphix
Morphix - Inspiring cityscape in web design example

Mospromstroy
Mospromstroy - Inspiring cityscape in web design example

NOFRKS.design
NOFRKS.design - Inspiring cityscape in web design example

Orange Label
Orange Label - Inspiring cityscape in web design example

Phizz
Phizz - Inspiring cityscape in web design example

Roberto Avila
Roberto Avila - Inspiring cityscape in web design example

Serial Cut
Serial Cut - Inspiring cityscape in web design example

Sponsor Lee
Sponsor Lee - Inspiring cityscape in web design example

Taxi Aéroport International
Taxi Aéroport International - Inspiring cityscape in web design example

Grow Interactive
Grow Interactive - Inspiring cityscape in web design example

tj mapes
tj mapes - Inspiring cityscape in web design example

Veboolabs
Veboolabs - Inspiring cityscape in web design example

Visit Cascadia
Visit Cascadia - Inspiring cityscape in web design example

bsmalls design
bsmalls design - Inspiring cityscape in web design example

Metin Bilgin
Metin Bilgin - Inspiring cityscape in web design example

Torrence Web Design
Torrence Web Design - Inspiring cityscape in web design example

youlove.us
youlove.us - Inspiring cityscape in web design example

Sawyer Hollenshead
Sawyer Hollenshead - Inspiring cityscape in web design example


The inspiration for creating this showcase came about while I was working on my own cityscape design, based on my hometown of Las Vegas. Below is an example of my first ever cityscape illustration work-in-progress:
Las Vegas cityscape illustration for novelhunting.com

I hope these websites were inspiring to you as they were me! Feel free to share your thoughts, and feel free to share any other sites where cityscape inspiration can be found.

read more
ADVERTISEMENT
nymphont
fg
I'm Lauren, self-proclaimed "dweeb," and "the coolest person I know." Single mom, making fonts & designing stuff in my free time.

What began as doodling Fraktur during class, as an adult became focused creation of typographic art for print and for screen, including this digital type experiment I call "Nymphont."

I do freelance web and graphic design along with type design. The icons below link to social networks and bookmarking sites that I am involved with.

From the fabulous Las Vegas, Lauren "Nymphont"

connect with me
MyFreeCopyright.com Registered and ProtectedDesign, HTML, CSS and graphics by Lauren Thompson, 'Nymphont' © 2009 - 2016. Don't copy or steal my shit. Archive & Table of Contents | Contact | Privacy Policy. Powered by Blogger! Seen on Bloggers.com
^