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:
- General design (lens flare and glitter) plus the WordPress logo – Flare Effect Tutorial by Dan Philibin.
- Rising sparks – Amazing Photoshop Light Effects by Fabio Sasso.
- Horizontal lines in the background – Lines 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 \ 1235 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.
AHAH! this is so FUN!
definitely gonna try it right after exams!
thanks for the source!
:lol:
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
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
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
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
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 !!
@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.
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
Thank you Aisyah! It’s really something to get praises from a talented designer like you. Do you know that I’m as equally jealous of your awesome XHTML, CSS and Photoshop skills? I wish my layouts are a quarter as visually-appealing as yours. I seriously love how you’ve implemented unique brushes, CSS hovers and great colour combinations in your WordPress layouts – I rarely see people combining so many things into one.
Forgive me for being stupid, but I’m wondering why are you referring javascript as moo – is it because there’s MooTools and Moo.fx (both are excellent, user-friendly and light-weight Javascript libraries). or is it just an affectionate nick for Javascript? Heh just curious. The clickable smilies couldn’t be hidden in the comment form because the plugin actually adds it in using javascript and after the page is loaded – leaving me no idea for a workaround. Anyway it’s good that the smilies aren’t hidden, so you can still use it even after you’ve tucked the comment notes away.
The clipboard thing needs a bit of basic knowledge of Javascript :) so don’t worry too much! If you need help, you can always ask me – I’ll be honoured to be at your service (in fact, everyone’s service!).
The AJAX comment comes as an integral part of the WordPress Thread Comment (I think you’ve installed it on your blog as well), version 1.4.7.2 (the latest one so far). The author has just recently rewrote part of the php script, so I had a hard time recustomising the plugin for my personal use (since updating plugins will not preserve the modifications you’ve hard-coded into the php script). However, AJAX comment is not activated by default and you’ll have to go to Settings > WP Thread Comment to check the box for AJAX comment.
For the Twitter feed, I’m not using the one Twitter is currently providing because of it’s XHTML invalidity. I use Twitter Tools (version 1.0) by Alex King, and did some personal modifications to the php script for styling and etc. Anyway, I can always send you mine if you need any code/css to refer to. The latest version is 1.1b1, but I rolledback because my theme isn’t compatible with it.
Cheers to XHTML valid layouts! :mrgreen:
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
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!
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
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!
@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!
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
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.
Thank you! Actually the more I look at it, the more I’m reminded of a fictional advertisement made to promote one of the Resident Evil film :) because of the word futuristic. After I’ve watched Aeon Flux and several sci-fi films, I’ll get pretty geeky for the next week! It’s kind of true.
Oh for the lighting effect, I will recommend the ones written in Amazing Photoshop Light Effects by Fabio Sasso. His tips are very useful!
Yea the copy to clipboard function is interesting, but I’m working on an option that allows commentators to disable autocopying, just in case they have something important copied to their clipboards. I too, copy my comments before posting because I’m afraid of server timeouts! And sometimes pressing Back will not recover the comment :???: gee!
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!
Hey teddy thanx for listing my simple tutorial.. :wink:
cool blog btw
Check out giackop’s last blog post: Mac Style Menu For Pc
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
This is brilliant.
An chance we could have the PSD for it?
[...] Arriba un ejemplo: WordPress Poster [...]
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.
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