Sitegrinder Design Archives

Designing for Web 2.0

Even though the World Wide Web hasn’t gone through much significant change (for the most part it’s still the same, actually), we are now in a virtual era called Web 2.0, in which the Internet is not merely a window to the world, but a platform in the technical and figurative sense—new uses for it are currently being researched for both developers and end-users, in aspects of business, technology, education and societal purposes.

Of course, with the arrival of this second generation, it’s not just the form or the substance that is undergoing change—its exterior should keep up with it too. Designers now are not just confined to perform the duties of mere visual artists, but they must be their own programmers or data encoders as well. Presently, there are these so-called guidelines that one must observe in order to keep up with the growing and expanding Web 2.0 style.

To make your layout design to HTML file transition easier, it might delight you to know that a plug-in made for Photoshop, SiteGrinder, is available to address those kinds of issues. That aside, here is a small compilation of the styles and elements incorporated in a design for it to be qualified as Web 2.0:

Simple and focused. The lesser the elements, the clearer the divisions, the fewer the columns, the more uncluttered it looks, and definitely better. It will look clean, organized, and professional. Minimalism is the way to go from now on. Also, if you using multiply columns or frame, try to create focus on the most integral part by harmonizing the color scheme, images, fonts and whole flow of the layout.

Bright and bold. Uses of bright, highly saturated colors are in vogue again. Nothing says “fresh and high energy” like warm hues in blood-pumping tones. Rich, dark colors may work too, just make sure they vary in tones and are intense. Otherwise, pale, dull colors will just disinterest the viewer, except perhaps for a few select websites. Remember that good contrast is the key; now is the time to take advantage of different color schemes such as complementary, triad, split-complementary, etc. Study your elementary color wheel, or better yet, try out Adobe’s nifty color-matching program called “Kuler”.

Defined logos, icons and clean, sleek graphics. Take a look at today’s popular website and one thing you’ll notice is that few use the fade effect so used and abused in the days past. A clean-edge logo looks more solid, and will generally look the same even if you have it put up or printed in other mediums. One that utilizes a fade-effect will have to compromise somewhere. As always, keep in mind that your logo should be able to represent you company well, first and foremost.

Critical use of reflections and gradients. When used sparingly, and in the right places, reflections and gradients maximize the sleek and finished look of your site. Be careful in overusing them, as the effect desired might just backfire.

Creative addition of Flash. Whether it be for an animated header, or navigation bar effects, or whatever you have in mind, tuck little pieces of small but functional flash effects, to create a dynamic feel throughout your site. A plug-in that will be useful for this is PSD2FLA, which lets you open and edit .fla files in Photoshop.

Now that you know the look of Web 2.0, feel free to design away!

The more you know about a certain item and how to use it properly, the more it unfolds its true value right before your very eyes. The same applies for the internet: the more you know how to use it, the more you’ll be able to utilize its benefits for your daily life. Because of this, the internet has indeed become a valuable source of information, entertainment, and education, among many others.

But not all of us have been already introduced to this wonderful new innovation. Some were fortunate enough to learn about the internet at an early age, and thus get used to it, but how about the unluckier ones? Those who were already matured when the internet was created probably have a hard time learning what seemed to them as a new and complicated concept. Also, there are people that, although born at a time when the internet was flourishing, did not have any means of access at all, being sunk low enough in poverty not to be able to afford computer rental in a shop, much less their own computer unit with an internet connection. But then, with a twist of fate, after an indefinite period of time, they have finally become financially stable enough to be able to gain access to the internet. But then the questions arise: Where will they start? How will they act? What will they do? A multitude of questions can arise from a person that has not yet encountered the word “netiquette” or has not yet found out its meaning, when suddenly confronted with the prospect of using the internet.

Of course there is also an option that they would just shun away the hassles, along with the benefits, of internet, and forget about it altogether. But imagine if they had an internet-literate friend; the friend would explain the many uses of internet, and even though the person doesn’t agree with, or understand his friend’s argument, he would still give the internet a chance, just to show his friend that he simply cannot cope with the internet. This then, eliminates this option altogether, given that they do have friends of that sort, and it’s not that hard to find friends like those in today’s times so there’s a good chance that a majority of them do have friends like those.

So, where does one start? The basics, of course. Once you get a closer look at your web browser, you can already decide on what to tackle first. You may try to get the hang of the internet by first identifying the parts of your home page— that’s the first page that your browser loads upon opening. Being home pages, they are most likely user-friendly and will guide you through your net experience.

But that’s not all. After browsing through other people’s websites, why not make one yourself? It may be hard at first, but with help of applications like MS FrontPage, Adobe Photoshop, and the like, you can start designing your own websites, with your content in them. If you aren’t that proficient in net language, you can always learn, or gain help from plug-ins of programs created just for that purpose. Like PSD2FLA for Photoshop, which can help you in your flash works. Another plug-in for Photoshop is SiteGrinder, which can help you design web pages straight from Photoshop.

And who knows what more you can do? This is just the beginning.

New Tools for Photoshop Enthusiasts

Adobe Photoshop is fast becoming a household name. What used to be a name familiar only to professional photographers, designers, graphic artists, advertisers, illustrators and web developers have branched out from that select niche into the whole world. Nowadays, more and more people are using and becoming familiar with the program—from students, to amateur digital artists, even people who are not really into photo-editing or photo-manipulation, only wanting to try the product out casually. It’s been used as a reference, in some cases incorporated into jokes, and mentioned in some advertisements that it can be safely said that Photoshop is a cultural icon of modern times.

An abrupt expansion of users means more updates and upgrades in the race to fashion Photoshop to perfection. Before, only Adobe was working on making Photoshop the best photo editing program; presently, however, new tools and options have enabled the end-users themselves to create filters, plug-ins, brushes, actions, almost any type of resource material for other Photoshop users. Photoshop customers are sustaining themselves and others, and this, in turn, have contributed to the rapid growth and development of the market, the product, the users as well as the knowledge, techniques and avenues of opportunities associated with the program.

Now on its CS4 version, Photoshop has come a very long way. Even though its core functions remain essentially the same, how, when, where, and for what people use them have rapidly evolved from solely being used to creating print ads and digital graphics, into a wide range of capability to create or edit vexels (which looks a lot like a vector), movies (with extended versions), flash and animation (with the PSD2FLA plug-in, etc.), book illustrations, magazine layouts (hand-in-hand with InDesign), website layouts (with SiteGrinder, and other programs).

With the above-mentioned added capabilities, that means that Photoshop has been tuned up to cater to purposes other than photo-manipulation. Now it can be a powerful web designing & web development tool, an animation program, and an even better canvas for them digital painters. People rely on Photoshop to make the web portals project the right image, thereby affection their own online business stores.

That is one of the greatest breakthroughs of Photoshop in the mainstream aspect—it being a helpful and at times indispensable tool to the online entrepreneur in the virtual Internet. With the current global crisis ravaging the entire world, more and more people are turning to self-employment as a means of keeping their respective boats afloat. One of the popular options is to start an online business store. With the Internet having a wide reach, and space, bandwidth and .com names affordable to most people, it’s easy to see why a lot of people are taking advantage of the current situation.

Now we can say that Photoshop is the Multimedia Artist’s best friend. It’s not just for 2D images, but for 3D, and it can even create animations. The only thing lacking, perhaps, is the ability to incorporate sound or music. Still, it is a powerful tool, even without that feature. With Photoshop as your tool, your imagination, literally, is the limit.

Must-have Skills in 21st Century

In this modern age, you can’t be caught dead not using a computer. With these technological wonders of the 21st century slowly and surely taking over every aspect of our lives—government systems used to be made up of gazillion filing cabinets are now being replaced by more efficient machines; different working industries are incorporating computers to cut-back on some tasks and be more efficient; even some schools are altogether getting rid of pens, papers, books, and are opting for digital notebooks, libraries and other teaching aids—we humans have to be geared up for this inevitable invasion.

Time will come (or perhaps we are already living it) that these mean machines will be at the bottom of Maslow’s infamous pyramid—that is, computers will soon be an indispensable necessity in our lives. As such, afflicted people should start getting rid of their technophobia, and embrace the new computer age, if they wish to survive in the long run. For the younger generation, this isn’t a problem as they take to these new technologies as easily as they take to breathing. Teens easily catch up to trends and anything new that pops up suddenly. Yuppies and the general working class have no problem either, as computers have become an integral part of their working environment. For the older lot or those whose career doesn’t involve the use of these evolved abacuses, however, it’s a different story.

So if you’re one of the unequipped to face the rapidly modernizing world, here’s a list of the following skills you should learn now, in order not to be left behind and get classified as ‘ancient’.

Familiarize yourself with Microsoft platform, including its programs. Basic things like typing, copy & pasting, and other simple commands (keyboard and otherwise) are a must. Viewing pictures, watching movies, and basic troubleshooting should also be in your list.

Use the Internet. Being able to utilize the World Wide Web without fear will emancipate you in more ways than one. Chat, join forums, social networking sites, and blog away.

Get to know the hardware as well, so that you can be your own technician when the PC breaks down and needs some TLC.

Take it a step further and learn HTML, CSS and PHP. You never know when it might come in handy. They’re pretty basic languages so learning them will be a cinch. You might also try using Adobe Photoshop, and when you do take the web designing/developing business seriously, download the SiteGrinder plug-in for Photoshop as well.

For those who aspire to be Digital artists, learning how to Vector using Illustrator would definitely add to your knowledge. Study InDesign as well, and read up on Flash if you’ve got the time. Coincidentally, if you’re using Photoshop and Flash, it’s a good idea to get the PSD2FLA plug-in—it’ll make your life easier.

Once you’ve mastered the above suggested skills, well, congratulations. Now, that one achievement you’ve accomplished. You can choose to this further, maybe learn new computer languages, and even create a program by yourself. The possibilities, as proven before, are definitely endless.

Kick-start Your Online Business

With current global crisis seemingly hanging over everyone’s heads like the proverbial Damocles’ Sword, businesses are cutting corners and the ones who are affected most are their employees. As unemployment rate rockets and the prices continue to soar high, relying on some Chinese philosophy might help ease the everyday burden.

It will only require one employee (you), your strengths, your persistence and a lot of hard work and brainstorming for brilliant ideas. This is the public secret that all the rich and famous share: start your own business.

Nothing’s better than being your own boss, working for yourself and keeping all the profits. But with the present situation today, it’s not exactly a walk in the park to shell out a significant amount of cash just to get your enterprise rolling. The general rule is that the amount of capital you spend on start-up is usually proportional to the profits you’ll get back in return. So what do you do when the cash you have on hand for an investment can only probably afford you a well-equipped lemonade stand?

Traditionally, due to lack of other options, you’d have to settle for a kiddie lemonade stand, unless you’re blessed with extreme wit and creativity. Lucky for us, we live in the 21st century, which is plagued by technical, medical, modern advances in terms of almost everything on a daily basis. What better avenue to turn to than the World Wide Web?

The World Wide Web is a smorgasbord of opportunities, and a lot of people have taken advantage of that. The Internet, being cheap (to access & to utilize), wider and far-reaching than the farthest space probes from Earth, interactive, and possibly home for anything—is the perfect place to carve a corner for your business, especially if this is your first time venturing onto the real of self-employment.

The first step would be to assess yourself. This would include your skills, your strengths and weaknesses, your interests. Once you’ve determined which product or service you’re going to market online, it’s time to make a plan. Flesh out your ideas, make general steps of what you are planning to execute. Under each step, write out the details: the nitty-gritty, specifics like time, date, place, person, or other extra information that might help. Once you’ve mapped all of this out, it’s time to start building your website.

If you’re a newbie to all the web design jazz, it’s better to stick to free programs and service, however be guided that you or your site would be blasted with advertisements left and right. If you’re ready to take things a notch higher, get yourself a website builder like SiteGrinder, design your site in Photoshop and let the whole virtual world know that you’re in the house.

If you really want to make an impressive and professional impact, jazz your website up with interactive, multimedia content—get yourself a PSD2FLA plug-in and you’re well on your way to becoming a Flash expert. Dare to open your virtual business today with a very loud and unforgettable bang!

Making a Template to Save Time

If you’re maintaining, or even just assigned to manage, a website with a large network, and receiving heavy traffic, it would be wise and practical to create a template for your site. While a strong and long-running layout may create a sense of stability and prolonged viability of the said website, people do need change every now and then.

However, since it is receiving heavy traffic, you can’t just pull the site down just for a layout revamp. Causing a temporary disruption would inconvenience a lot of people, and may reflect much more damage to your site traffic than it would seem.

What could be a solution for this problem? One way to merge design without compromising the site operation would be to create a template. This template will be the one that you will use through the whole site, and for a long period of time.

What the template can do for you is to create a long-term image that you want to establish as perception of the people towards the site. However, you have to leave room for it to be editable in some way, in a small way, in which cause minimal interference to the website operation.

For example, Yahoo! And Google are two kinds of sites with a simple website template, but they can still customize their headers/banner to fit current seasons, holidays or themes. This could work for your website as well.

Headers are not the only thing you could customize; themes can be presented through the use of relevant colors, and maybe a bit of background change. Little, subtle alterations sometimes make the most impact.

Other cases, however, might call for more dynamic and complex add-ons. You could arrange the layout in a way that would provide ample space maybe for a small flash movie, or maybe add a flash introduction at the welcome page of website (of course, don’t omit the “skip” button for the convenience of regular visitors). This could be arranged by making use of a plug-in called SiteGrinder, which easily converts layouts or templates you’ve designed in Photoshop into HTML and CSS files. Add to this, another plug-in called PSD2FLA, which allows Flash files to be opened and edited in Photoshop. With these two tools, you won’t have a problem designing, editing and revamping an interactive template.

You could use one, two, or a combination of the tips above to make a versatile website template that would be sure to stand the test of time. Remember to also look for guidance and inspiration from other, established web portals. Never pass up the opportunity to look through portfolios or online galleries of professional artists and graphic designers; you can pick up techniques and styles you normally wouldn’t see anywhere else.

As always, keen observation of the current styles and trends, and self-studying the designs that capture your attention would be the best way to go. Learn, and apply it to every design and template that you’ll make. When you’ve become well-versed in the language of design, and with the help of the tools above, you probably wouldn’t even need a template anymore.

Making Your Website Interactive

In this era of Web 2.0, it’s inexcusable for seasoned web-owners to simply have a site consisting of text and images. Unless you want your website to wither away in some forgotten, cobweb-covered corner of the Internet, it needs to be interactive and have multimedia content.

Why do you need to be interactive? The answer is simple. With the capability of almost anyone to create and upload websites, images, contents, and many types of other information, the World Wide Web has become jam-packed with too much data—too much that they’re being produced much faster than people can view and take in this sudden influx of data.

Almost every popular website nowadays includes content that enables its users to interact with the owner, with each other, and form a community. That is the genius behind social-networking sites, and why so many people flock to each and every one of them no matter how many similar sites with similar themes and benefits crop up almost on a daily basis.

But not all websites need to rely so much on people making online relationships in their portals. It’s unnecessary in most cases, especially if your website was not made for that purpose. However, it doesn’t mean that user interaction would be minimized. There are hundreds of other ways on how your web visitors will enjoy and keep coming back to your website.

If you own a website about your company, one way to make it interactive is to present your products or services in a way that people can explore more about them. Create games, online movies, animations for your product. Create an interesting interface for your portfolio or gallery. Make sure to address to each of the five senses to be able to present an all-around experience, and maximize the visitor’s satisfaction. Apply video, music and sound—if the images you portray are convincing enough, a virtual sense of taste and feel will follow. For this, you would definitely need to make use of Flash. Invest in Adobe Flash and Adobe Photoshop, and maybe get a PSD2FLA plug-in as well, they’re useful tools not only for web designing purposes but also for creating various multimedia content.

Speaking of tools, SiteGrinder is another which will absolutely make your life easier, especially if you’re hard-pressed for time and have a million things to create, upload, check and tweak; at least the layout designing process will be a breeze. SiteGrinder converts into coded HTML and CSS the web layout you designed in Photoshop, saving you the time and effort that you would normally expend should you decide to encode everything manually.

Not only corporate or commercial sites can benefit from being interactive by using the tools above, even personal, non-profit and for-fun sites can make use of them too, and maybe help increase traffic and such. If anything, adding multimedia content will positively give your website an edge, and will make every visitor feel that each minute they spend on your site is well-worth it.

How to Create Your Own Portfolio

So you’re a recently-graduated artist or writer, and now you need a job. But that diploma in your hand isn’t enough; sure, it’s a physical and legal proof that you’ve been sufficiently taught and geared-up for the field you’ve chosen and for the real working world. But what your diploma fails to showcase are the actual skills and capabilities you possess which differentiate you from the other, new grads in your industry who carry more-or-less the same diploma that you have now.

Or perhaps you’re a veteran art director or journalist, but due to circumstances, you suddenly find yourself out of employment. It’s not easy, but at least the years of experience you’ve got tucked under your belt makes the whole job-hunting experience less hard. But aside from experience, you need something else—some proof that it’s the company’s loss if they don’t hire you.

I’m pretty sure you’ve guessed it: yes, a portfolio. It is, sometimes, a prerequisite prior to graduation. Or perhaps an experienced friend in the same career path as you are gave you that friendly tip early on. I’m guessing, however, that the type of portfolio you currently process is the traditional type which you lug around, bring with you during job interviews, and create copies to send to potential employers. A portfolio is a given, being a visual or literary artist, you simply need one. It is a necessity. And you certainly can expand the number of people who will get to know your strengths and what you are capable of doing through your portfolio.

The most efficient medium to use, in terms of costs, time and effort would of course be the World Wide Web. What with its fast & easy accessibility, coverage and infinite number of possibilities—use the Internet to your advantage. There are actually a number of useful sites that would help you kick-start your online gallery: DeviantArt and CarbonMade are just two of them. They’re free, user-friendly and even people who are not inclined towards art visit those sites occasionally. For those starting to carve out a niche in the online world, these places would be the best ones to start.

However as you gain more experience and skills, free sites are not enough. The next step is to create your own—that would definitely give you a feel of seriousness and professionalism, sort of saying “I really know what I’m doing” in a confident manner. Aside from that, you could also add web designing to your already growing list of capabilities, with your own website as testament to what you can do.

Now for the design-savvy, but not at all into coding technical web language, invest in at least Photoshop and Dreamweaver, and add to that the useful plug-in called SiteGrinder. It’ll save you precious time of manual coding; time which you could use to further hone your personal art. What it does is to take the layout you’ve made in Photoshop, and convert it to HTML and CSS, making your life easier.

If you’ve got your whole site up, and you feel like you’ve mastered the art of web designing, take things a notch higher and incorporate multimedia content t your site. Videos, music, an interactive interface, special effects and animations will definitely make your portfolio more substantial. Get yourself Dreamweaver, and PSD2FLA plug-in, which will make your Flash files openable and editable in Photoshop. You need to learn only the basics of Flash, and you can pretty much manipulate it in Photoshop afterwards.

Even if you feel that you have no need for an online portfolio, creating and keeping one would be a wise decision. At least, in that way, you would have a digital back-up of all your works, and you can view your progress throughout the years much easier rather than pulling up old canvasses, boards, books, papers, etc. just to compare them with your recent works.

 Page 1 of 2  1  2 »