Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Designing is Fun – a WordPress Poster

Designing is Fun - WordPress Poster

Designing is indeed fun! I’ve read several Photoshop tutorials and downloaded several fonts from Smashingmagazine.com – and I subsequently realised that there’s more that just photo manipulation work that Photoshop can do! It can be an awesome substitute for Adobe Illustrator, although it lacks quite a number of illustration-specific tools, a bit of adaptation can do you lots of magic.

The WordPress Poster above is created using a combination of Photoshop tips and tricks from THREE separate tutorials:

  1. General design (lens flare and glitter) plus the WordPress logoFlare Effect Tutorial by Dan Philibin.
  2. Rising sparksAmazing Photoshop Light Effects by Fabio Sasso.
  3. Horizontal lines in the backgroundLines Tutorial by Giacomo Coppola.

I would want to thank them for sharing their tips and tricks for free and in great detail on their blogs. Thank you designers! The font I’m using in the poster is one of the 40+ Excellent Freefonts For Professional Design published at Smashingmagazine – it is called Lacuna, by Glashaus Design.

In case you’re interested, I’ve also included a sample .tif file which is exactly the one I’ve used to create this poster. It’s 600*600, and is NOT SUITABLE FOR PRINT because I think I’ve set the dpi way too low.

download: Wordpress Poster - SampleVersion 1.0 \ File size: 2.49 MB \ 1314 downloads

teddY-risatioN™ Delta becomes v1.1

After a few days of editing and learning, I’ve made some major modifications to the current WordPress theme, teddY-risatioN™ Delta.

Modification #1 – Footer becomes a little bigger

This is one of the modifications I don’t think will be welcomed by everyone, because it’s making my footer even bulkier! I’ve decided to move the random display of Flickr photos to the footer, so as to prevent distraction from the main content. The number of tweets is also increased from the original five to the current seven, so as to prevent the footer from looking lopsided.

Modification #2 – Cleaner comment form

The perfectionist mindset in me has been frequently irked by the rather cluttered comment form – there is a whole bunch of comment notes and instructions between the input fields and the comment textarea. Having in mind that I’ve already installed Scriptaculous for the collapsible sidebar effect, I’ve decided to incorporate this effect to create the collapsible comment notes.

Simply click on the Show/Hide Comment Notes to reveal the instructions. It is set to hidden by default, so the comment form will be kept clean, neat and tidy! If you need any help to create such an effect, feel free to ask me, either through commenting or the contact form.

Modification #3 – Auto-copy of comment to clipboard upon submission

From now on, never worry about losing your comments when this blog experiences a server time-out, when your Internet connection suddenly breaks, when you accidentally hit the Back button or when my nasty Spam Karma decides that you’re talking spam instead of the real stuff.

Jeffrey is very nice to share his copy to clipboard script on his blog for free! Installing the javascript is simple – upload the .js file and the .swf file (the .swf file is for a Firefox security fix) onto your server, load the .js file in your header and you’re ready to go! I’ve added a javascript ‘onclick’ event to the comment submit button, so everytime you submit a comment, it is automatically copied to your clipboard. You can try this feature out by pasting ([Ctrl]+[V] in Windows) it in anything (comment textarea, word document, notepad or whatever) and you’ll see your comment again :)

Of course, you can manually copy your comment to clipboard if you’re feeling a little unsafe. There’s a link near the comment form that allows you to do this. Since installing this script is a little complicated, I am more than happy to be able to come to your help if you need any. You can ask for help in the comments section or through the contact form.

Modificaiton #4 – Smooth Scrolling

I got this idea after realising that you can scroll smoothly through in-page links on Brandy’s blog. I did a little Google search and there’s a simple and short javascript called Smooth Scroll that once loaded in your header, allows a smooth transition between different locations on the same page. You can try this effect out by clicking the Tagcloud link at the header navigation.

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

