illustrain's PHOTOSHOP LEARNING EXPERIENCE

Ohhhhh yeahhhhh. version 1.1 beta

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

46 Replies - 8265 Views - Last Post: 12 January 2006 - 04:29 PM

#1 illustrain  Icon User is offline

  • Voltron's Daddy
  • member icon

Reputation: 8
  • View blog
  • Posts: 1,597
  • Joined: 27-April 01

illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 05 January 2006 - 10:27 PM

Alright....

So some of you want to learn photoshop and be a MASTER. I see alot of people here have the technical parts down, but they don't quite have the artsy and design part down. I somehow want to teach you guys the artsy part of it, and along the way we're going to write a tutorial for everyone.

What we need.... is a project that everyone can work on - like possibly a layout, or a photo manip, or something that isn't out there already. Something thats relatively difficult, but not too hard. We'll all work on it together and eventually come up with different versions and everyone can help each other.

Essentially, a tutorial walkthrough - but we're writing the tutorial as we go.


If this works out good here in design, I want to do it with programming aswell, because I think if it works like I'm planning in my head it could be a valuable learning tool.


Anyway.... anybody have ideas for projects? I'm thinking maybe a fake layout designed 100% in photoshop?

Suggestions, comments?

Is This A Good Question/Topic? 0
  • +

Replies To: illustrain's PHOTOSHOP LEARNING EXPERIENCE

#2 fyrestorm  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 10
  • View blog
  • Posts: 3,113
  • Joined: 04-April 02

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 05 January 2006 - 11:30 PM

what about a redesign of </dic>?
Was This Post Helpful? 0
  • +
  • -

#3 illustrain  Icon User is offline

  • Voltron's Daddy
  • member icon

Reputation: 8
  • View blog
  • Posts: 1,597
  • Joined: 27-April 01

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 05 January 2006 - 11:52 PM

Hmmm, I think thats a bit too big of a task.

I think I'm going to create a fake client, and start from scratch a client project from start to finish. Including logo creation, layout in photoshop, chopping it up, then it'll move to the coding forums for the part to code it and they can take over if it works out well. I think it'll be a good learning experience for everyone.

Well, I want some more feedback before I start writing stuff up. :)
Was This Post Helpful? 0
  • +
  • -

#4 Wizzy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 6
  • View blog
  • Posts: 408
  • Joined: 20-November 05

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 01:04 AM

Quote

Anyway.... anybody have ideas for projects?


Well to properly become good at photoshop you have to be able to design big and small graphics, so it might be a good idea to get your students working on favicon icons.
Was This Post Helpful? 0
  • +
  • -

#5 pioSko  Icon User is offline

  • still.dreaming
  • member icon

Reputation: 23
  • View blog
  • Posts: 1,888
  • Joined: 06-June 03

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 02:45 AM

start of with simple projects that promote fundemental design ideas... postcrads, posters, book covers. Something that requires one format and produces a one sheet product.

Maybe begin with layout and form. Using one element on a page... then two.. then three... then 2 different "shaped" elements.

...typography with images
...typography as an image

...color : what it is. what it represents. how it interacts. what to do and what not to do with it.

...(gotta stop here.. I have a meeting in 5 minutes... will continue convesation later ;) )
Was This Post Helpful? 0
  • +
  • -

#6 Wizzy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 6
  • View blog
  • Posts: 408
  • Joined: 20-November 05

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 06:24 AM

Also teach your students about colouring. Like if the image uses red, stick to orange and yellow. If the image is blue, stick to green and purple.

Sounds very interesting, I'd like to see what you teach them.
Was This Post Helpful? 0
  • +
  • -

#7 pioSko  Icon User is offline

  • still.dreaming
  • member icon

Reputation: 23
  • View blog
  • Posts: 1,888
  • Joined: 06-June 03

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 06:38 AM

Wizzy, on 6 Jan, 2006 - 03:21 PM, said:

Also teach your students about colouring.  Like if the image uses red, stick to orange and yellow.  If the image is blue, stick to green and purple.

Sounds very interesting, I'd like to see what you teach them.

There's a lot more to colour than that.

Every colour (and colour combinations) has properties than influence several aspects of a project. On both the target/user and the project, a colour will have an action, and therefore a reaction.

And no, I don't think that's what illustrain wants to write about, but maybe touch upon. I'm just saying that colour plays a big part.

.... AND... i'm just throwing ideas out... not all have to be used or good... it's called brainstorming .. and I'm guessing that's what illustrain wants from us.
Was This Post Helpful? 0
  • +
  • -

#8 Amadeus  Icon User is offline

  • g+ + -o drink whiskey.cpp
  • member icon

Reputation: 248
  • View blog
  • Posts: 13,506
  • Joined: 12-July 02

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 07:29 AM

illustrain, I think you've got a great idea going...you hit the nail on the head. I am failry proficient technically, but my 'feel' or 'undertsanding' of graphic design is horrible...it means nothing to me. this undertaking will be extremely valuable!
Was This Post Helpful? 0
  • +
  • -

#9 eLliDKraM  Icon User is offline

  • Pepè Le Pewn
  • member icon

Reputation: 6
  • View blog
  • Posts: 6,565
  • Joined: 13-August 05

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 09:32 AM

Complimentary colors are fucking bullshit. I think an actual site template would be the best route to go because a part of that is working with a favicon 30px logo, a graphical header, and using colors/graphics to create a flowing well-designed website. If you look at <dic> I can count tons of areas that would be beneficial to non-artistic members who wish to become proficient at photoshop. Colors are common sense, and most colors work together when used properly. Also, we could have header contests because I feel my best work has come from viewing old material way back when I first started (inspiration to create hot shit) creating logos.

My proposals:
-Web layout Designs
-Header Contests (Abstract/Precise (Image with a clearcut goal)
-Image Manipulations (Photos AND Screens)

I'll be sure to add more when my mind is turned on, I just woke up.
Was This Post Helpful? 0
  • +
  • -

#10 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 02:06 PM

Amadeus, on 6 Jan, 2006 - 07:26 AM, said:

illustrain, I think you've got a great idea going...you hit the nail on the head.

I agree, this could be wicked...

Theres tons of stuff I could learn in Photoshop.
Was This Post Helpful? 0
  • +
  • -

#11 illustrain  Icon User is offline

  • Voltron's Daddy
  • member icon

Reputation: 8
  • View blog
  • Posts: 1,597
  • Joined: 27-April 01

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 04:28 PM

Alright....

Seems theres good response so far so what I'm going to do is create a fake photographers website, from start to finish, including coding a gallery which we'll move to the coding forum afterwards and try coding it from xhtml and css all standards and shit. Schwing.

SO.

Our client, "Centric Studios" has approached you to design a full package from them. They will need identity package (a logo and better use of their color scheme), a full website with a gallery, and maybe some business cards.

You have free reign to do the best in your power to design their website in web 2.0 style. They want the website to be as 'clean' and sleek as possible. They have a "bright" look to them, and want their website to be inviting aswell as feature some of their best photography on the front page.

SO...



To start off, we're going to use one of the best stock photography resources I know: http://sxc.hu

After you've signed up there, goto user Subliminl (A good friend of mine, and great photographer whos agreed to let me use all his photos for this project). http://www.sxc.hu/br...ery&l=Subliminl

These are the photos that you'll be using on the site.

Now, we have that, so the first thing I would do is either start on a logo or start on a layout now that we've seen the style of what we want.


------


So... remember that if your participating in this the goal is to eventually write a tutorial, so if you come up with something good, then document how you did it, as well as take screenshots if you can. At the end we all should come up with something to add to the portfoilio that looks nice and learn the process on the way.


So, saying that - lets start....
Was This Post Helpful? 0
  • +
  • -

#12 eLliDKraM  Icon User is offline

  • Pepè Le Pewn
  • member icon

Reputation: 6
  • View blog
  • Posts: 6,565
  • Joined: 13-August 05

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 04:32 PM

So these are just graphical templates or do you expect us to code these as well?
Was This Post Helpful? 0
  • +
  • -

#13 supersloth  Icon User is offline

  • serial frotteur - RUDEST MEMBER ON D.I.C.
  • member icon


Reputation: 4503
  • View blog
  • Posts: 28,411
  • Joined: 21-March 01

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 04:35 PM

eLliDKraM, on 6 Jan, 2006 - 05:29 PM, said:

So these are just graphical templates or do you expect us to code these as well?

seperate learning experiences, the graphics will be part of this forum and the coding section will be part of another forum (php? maybe just web development?) put them together and we have something that works.
Was This Post Helpful? 0
  • +
  • -

#14 illustrain  Icon User is offline

  • Voltron's Daddy
  • member icon

Reputation: 8
  • View blog
  • Posts: 1,597
  • Joined: 27-April 01

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 05:22 PM

So, first thing I do, is definetly get the right music on that you want to put you in the mood. I usually can't design anything if I'm not in the right mindset. Some days I can bust out some crazy shit that looks awesome, while other days I can't do anything at all and nothing seems to work. So take a deep breath, and open up Photoshop.

I'm using Photoshop CS2, but pretty much any version 7 and up will be fine. Shit, I even used 5.5 untill 7 came out, so that might even work.

So, now having that, the first thing I would probably do is that I would start on a logo. I personally don't like using illustrator, although I should, I can design it easier in Photoshop first, then go over it in vector later on. Feel free to use Illustrator though, thats how most people do it.

--

To start out usually, I'll start off with a shape in photoshop using the pen tool. The pen tool is a bitch to learn, so you just really have to mess around with it untill you get a good feel for it. Remember, that if you hold down SHIFT while your adding points, that it will make straight lines, or perfect diagonal lines.

Now, when your drawing your shape - you want to think of how you want it to repeat, and simplicity is key. Most logos are good if you can keep it to 1 tone. I usually stick it to 2 tones and I'm good, or at least something that I can simplify to 2 tones if I wanted to. So, once you have your one basic shape, I made one like this:

Posted Image

Think about something that you could rotate around another shape, or maybe a triangle, or whatever pops in your head. You just have to mess around untill you get something you think will turn out cool.

So, say I wanted to maybe copy this shape 3 times and rotate it around a circle, I would want to make the bottom of it more concave


Posted Image

To do this, all you need to do is take the "Convert Point Tool", select the bottom two points on your shape, and hold shift and drag down. (Shift tool is your friend).

Now, I don't want to do that, but you just need to get familiar with the path things and working with points:

Path Tool: Makes a new path or continues another one.
Convert Point Tool: Fucks with your existing path, and makes things curvy.
Path Selection Tool: Selects your WHOLE path to move it
Direct Selection Tool: Selects a certain point on your path to move it without effecting the curves of it

Now, remember that you can go up to Edit -> Transform Paths.

Use the direct selection tool to select a few points and mess around with scaling and rotating them. This is also how you will get things exact and looking clean.

Also, on the layers dock, you have the tab that says "Paths". It works the same way layers do, but a little weirder. You can click on a path, and it will select that path, or click off of it and it will deselect it - so thats how you get that annoying line off of your image if its on there. It took me a while to figure that out when I was learning.


-----

OK, so now enough with the technical, lets have some fun.

Now, I took my shape - and rasterized the vector part of it (Not needed, but it makes things easier for me). Right click on the layer and hit Rasterize Vector, or whatever. Sometimes you need to Select it, and make a new layer and fill it with a color, so to do that - just CTRL+click on the preview image thing in the layers dock on the your shape, and that makes a selection of it - then you'll want to just make a new layer and fill it with a color (perferably black/white when your working with vectors like this).

Now, I'm going to give it a bit of color. I selected half of it, and then went to Brightness/Contrast to lighten one side up a bit, like the other has a shadow.

Posted Image

(Oh, if you have a selection, the hotkey I use most without a doubt is CTRL+D - that deselects any selection you have. That, and fill - Alt+backspace on windows I think does whatever foreground color you've picked, and then CTRL+backspace does any background color) Mac, just the the apple key + backspace.)

After that, I went to Hue/Saturation and gave it a color. I like Pastels.

Now the client wanted bright colors, right? So you want to pick colors of the SAME SATURATION, but DIFFERENT HUES. That is how you get colors to match that have the same "feel" to them, but are different colors.

So, we're going to turn the lightness up, so it'll throw some color on there - and pick some colors that match. Check the "colorize" box. What that does is overlays whatever your messing with one color, so if you have a picture and want to turn the entire thing a shade of blue or whatever, then you check that box. If you keep it unchecked, all of the colors you'll be messing with will be relative instead of absolute. So, once you have your good shade of color, proceed on.

Posted Image

Now, I'm going to copy it a few times, and rotate it around so that it makes a triangle, since thats what I want to do. Feel free to make it however you want, and be creative with it! I made a new layer, and put a 1px vertial line to get the shapes to line up and go at the right angle. Just use edit -> transform and then rotate, flip horizonta, flip vertical, are all your friends. Remember, you can put the angle you want up top if that helps, or if you know something exact you want (like to rotate it exactly 45 degrees)

Posted Image

OK, looking good...

Posted Image

So, now I have all of them lined up and whatever, which can be kind of tricky, I'm going to change the colors of the other two...

Remember, to keep that same color "feel" ONLY CHANGE THE HUE. If you want to mess with the saturation again, change it in one, but write down the number you use, and then use it in the other ones to keep it consistant. CONSISTANCY IS KEY!

Posted Image

Then, I added an ALMOST BLACK background in the middle as a triangle, just using the selection marquee tool and then filling it in a layer under all of the other shapes.


Posted Image

So, I like that. I think I'll keep it for now. - the key to design... CONSISTANCY, and playing around with stuff untill it looks good.

Usually after this point I'll go into illustrator and vectorize it for the clients use - but we're skipping that part.

Now, to format the logo so its presentable....
Was This Post Helpful? 0
  • +
  • -

#15 illustrain  Icon User is offline

  • Voltron's Daddy
  • member icon

Reputation: 8
  • View blog
  • Posts: 1,597
  • Joined: 27-April 01

Re: illustrain's PHOTOSHOP LEARNING EXPERIENCE

Posted 06 January 2006 - 05:49 PM

OK, so I have my shape, now I need to add text that fits with it. This is one of the hardest parts of design in my opinion. I've seen so many sites that have HORRIBLE typography, but decent everything else. Typography makes a world of difference. So, take your beautiful logo that you just made, and put it in a new image. When I'm presenting things, usually I like to put a slight, but barely noticable gradient in the background. That gives it a nice touch. One big mistake that most people make, is that they make their gradients too strong.... If your ever using gradients to make something just have a nice touch, then keep it subtle. Something in my style is I use a TON TON TON of gradients, and big sites that have the 'templately' looks usually achieve this using gradients.

Posted Image


So, I have this - now I want to add some text to it.

Write out the text you want, and this is where your artisticness comes in to play. Your going to scroll through all of your fonts in your system untill you find something you think will match. This is your eye, and it helps having a good selection of fonts. This will really determine the feel to your site aswell. Typography is a huge roll in it. For a logo, you don't want any font too crazy usually unless your only using that word as your logo.

So, choose a font that has its own personality, but it still clean and readable for your client.

So, after tinkering with it somemore, I wanted to give it kind of a really bright and trendy look - I came up with this:


Posted Image

I like it, the 1px black border I use to present things and the gradient background makes it look way better and classy.

Also, I wanted to make the middle color match the text color - so if you made it a lighter grey, I'd make the text a lighter grey aswell.

You can also put gradients on text and subtle things to give it a nice classy appearance - like a different version of this I made:

Posted Image

To do gradients on text, I always used to do it by putting a layer on top of it, but now I just use blending modes. Right click on the layer and mess around with the blending modes. REMEMBER... be subtle and consistant. Turn down the opacity of it to give it a subtle look.

Such small changes, but it gives it an entirely different look and feel.



Anyway... now we have a logo. The layout will be continued when I have the energy sometime next week.

SEE WHAT YOU CAN COME UP WITH! Tell me what parts you have difficulty with, and we'll format it into a tutorial. and take screenshots.
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »