Webdevtuts

Interview with Chris Spooner of Line25 and Blog.Spoongraphics

Marcell — Mon, 08 Mar 2010 22:33:30 +0000

Hello Chris, First and for most I like to thank you for deciding to do the interview with me and am very happy you are going through with this interview.

Can you tell us a little about yourself and what you do?

I’m Chris Spooner, a designer and blogger who runs Blog.SpoonGraphics and Line25. I write random design related articles for inspiration, as well as plenty of tutorials covering Illustrator, Photoshop and website design.

Many people know you run multiple design blogs, how do you manage keep up with all of them?

Unlike many design blogs who publish daily, I only post one main topic per week (along with a quick/small news roundup), so this does help free up time to cover the management of two blogs. However these topics can often take a couple of days each to put together, so running my blogs has become a full-time job. Planning post ideas in advance and scheduling up topics according to my monthly calendar definitely helps my productivity.

When first starting your blog how long did it take for you to actually start getting a good amount of visitors, and did you ever feel the need to give up at anytime while working with your start up blogs?

I never felt like giving up because the main purpose of blogging was to give myself a playground to experiment. Visitors didn’t matter so much because I was enjoying what I was doing. My first blog over at Blog.SpoonGraphics has steadily grown since day one, with a decent level of traffic being present after around 6 months. Line25 on the other hand, has the advantage of being able to capture the interest of an already establishing reader base, so it has really shot up to almost the same subscriber level in just one year.

When did you first take interest in design, and what steps did you take to learn it?

I’ve always been an artistic type person, and followed the Art and Design topics right through school, college and university. I’ve basically kept an eye out for inspiration and experimented through my own passion for the subject. I’m still checking out new design subjects to grow my knowledge and experiment with new techniques after being influenced by the great work of others.

Considering there are hundreds or even thousands of ways to promote your website, what advice would you give to someone trying to promote a website of their
own?

First you need to take the time to produce great content that will entice people to view it, then it’s a case of casually networking and getting to know people in your industry. The more you appear across the net the more you’ll be associated with your work. Publish your work on Facebook, Twitter, Flickr, Behance etc and get to know the other users with a similar passion to yours.

Have you had any regrets in the past dealing with design or running your design blogs, and if so what would you have done differently to get to the point you’re at now?

Everything I’ve done so far seems to have worked out well, so there’s nothing I’d do too differently. Any mistakes have been an opportunity to learn. When I launched Line25, I was armed with the experience I had gained from growing my first blog, so it was great to be able to put all the new ideas into practice.

Many people are wanting to become designers each day and want to start up a blog of their own someday, do you have any advice for new comers who might like to run a design blog?

I always advise not to setup a design blog simply for the exposure or the cash, this way you’ll never succeed because it takes a long time and a lot of work before any results are seen. Instead, blog because you have a passion for the subject and want to learn through experimentation etc.

What do you think you would be doing if you had no interest in design?

That’s always a hard one because I’ve always been creative right from childhood. I don’t really have any passion in my life that’s as strong as the one I have for design, so I’d probably be in an average every day office job!

Thanks Chris for deciding to do this interview. The Webdevtuts community really appreciates it. Thanks for your time!

Create an astonishing soccer desktop wallpaper using photoshop

Marcell — Wed, 03 Mar 2010 05:29:40 +0000

Photoshop is a very hard program to use if you’re unfamiliar with it. I know many people are not photoshop savvy and have trouble creating things in photoshop. In this tutorial we will be creating a very simple but nice look desktop wallpaper.

Before we begin you will need the files below:

Step 1

Create a new document 1280px x 1000px.

Step 2

Now we’re going to create our grass background. Right click on the background layer>>blending options>>Pattern overlay and load or choose the grass pattern that you’ve downloaded.

Now go to Filter>>Render>>lighting effect

Style: Triple Spotlight, Light Type: Spotlight, Intensity: 35, Focus:100 , Gloss:0 , Material:69 , Exposure:65 , Ambience:13 , and Texture Channel:none.

Step 3

Next thing we are going to be doing is creating the actual soccer lines for our feilds. Select the rectangle tool, color:ffffff and create a nice big rectangle across the grass leaving space around the rectangle.

You should now have a rectangle box for the soccer field.

Step 4

Now we’re going to be doing the same steps for the rest of the boxes on the field. Create a another rectangle box, color:#fffff. Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff

Create another rectangle inside of the one we’ve just created color:#ffffff. Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff

Now select the rounded rectangle tool color:#ffffff and create a small circle at the top of our rectangle.

Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff. Then select the eraser tool(square brush) and just drag it down half of the circle leaving the upper half untouched.

Step 5

Group all the layers we’ve just created for our soccer field lines except of the big rectangle. Then right click on the group and duplicate it. After you have duplicated the group go to Edit>>Transform>>flip horizontal.

Step 6

Now lets create our center field marks. Select the rounded rectangle tool color:#fffff, then create a circle in the middle of the field. Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff. Then select the line tool color:#ffffff, and hold Shift+drag to create a perfectly straight line going down the middle of the feild. Change the opacity on the straight line to 10%. You should now have something like the image below.

Step 7

Select the type tool, font: Arial,bold size 200px, smooth. Create a fancy text you would like to use. I used Webdevtuts for the example. Then change the text opacity to 30%.

Right click on the text layer>>blending options>>drop shadow. blend mode:multiply, opacity:100, angle:120, distance:5, spread:65, size:5,

Now select inner shadow. blend mode:multiply, opacity:100, angle:120, distance:0, spread:0, size:35,

Now select Bevel & Emboss. style:inner bevel, technique:smooth, depth:205, direction:up, size:174, soften:16.
angle:120, altitude:30, highlight mode:screen color:#dbdbdb, opacity:75, shadow mode:multiply color:#64781c, opacity:75

Now select pattern overlay. Choose the grass pattern again that we used for our background.

Now select stroke. size:1, position:outside, angle:120, blend mode:normal, opacity:100, color:#000000.

You should now have something like this.

Step 8

Select the elispe tool, color:#fffff and create a circle in the middle of our field. Then change layer filter to exclusion(by default it should say normal) opacity: 70% and fill to 8%.

Step 9

Now lets add our soccer players. Drag or insert the soccer players. Players might be to big at first but just resize them to the appropriate fixture.

Step 10

Duplicate the Webdevtuts text layer then change the text to game time and resize it to 100px. Right click on the text layer>>blending options>>drop shadow. blend mode:multiply, opacity:100, angle:120, distance:5, spread:65, size:5,

Now select gradient overlay. blend mode: normal, gradient: left color#858585, right color, #000000, style:linear, angle:90, scale:100. Then click ok then you’re finish. You
have created your very own soccer theme wallpaper. If you follow this tutorial I would love to see other outcome.

Here is the final image

Things to consider when starting a new freelance business

Marcell — Tue, 23 Feb 2010 21:39:56 +0000

Starting a freelance business may be the most “exciting” thing you may have done or wanted to do. I think there are many people who just think about the good stuff and do not actually plan out what they are wanting to do. In this article I will give you some tips and advice to get your freelance business up and running the right way.


Work full-time/ Part-time
When starting a new freelance business many people think to themselves if they should keep their job or go part-time. Quitting your job or going part-time may seem like a great thing to do but you really have to think it out before you actually make the final decision. If you have a job then I would recommend that you keep your job and save up cash. If you're young or do not have a family to support then I recommend you stay part-time or leave your job.



When I was 16 I got my first job and was very excited about going to work but after a week or two I felt as if my pay checks were too small and decided to let my job go to work on something I knew I would not mind doing. After I quit my job I realize that I had no money to start my new business and keep my hosting going. Long story short, I did not think out my plan and just decided to jump directly into it not realizing the problems I was going to face. Working a part-time jobs gives you the opportunity to save money and work on projects when you're not at your actual job. If you currently have a part-time job continue working it and saving money so that you do not experience the problems I have experience. If you currently have a full-time job then I recommend that you do web work as a side business and do not quit your full-time job until you have a stable income coming in.
Site Layout & Design
Creating a new portfolio is the next important thing to consider when starting a freelance business. I mean this is actually how people are going to see your work and learn a bit or two about yourself. Creating a new portfolio comes with a bunch of brainstorming. I mean you just cant put up a website and expect it to bring in customers. You have to think out your plan and I will do an example plan below.
Portfolio Plan


Theme: Your website theme is like cars, clouds, dirt, room etc



Layout: Your layout is like 1column, 2column, 3column etc



Color Scheme: What color would like for your website to have. 3 colors at the most.



Creativity:  Graphics, or hand drawn elements, Typography etc.



Functions: Contact forms, javascript, ajax etc.

The plan above is the plan you should take when deciding to create a portfolio design. I will explain each one below more specific so you can get the basic understanding for each.

Theme: Your website theme is VERY VERY VERY important because it can sort you out from others and actually make people remember your site. When deciding upon a theme thinks which one bests fits you. For example my Portfolio theme is highway/road. So if you have visited my portfolio you will notice that I have somewhat of everything that a expressway/road might have. I have clouds for the sky and for the logo I have an exit sign to show visitors that they have exited onto cell-designs and for the footer i have grass hills and a road. So you get the hint of how a theme works.

Layout: A website layout is somewhat important. Many people decide to go with a two column layout. When deciding how many columns you would like to have it would be important that you think about what types of widgets of elements you would like to go into the sidebar or third column. 2 column layout, left column for content and right column for sidebar. 3 column layout, left column for content and one right column could be used for sidebar and last column could be used for social media.
Color Scheme: Choosing the right colors for your website is very important because it sets the tone or mood of your website. When deciding upon colors you might like to think about which colors goes with your theme or which colors you think sets the perfect vibe or mood for your customers. I usually pick 3 colors.
Creativity: Getting creative with your website is also a great thing to consider. Some people love to get graphic heavy with their website and some people do not like the whole graphic theme. I think graphics are very important because it shows neatness and shows that you actually took the time to create something elegant.
Functions: Your website functionality is another thing to consider. When a visitor visits your website they are going to want to interact with your web page. Whether you have a crazy navigation or nice scroll functions people will play with it. I know whenever I visit a website I always tend to stay on a website longer if there is something cool I can interact with.
Getting ready for take off
Now that you have your business plan sorted out you are now ready to launch your website. Well not quite, there are still a bit more to cover then you're good to launch your new site. Before you launch the actual site it is important that you have the items listed below created and ready to go.


Business cards
Contract/Agreement forms
Time Management Account(To clock hours/manage $)


I will explain each item listed above more specifically and to why you need each item.
Business Cards: Business cards are very important to have because they market your service when and when you're not around. Many people believe that clients will just come to them but you really have to go find clients and build that relationship with them. Business cards are very efficient because you can post them at your local business, barber etc, and very most important hand them out to a future client.  
Contract/ Agreement Forms: Contract and agreement forms are a MUST! Often times I hear about client's not paying or bailing out in the middle of the project and you get the point. Before any project is started make sure your client has read and signed the contract so there are no misunderstandings in the long run .
Invoice System: An invoice system is very handy especially when it comes to filing taxes, Keeping clients organize or just keeping up with your income. Many newbie freelancers often charge by the hour but do not use any invoice software to keep track of their clients, time, and money. If you know or have a plan to make 4-5 digits with your business then I recommend that you get an  invoice system to keep everything organize. 
If you're considering starting up a freelance business then I recommend you take my tips and advice from this article. I myself did not take each and everyone of the steps above when I first started my freelance business and let me tell you it was twice the work and twice the stress. Good luck with your new freelance business, go get'em tiger!



Create a nice clean blog Layout in photoshop
Marcell — Thu, 18 Feb 2010 05:20:38 +0000
Step 1
Create a new a document Width:960px x Height: 1200px, color:#313131


Step 2
Now were going to give our website a little space. First things first, make sure you have your ruler turned on then add a guide line to 0px and 960px.

Note: To insert a guide line just select the move tool and click on the grid and drag it.


Now press CTRL+ALT+C for windows or CMD+ALT+C for Mac. Now you should see a Canvas size box. This is how we’re going to give our document more room for our website. Select the left arrow and change the width from 960px to 1160px then press ok.


Now repeat the last step but select the right arrow and change the width from 1160px to 1360px then press ok. Now you should have 960px in the middle

of your document.
Note: If your document is white or any other color on either side just select the paint bucket tool and change it to the background color

Step 3
Now were going to create a navigation menu. Select the rounded rectangle tool, 5px radius, color:#1c1b1b and draw a rounded rectangle from 0px to 960px. If you’re

lost just just draw the rectangle from guide line to guide line.


Step 4
Keep the rounded rectangle tool selected just change the color:#515151, and draw another rounded rectangle slightly over the menu background


Step 5
Now create a rounded rectangle box color:#fff. Make sure you leave 15px on both sides of the rectangle.


Step 6
Now create another rounded rectangle for our sidebar. Leave a little space at tht top for out logo. There is 15px space in between elements.


Step 7
Ok so now that the layout is basically there we will start with adding out menu nav links. Select the type tool, Arial, Bold, 14px, sharp, color:#686868. Then

type out the correct menu links. To get the single line text just double click when you have the type tool selected. Then after you have the text entered

create another rounded rectangle color #000 for our rollover.


Step 8
Now were going to make our logo. Select the type tool color:#fff, Arial, Bold, 36px, sharp. Now write out a custom name for your blog.


Now right click on the text layer>>Blending options>>Inner shadow Blendmode:multiply, Opacity:75, Angle:120, Distance0, Choke:0, Size:5.


Then select the color overlay check box and change the color to #3f3f3f. You should now have a letterpress logo effect.


Select the type tool color:#fff, Arial, regular, 10px, sharp. Then write out a sub heading. For the letterpress symbol all that is needed is to duplicate the letterpress text layer and select any symbol from the custom symbol panel. Photoshop will ask you if you would like to rasterize layer and simply click yes then insert your symbol. Your final logo should look exactly like this or similar to the one below


Step 9
Select the rectangle tool color:#313131, then create a rectangle box for our featured slider. Leave 15px on each side and the top.


Now find any image you would like and lets insert it over our slider background leaving 5px around the entire image.

 
Select the rectangle tool color:#313131, and create a rectangle just a bit above our image then change the opacity to 50%.


Now select the type tool color:#ffffff, Arial, Bold, 18px, Sharp then create a generic post heading.


Step 10
Now we’re going to create our blog post. I will only demonstrate 1 blog post because after you have one completed you can duplicate the rest. Select the rectangle tool color:#313131, then create a rectangle box.


Right click on the box layer>>blending options>>gradient overlay. Blendmode:Normal, Opacity:100, Style:Linear, Angel:90, Scale:100.


Now double click on the gradient bar>> Left Color:#e9e9e9, Right Color:#ffffff.


You should have something like the image below.


Now we will add a thumbnail image to our design. You can use any image just make sure you leave 5px around the entire image. Try to make height similar to mine.


Select the type tool color:#313131, Arial, Bold, 14px, Sharp then create a generic post title.


Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic post information heading. Link color:#cc4343.


Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic excerpt(Little information about the post). Link color:#313131(–>Read More<--).


For our final step select the type tool color:#515151, Arial, Regular, 12px, Sharp then create some post tags. Link color:#cc4343.


Step 11
Now that we have our 1 of the posts completed we can now duplicate the other 4. Group all the layers for the post into one folder then right click on the folder and duplicate group. You can then change titles and thumbnails images if you would like. It makes it seem more like a live website preview.


Step 12
Now we will work on the sidebar. Before we begin working on the sidebar make sure you leave 15px on the sides and top of the sidebar. Google search or create 4 images 125px x 125px for our ad spots. Then place the ads into the sidebar.


Step 13
Select the rectangle tool color:#ededed then create a rectangle box for our popular post widget.


Select the type tool color:#515151, Arial, Regular, 20px, Sharp then create a POPULAR POST heading.


Select the type tool color:#606060, Arial, Regular, 20px, Sharp then create some generic post title headings. Make sure they are all cap so that

they look the same as the images below. The highlighted color:#2c2c2c.


Step 14
For our final step we we now create the footer text. Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create your footer text. All

text below in image below was used on one line.


You’re now done! Your final layout should look like the image below(Click to enlarge)





What every developer or designer should know before calling themeselves a designer or developer
Marcell — Mon, 08 Feb 2010 02:56:56 +0000
Over the last 3 years I have considered myself as a web developer. About a year ago I was looking for jobs for web designers/developer and notice many web languages that I was unfamiliar with. So I started to think to myself, am I a web developer or just a designer? In this article I will explain the difference between a web developer and a web designer. After this article you will know whether you’re a designer, developer or both.
Website Designer
Many of you designers out there probably consider yourself as a web designer. A web designer can live up to more than just designing and often work with familiar web languages to create dynamic web pages.
What does it mean to be a Web designer
a person or business that designs and prepares content for the World Wide Web, including text, images, site architecture and multimedia.

Source

Web designers are mainly the ones who design the whole look and aspects of a website. As a web designer your job would be to stay up to date with the latest trends and produce great designs that you or a developer could code. Being a web designer may seem like an easy job or thing to do but if you actually break down the steps it can take quite sometime to produce a homepage with sub pages. So what is a web designer typical schedule?
A Web designer schedule is not exactly how I will list it below but I will just give you a prime example. I will skip the wake up and brush teeth steps, you should already have that down pack.

Find Inspiration
Sketch out a design on paper
Clean sketch up in Photoshop, use guide lines
Find Colors for website
Find clip arts, images, brushes, textures, etc
Start inserting textures, brushes, and icons into design
Name layers and group them
Slice the layout and get it ready for the developer
Save work

That may seem like it is nothing but each step can take a very long time. Whenever you design something it is very important that you design and send it off the right way. For example a developer expects for your design to be pixel perfect, layered & grouped, sliced, and ready to be coded.
Website Developer
Many of you designers out there probably consider yourself as a website designer/developer. If you’re wondering what is a web developer, then do not worry I will explain it below.

Web Developer is the person who deals with websites from a technical perspective

Source
Web developers are usually the ones doing all of the dirty work. What I mean by dirty work is coding the website in many different web languages. As a developer their jobs are to create web pages using front-end developer techniques or back-end developer techniques. If you’re lost then do not worry, I will explain it below.
Developer usually work with many web languages depending on whether its front-end work or back-end work. If you take a look at the list below you can see what type of languages web developers work with to create dynamic web pages.

Markup languages (such as HTML, XHTML and XML)
Style sheet languages (such as CSS and XSL)
Client-side scripting (such as JavaScript)
Server-side scripting (such as PHP and ASP)
Database technologies (such as MySQL and PostgreSQL)
Multimedia technologies (such as Flash and Silverlight)

Many designers consider themselves as Web developers but mainly know half of the languages. I know it is very difficult to learn new web languages while mainly working with a code that you’re familiar with. Each language above is very important if you’re one of those developers who has a plan to work for a company or keep a job. 
Front-End

Front-End Developers mainly know some of the basic codes like HTML, CSS, Javascript, and might have a little understanding of PHP, and some back-end work. To learn more about Front-end developers check out this article from Fuel Your Coding.
Back-End

 Back-End Developers are just as important as a Front-End developers. Back-End developer mainly work with web languages like Perl, PHP, ASP, JSP, ColdFusion, etc. What I love about working on the back-end of the site is that you can control the website and its functions. Say you wanted to create a membership website and you need a place to store the visitors user-name and password. You would need to create a database that stores the information and that is when the back-end developers come in.  
What should I know to be considered a website designer/developer
To be considered a website designer and developers I would recommend that you spend time working with new lanuages that you normally do not work with and you keep designing the kick butt web pages and designs. You do not have to have every single web language down pack but it would be good to have a good understanding of what each languages does and how you can work with it to create something worth while. I hope this article gave you a basic understanding on what each field does and the main codes they use. If you’re looking forward to becoming a developer or designer keep working hard and you will be one in no time. 



Create an awesome user friendly button in photoshop
Marcell — Sat, 30 Jan 2010 21:27:22 +0000
Create a New Document. It can be any size.
Step 1
Select the rounded rectangle tool, radius: 5px, color:#1f1f1f and draw a rectangle in the middle of your canavas.


Right click on button layer>>blending options>>gradient overlay. Blend mode:normal, Opacity:100%, Style:linear, Angle90, Scale:54%.


Now double click on the gradient bar. Left Color:#1f1f1f, Right Color:#343434.



Step 2
Now were going to give our button a little of pop out technique. Ok so you know the first rectangle layer we’ve created, we are going to take that layer and duplicate it 2 times. After you have duplicated it 2 times you should now have 3 buttons in total. First Rectangle will be the gradient we’ve created in the beginning of this tutorial and the second 2 buttons will be changed from gradients to a 1 solid color.
Note: To change a layer from a gradient to 1 solid color all you would have to do is right click on the layer>>blending options>>and unselect the gradient overlay box. Then select the

color check box and change the color without making a new button over again.
First rectangle: Gradient

Middle Rectangle: #3D3D3D

Last Rectangle: #343434

Now that you have all 3 buttons made with the proper colors we will now make them them close to one another. Zoom in and select the move tool. Now drag the two layers close to the gradient layer. You should now see a little pop out. If you can not then it might be because of the white canvas.


Step 3
Now we will add our little gloss inside of the button. Select the rounded rectangle tool, color:#ffffff. Now draw a rectangle at the top of the button and change the opacity to 1%, and fill to 10%.


Step 4
Select the type tool color: #4b4b4b, font size:30px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: multiply, distance 0, choke: 0 , size: 5


Now select the color overlay check box and change the color to #333333.


Step 5
Select the type tool color: #4b4b4b, font size:12px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: mutiply, opacity: 75%, angle: 120, distance 5, choke: 0 , size: 5


Now select the color overlay check box and change the color to #ffffff. And you should now have a nice looking button.
Note: Click to Enlarge!

You can change the colors of these buttons very easy without creating new buttons. Just change the gradients and background colors and you will be good to go.
Note: Click to Enlarge!






why competing with other designers in contest will hurt you rather than help you
Marcell — Sun, 24 Jan 2010 23:36:20 +0000
Competing with other designers for various reasons seem to make you believe or think that you will become a better designer. I think that applies to a certain extent and should not be taken for granted.
Time Consuming
When competing in a contest, trying to come up with a design can be very overwhelming and time consuming. Often designers get the picture in their heads that they can come up with a rocking pixel perfect design in just a matter of hours. I will agree that a design can be done within a mater of hours but I can guarantee that it will not be rocking nor pixel perfect. Designs roughly take about a day or more to complete if you’re trying to create something very fascinating. When designing a website or graphic, designers have to plan out many things such as. 

Color Scheme
Typography
Layout/Mockup
Functions

Those are the main topics that designers often have to take time to think about before making a decision. I will explain below why each one is very important.
Color Scheme: Color Scheme is very important when designing a website or graphic. Whenever you’re trying to find the right colors for something you must always find at least 3 colors to use for your design. Choosing 3-5 colors will give you many options and will basically give your design a good look. I will give 2 sub examples why you will need about 3-5 colors for your design below. 
Website

Background
Container
Navigation
Links
Logo





Graphic

Background
Elements
Image
Environment
Logo


Typography: Typography can be very frustrating when creating a new design. Whether its for a website or poster it can take time looking through thousands of fonts just to find the right one for you specific project. Typography can also determine the look and feel of your website. Thin fonts tend to be more elegant while bold fonts tend to be more fun-ish.



Layout: Creating a layout or Mockup can save you a ton of time. Most designers do not like sketching things out and just decide to open up photoshop in begin working. That fine if that works for you but for me I find sketching out my designs or creating a mockup can really make a difference with my designs rather then me just creating it step by step in photoshop.


Functions: This only applies for web designers. Whenever you create a design of a website make sure you keep in mind what functionality you might like your website to have when everything is over with. for example if you’re going to have a button and you want it to be a rollover button, make sure you create the rollover effect even if users cannot see it in the final layout. 

Losing hope / inspiration


When competing in contest many designers often lose inspiration in their own work. The reason for such a thing is because when you’re in a contest you are competing against some of the best. Someone design will always be better than yours in most cases or at least you will think that and will not know what to create. For example I was once in a contest and I was very excited about it especially the cash prize but when I started to see designers entries I thought to myself that there was no way I could create something that good. I lost hope and inspiration. I could not think of a design and was very frustrated. Looking at others work made me feel like I was not designer and did not belong in the design community.  
Less time for personal work


Most of the time when you enter contest you find that a design might take you quite the time to complete and yet you are unsure if you’re going to win it. I often hear many designers say “I lost but it will make me a better designer”. I strongly disagree with that. The time you spent designing that poster or website you could of been following a tutorial or creating something for yourself that is worth while. Working on personal projects or following a tutorial will add to your knowledge and make you better at designs. You can also learn new techniques that you did not know of. In a contest you are not guaranteed the prize so you’re basically taking a big risk. Why take a risk in lose time when you could do something productive with that time. 
How to become a better designer
Becoming a better designer takes time in practice. If you would like to become a better designer just follow my steps. 

Do not look at others work to often
Take a walk for inspiration
Always brainstorm & sketch ideas before turning to a computer
Work on personal projects instead of entering contest
Follow design tutorials and pick up various techniques from it
See what the latest trend is in design in creating something that is opposite from it

If you follow my steps above you will be a better designer in no time. Stay away from contest in work on personal projects so you can build your portfolio and become better at what you love to do. Sometimes you have to keep your secret hidden and release it when least expected(In terms of design). Good luck at becoming a better designer. Hope all goes well 



Create a awsesome images gallery using css3 and jquery
Marcell — Sun, 17 Jan 2010 03:25:49 +0000
Today we will be creating a very simple but great looking css3 image gallery using jquery and css3. The image gallery will be tited to the side and on hover will move. Whenever you click on the image a lightbox will pop out. So lets begin.
Demo
Folder Structure
In the folder of your for your image gallery you should have 3 folders and 2 files. 

Css -Contains the jquery css 
Images – Contains images
Js – Contains the javascript
index.html
style


The HTML Structure
For the image gallery I simply wrapped the gallery in a div and added the images. Every 4 image has two different classed assigned to them. For example the first 4 images has a class name of thumb-small and for the other 4 images they have a class name of thumb-bottom. 













The Css
For the Css you might wonder what -webkit, and -moz-transform is. Webkit is a Css3 tag that targets the safari web browser and moz-transform is a Css3 tag that targets the Mozilla Firefox web browser. In the css 

-webkit-transform: – Used to rotate the images
-webkit-transition: – Used to zoom/ease in on the images

.thumb-top{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-bottom{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-top:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(-8deg) scale(1.2);
	-webkit-transform:rotate(-8deg) scale(1.2);
}

.thumb-bottom:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}

#gallery {
	margin-top:20px;
}

Inserting and activating jquery plugins
First things first when activating a jquery plugin is to simply make sure we call in the jquery script. Insert the code below into the head section of your document. The code below calls in jquery, then the two jquery plugins, and finally the plugin Css. 





Now we want to add the script below to the body of our HTML document right before the end of the body tag.


For the code below I will try to explain it the best way I can so you can better understand it. I know not everyone is good with inserting Javascript plugins or changing functions. 
The first function inside of the script tag targets the light box plugin. The light box plugin is when you click on an image and the image enlarges without being taken to the direct image location.
 For this $(“.thumb-top,.thumb-bottom”).fadeTo(“slow”, 0.3);  function it just tells jquery to fade to anything with the class of thumb-top or thumb-bottom. So whenever your mouse is not on the image it will be darken.

 
For this $(“.thumb-top,.thumb-bottom”).hover(function(){ function it just tells you on hover, or whenever you move over the image with your mouse that it will highlight the image.


For the $(‘#gallery a’).lightBox(); function it just asks you what id tag would you like for it to bring up whenever you click on something with the tag of a href. For example I have the images wrapped inside of the id gallery and every image has an a href assign to it so whenever you click on it jquery knows when to call for the second lightbox function.



Note: Rotation does not work in Internet explorer browsers do to lack of support of Css3. 
After that you should now have your very own css3/jquery image gallery. I am no jquery expert but I try to help you guys understand it and a easy way instead of using words that you guys are not familiar with. 
Credit
Credit goes to Csswizardry for the css3 image gallery.

Credit goes to Leandrovieira for the lightbox plugin. 




Highlight Current Page in an HTML Document Using Css
Marcell — Tue, 12 Jan 2010 00:01:57 +0000
When designing a web page using HTML/CSS you might have notice that you cannot have an active page just by creating a new index file. In this tutorial I will teach you the simple steps to creating an active CSS state. Open your favorite WYSIWYG (Dreamweaver, coda, notepad++) editor. 
Click here for Demo
Getting an active state when using css can be very frustrating if you’re not that familiar with css. Many developers that are new to css often think it is the end of the world when really the active state can be accomplish with very little code. 
The Body
The body is of the most important roles when you’re trying to create an active page using css. The reason the body tag is very important because when its time to define what page the user is on the body tag will keep that page active. You’re probably thinking that just body tag can complete that and truth is it can but with a little bit of help from an id or class tag. to give the body a id or class name you would simply do the following.
body id="home"
or
body class="home"

Everytime you create a new index page make sure you change the body class or id name and you will later know why.
The HTML
For the HTML I created/ a basic navigation menu with and unique id name.  Notice every link such as home, about, etc all have different id names. The reason they all have different id names is so we can identify that certain linktag in the css file. 

	
		Home
		About
		Team
		Video
		Contact
	


The CSS
Ok so you now have and idea of how the menu has to be laid out using html. Now its time to define each id element from the html. If you look at the code below

you will notice that every css tag has the body id, followed by the menu id with the a(active) tag and finished with the css properties. Take a look at css and compare it to the html. 
body#home #home a,
body#about #about a,
body#team #team a,
body#video #video a,
body#contact #contact a{
	padding:10px;
	background:#FF0000;
	margin-right:5px;
	color:#FFFF00;
	text-decoration:none;
}

This was not a tutorial but I truly hope it helped you guys out. I know many people face this problem quite often and do not know what to do. It was a simple, fast, and sweet technique.  



10 amazing websites for finding inspiration
Marcell — Sun, 10 Jan 2010 07:14:13 +0000
Hey guys I know I barley post list/ roundups but I know you guys will enjoy this. In this post I have listed 10 websites that you can find inspiration from. If you’re one of those people who can never come up with in idea then these sites will get your idea started. enjoy
Deviant art

Flickr

Css Mania

Creattica

Mix css

The Design Inspiration

Css Remix

Patter Tap

Dez Inspiration

Css Dance

Webdevtuts

Interview with Chris Spooner of Line25 and Blog.Spoongraphics

Can you tell us a little about yourself and what you do?

Many people know you run multiple design blogs, how do you manage keep up with all of them?

When first starting your blog how long did it take for you to actually start getting a good amount of visitors, and did you ever feel the need to give up at anytime while working with your start up blogs?

When did you first take interest in design, and what steps did you take to learn it?

Considering there are hundreds or even thousands of ways to promote your website, what advice would you give to someone trying to promote a website of their own?

Have you had any regrets in the past dealing with design or running your design blogs, and if so what would you have done differently to get to the point you’re at now?

Many people are wanting to become designers each day and want to start up a blog of their own someday, do you have any advice for new comers who might like to run a design blog?

What do you think you would be doing if you had no interest in design?

Create an astonishing soccer desktop wallpaper using photoshop

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Things to consider when starting a new freelance business

Work full-time/ Part-time

Site Layout & Design

Portfolio Plan

Getting ready for take off

Create a nice clean blog Layout in photoshop

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

What every developer or designer should know before calling themeselves a designer or developer

Website Designer

What does it mean to be a Web designer

Website Developer

What should I know to be considered a website designer/developer

Create an awesome user friendly button in photoshop

Step 1

Step 2

Step 3

Step 4

Step 5

why competing with other designers in contest will hurt you rather than help you

Time Consuming

Losing hope / inspiration

Less time for personal work

How to become a better designer

Create a awsesome images gallery using css3 and jquery

Folder Structure

The HTML Structure

The Css

Inserting and activating jquery plugins

Credit

Highlight Current Page in an HTML Document Using Css

The Body

The HTML

The CSS

10 amazing websites for finding inspiration

Considering there are hundreds or even thousands of ways to promote your website, what advice would you give to someone trying to promote a website of their
own?