24 responses to “Designing is Fun – a WordPress Poster” » Leave a response

  1. Wancing

    AHAH! this is so FUN!
    definitely gonna try it right after exams!
    thanks for the source!
    :lol:

  2. MattResponse

    Kudos on your hard work – the over all design is quite nice. On a side note from the design, I actually found myself reading through an entire “I’ve update the theme, here are the specs” Post – which usually are quite boring – without once checking to see how long I’ve been reading it.

    Not only was it informative to me as a developer and fellow blogger, but it also solved the question of just what that scrolling technique was (I’ve seen it plenty of other places but never quite looked it up.)

    Thanks!

    Check out Matt’s last blog post: End of the World List: Top 10 Songs

  3. IvyResponse

    Nice changes! Gotta say my favorite change would be the auto-copy to clipboard. I hope people see it as a good thing though. Some people tend to surf many sites and blog at the same time, and their clipboards might actually hold some important information that they don’t want overwritten. So, that might potentially cause some conflict too.

    As for smooth scrolling, it’s always very pleasant to the eye. Just that on Firefox 3.0, smooth scrolling has become automatic for all sites, so I’m gonna save me a couple lines of code. :)

    The wordpress poster is amazing! I love the light effect!

    Check out Ivy’s last blog post: A Day in Photos

  4. hp84Response

    That’s a lovely design or wordpress, teddY. It reminds me of one of the RPG game that I played few years ago, can’t recall the name :(

    If wordpress were to organize any design competition, be sure to submit yours. I’ll definitely vote for your masterpiece.

    Check out hp84′s last blog post: Chili’s Grill & Bar

  5. DestinyResponse

    Beautifully done!! It’s not very often that I see something as special and lovely as this. It reminds me of magic… something with magic anyways.

    I love the smoothscroll feature! I had it on my site for a bit… and now I think some coding is messed, but I got it fixed. I definitely love the little minors changes that you’ve done.

    Check out Destiny’s last blog post: It Feels the Same

  6. qureyoonResponse

    heh… as far as the smooth scrolling, i suggest you learn MooTools ;)

    it’s far smaller in size than script.aculo.us :D

    i had lotsa javascripts for you on my del.icio.us bookmark ;) have a look if you want :P the nick is qureyoon as well :D

    with all those school schedule, i always wonder how you still manage to do all of this :D

    Check out qureyoon’s last blog post: ASCII Art Have LEVELED UP !!

  7. teddYResponse

    @Wancing:
    Thank you! I hope you have fun designing a poster as well!

    @Matt:
    Thanks! It’s not actually much hard word (laughs) because I actually referred to the steps in each tutorial during the production. I just need to tweak some options to suit my personal preferences as well as to accomodate the effects of other tutorials.

    Sorry to bore you with the layout modification stuff! I just feel the need to share some of my insights, just in case anyone needs my help or have any queries of my design. I’m more than happy to help, as long as it’s within my capacity and abilities :)

    @Ivy:
    I got this idea after reading up a little about clipboards on Google. Anyway you’ve got a point there – people might have something really important copied to their clipboards and the auto-copy function will erase the previously copied data. I’m trying to find a compromise where you’ll only have your comments auto-copied when you tick a checkbox or something. That needs a little reading up on javascript though – I’ve been so out of touch with it!

    Oh and one more point – the auto-copy function doesn’t work when you have disable javascript on your browser. Luckily it doesn’t affects the performance of the comment form!

    I never realised that Firefox 3 beta has smooth scrolling! That’s interesting. Latest web browsers should have smooth-scrolling packaged with them.

    @hp84:
    Oh there is an RPG game whose logo resembles the one in my poster? Interesting! I’ve never been a big fan of RPG, so forgive me for my lack of knowledge in it. I couldn’t really sumbit my poster for the competition, if there’s any, because the overall design is actually not my own creation :razz: that’ll be copyright infringement since submitting artworks for competitions will mean that you declare that those are yours.

    Thanks for your support, anyway! I really appreciate it.

    @Destiny:
    Thanks! The flying sparks effect is also used by one of the tutorial’s creator in his works. I find it really fascinating that you can actually create such effects in Photoshop, which is primarily for photo manipulation.

    I’ve actually tried a fancier version of a smooth scrolling script, but it didn’t work out for me for some reason. So I’ve chosen to use the simpler one. Nonetheless, it’s interesting that you no longer ‘skip’ up and down the page – you give your readers a chance to have a brief view of the content between the link and the linked content.

    @qureyoon:
    Actually the smooth scrolling is not from Scriptaculous but from a separate .js file, which is approximately 4kb in size I think. I’ve never knew that Mootools come along with smooth scrolling script! That’s interesting, I shall check it out.

    Thanks for telling me about the del.icio.us bookmark thing! I think I’ll be poking around with your bookmarks, heh. Oh and I’m currently still on vacation! University only starts in August.

  8. AisyahResponse

    oh, I love the light effect a lot! it’s genius, teddy!

    oh, teddy. I’m so jealous. you are good at sorting this whole moo (this javascript thing). I can’t get the smilies to work with the drop down moo you are using. and now, I just love the idea of copying the comment to clipboard. it’s brilliant. I think I’m going to give it a try, when I have the time because I’m sure that javascript hates me and it just wont work if I’m the one who install it. LOL.

    can you please tell me what ajax comment plugin you are using, as well as for the twitter? because the snippet twitter gave is not a valid XHTML. *sigh*

    Check out Aisyah’s last blog post: Aisyah’s First Time Experiences

    1. AisyahResponse

      oh, Teddy, please. stop. I can’t handle too much kindness. *faints*

      hahaha teddy. LOL. I think I’m the one who’s being stupid. I don’t even know if javascript and moo is two different things! truth to be told, I know absolutely NOTHING about javacript. HAHAHA!. T_T

      and… thanks for letting me know about the wordpress plugins. I didn’t know that the thread comment has it. LOL. thanks so much. and the twiter plugin, too. thank you! xD i’m going to work on them this weekend. and if I have problems, I’ll definitely get to you. thanks for the offer, teddy. :mrgreen: *hugs* *hugs*

      (phewwit! Teddy got a hug from Aisyah! ROFL) *jk*

      Check out Aisyah’s last blog post: Aisyah’s First Time Experiences

    2. teddYResponse

      Lol you’re confusing me! You’re the one who’s good, not me – I’m desperately trying to catch up, haha! Anyway don’t call yourself stupid because of that – at least you know what Moo is! I’ve known some friends who’re good at javascript but have no idea what a javascript framework/library is (like Script.aculo.us, MooTools and Prototype). I know javascript a little because I’ve studied it before – so don’t call yourself stupid! :razz:

      Me too! I only knew about it when I was reading the Chinese description (no offence, but I find the translated English readme inaccurate and can be very misleading). Good luck on your work! I’ll be there to help if you need any, no worries. I’ll just send you the .php as well as the relevant CSS styling for referrence if you need.

      Thanks for the hug! Aww. I shall return the favour! *hug hug*

      p/s: I’m honoured to receive a virtual hug from you!

  9. razifmustaphaResponse

    yeah, i love your design, and i think i’m start addicted to this blog. Hoho. Must seen everyday! :razz:

    Check out razifmustapha’s last blog post: UTeM BITD Grand Dinner

  10. unerResponse

    oh gosh dude.. the artwork you made fo wordpress is just awesome! Aishah true that I am also jealous! I hope on day I will have a chance to work with you on something cool over the internet!

    Check out uner’s last blog post: some updates for Malaysiana!

  11. teddYResponse

    @razifmustapha:
    Wow I’m flattered, seriously! My entries aren’t very particularly interesting :) haha! It’s better for me to forewarn you before you get bored of my blog. Thanks anyway!

    @uner:
    Thank you! Actually it’s nothing much on my part to create the poster, since even the WordPress logo isn’t mine and the effects are all borrowed from tutorials instead of my personal input! I was just playing around with the tutorials, nothing much. I believe you can do it as well, heh. I’m looking forward to a day when we can work together for fun, or for real, no matter what it is!

    1. razifmustaphaResponse

      i’m not gettin bored with graphic/photography/art…… bla…bla….bla…… and i found lotta good stuff in ur blog. keep it up! haha i will tellin u when i start to feel bored with ur blog. :lol:

      Check out razifmustapha’s last blog post: Industry-Based Certification Program

  12. IdResponse

    The poster that you made looks amazing! :shock: It’s so.. futuristic! Or it looks like it’s advertising the advent of the future of Web 2.0. Or something. Yeah, clearly I have been exposed to too much sci-fi lately. =P

    I have noted the light effects that you implemented in the poster, because it’s something that I might consider in a future re-design.

    Like Ivy, my favourite part of the blog improvements is the automatic copying to the clipboard. It’s really useful because I have a tendency to lose comments at times. I used to automatically copy and paste my comments in Notepad just in case, but this made it all easier! =)

    Check out Id’s last blog post: Late Night Conversations.

  13. QResponse

    Hey! excellent site you have here pal :mrgreen: owe some of my photoshopping skills to you ;)

    Check out Q’s last blog post: The Kindle Gets Launched!

  14. giackopResponse

    Hey teddy thanx for listing my simple tutorial.. :wink:

    cool blog btw

    Check out giackop’s last blog post: Mac Style Menu For Pc

  15. PerryResponse

    I’m just getting into photoshopping and your tutorials and tips have been a great help. Now if I can only improve my joggler blog design. Got any tips?

    Check out Perry’s last blog post: Notes From Around the Joggling World

  16. DeanResponse

    This is brilliant.
    An chance we could have the PSD for it?

  17. 14 Tutoriales para crear posters realmente útilesResponse

    [...] Arriba un ejemplo:  WordPress Poster [...]

  18. Mark Searle | UnicoraResponse

    Designing is the best part of being a web developer. The only problem in this industry is the large amount of WordPress templates being passed off as bespoke websites.

  19. kgiFozztzb

    Wholesale Cheap 1:1 replica louis vuitton Handbags / Bags / Purses from china Online Outlet for Sale
    http://glennvytf2.webs.com/ wxdfsp

    Wholesale Cheap 1:1 replica louis vuitton Handbags / Bags / Purses from china Online Outlet for Sale
    lsgatt

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching X Factor - Sorry Seems to be the Hardest Word by Leona Lewis. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence