vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   Graphics Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=221)
-   -   Designing a Professional Web 2.0 Logo [Photoshop] (https://vborg.vbsupport.ru/showthread.php?t=192283)

Alex LD 09-29-2008 10:00 PM

Designing a Professional Web 2.0 Logo [Photoshop]
 
Hello vBulletin.org!

I am Alex the Founder and Administrator At TransverseGFX.com

I Decided to share my tutorial with you guys. This tutorial will show you 2 basic things that are key in web design and development. Those 2 elements are, Opacity/Fill. Opacity can be many things in this tutorial we will use it to represent the reflection in this tutorial. And the 2nd thing you will be looking at is the style. Style is key to standing out and being noticed. It is not recommend you copy this tutorial EXACTLY! feel free to tweak around and add your own effects and tricks. I am just demonstrating a few basics. I hope once you'r finished you can start making your own logos and banners for your own vBulletin!

I hope you guys like the tutorial.

Start of by making a New Document>File New>

1.) Type the words you'd like to make glossy and web2.0 like, With the font "Tahoma" Selected with a 48 PT as the font size.
>>>Feel free to make words bolder or bigger with different colors at your own desire.

https://vborg.vbsupport.ru/external/2011/09/23.jpg

2.(optional) Go to Layer>Layer Style>Gradient Overlay and make something so that the top color of the font is lighter then the bottom or you can just leave it.



3.) Select the Text layer you want to be reflective then go to Layer>Duplicate layer. You will now have 2 of the exact same text layers overlapping each other. With the Move tool Drop it just under the original text.

https://vborg.vbsupport.ru/external/2011/09/24.jpg


4.) Select the layer on the bottom. Go to Edit>Transform Flip Vertically.
https://vborg.vbsupport.ru/external/2011/09/25.jpg


5.) On the text layer. Change the "Opacity" And the "Fill" to 45% for both! If you feel this isn't strong enough or it is to strong then you can either lower the number for a lighter effect or raise the number for more boldness.

https://vborg.vbsupport.ru/external/2011/09/26.jpg

6.) To add a cool little effect select the line tool and make it be a 3 PT Line, Select a 3 PT soft brush. Then make something similar to this. With the pen tool. Click Create new layer for this layer will be the layer of this pen tool.

https://vborg.vbsupport.ru/external/2011/09/27.jpg
Right click and go to "Stroke Path" With "simulate" Pressure on. You will get something similar to this
https://vborg.vbsupport.ru/external/2011/09/28.jpg

Winterworks 11-06-2008 11:03 PM

Hmm...

It's amazing how many people view this, but don't reply.

This is an excellent tutorial. I knew all of this before, as it's pretty basic, but it is very useful, and attracts peoples attention.

Amazing tutorial, great job mate.

Skierpetros 11-07-2008 11:50 AM

thanks nice!

trigxm 11-07-2008 05:14 PM

Fantastic, thanks for the time and effort even if some people don't give kudos.. well done

ExTincTi0N 11-14-2008 06:54 PM

Thanks for the article man I will use this for my logo.

PremierFootball 11-16-2008 08:48 AM

Awesome tutorial.

wmlvb 11-18-2008 02:34 AM

Awesome thanks I just bought CS4 for mac with educational version. I will have to try this.Thanks

Daniel_HBK 01-15-2009 11:56 PM

https://vborg.vbsupport.ru/external/2009/01/56.jpg

Alex LD 01-18-2009 05:01 AM

Quote:

Originally Posted by Daniel_HBK (Post 1714009)

Looks good :up:

Vaupell 01-23-2009 03:20 PM

1 Attachment(s)
Unfortunally i cant afford newer photoshop versions they have become
way to exspensive for the average joe like me..

So im still using my good old Ps 6 ;)
i did not locate or belive i have the "line tool" so i had to use the cut tool
and ended up with some off and odd looking thing..

Attachment 93339

Well hell, might aswell use it for something so tryed attaching it to a glass test.

Attachment 93338

haha allright tx for the tutorial.. :up:

GSeybold 01-24-2009 01:11 AM

Thank you very much for this tutorial. I'm using Photoship Elements 5.0. Is this the same as what you're using because I don't see some of the elements your talking about and my system is a bit different. I'm a newbie to all of this so bare with me:)

Attached is as far as I got. I couldn't find "fill" or the "line" tool. Mine looks homemadeish as well. How come the text looks choppy?

I'm also attaching a screenshot of my photoshop. Is this what everyone is using? I wasn't sure what to buy when I bought this about a year ago.

Thank you so much for this tutorial.

Gabby

Alex LD 01-24-2009 01:54 PM

Pretty good job guys I'm really happy I could help and save you guys some money from paying someone else to design it :D

Neutral Singh 01-24-2009 02:22 PM

Excellent!! Thank you for sharing.

zahsnelli 01-25-2009 10:05 AM

nice man, u r the great. share more knowledge please

Alex LD 01-26-2009 10:08 PM

Thanks :P I also do GFX work if anyone is looking for any Professional Grade GFX work just send me a PM and we can work something out. Style development, Coding, Designing etc.
~Alex

Oyobiia 02-15-2009 05:02 PM

Excellent. Thanks for this.

DanTHEGREAT 02-18-2009 12:11 PM

woot check this out!

https://vborg.vbsupport.ru/external/2009/02/57.png

supersy 03-31-2009 06:38 PM

Fantastic, thanks for the time and effort

merk_aus 04-06-2009 04:36 AM

Thanks looks great, this will definately help me out for a number of gfx i use to be paying people to make cant believe for something that takes a couple minutes to do I was paying $20 odd a time lol - thanks mate much appreciated

creative-friend 04-11-2009 10:22 PM

Nice.....
couldnt do the last bit...

rtyagis 05-10-2009 02:36 AM

Thanks for the article. I will use this for my logo.

thanks again :up:

bearcub 01-26-2011 06:44 PM

Fantastic and just what I needed.

victorvu 09-21-2011 02:53 AM

Quote:

Originally Posted by Alex LD (Post 1633592)
Hello vBulletin.org!

I am Alex the Founder and Administrator At TransverseGFX.com

I Decided to share my tutorial with you guys. This tutorial will show you 2 basic things that are key in web design and development. Those 2 elements are, Opacity/Fill. Opacity can be many things in this tutorial we will use it to represent the reflection in this tutorial. And the 2nd thing you will be looking at is the style. Style is key to standing out and being noticed. It is not recommend you copy this tutorial EXACTLY! feel free to tweak around and add your own effects and tricks. I am just demonstrating a few basics. I hope once you'r finished you can start making your own logos and banners for your own vBulletin!

I hope you guys like the tutorial.

Start of by making a New Document>File New>

1.) Type the words you'd like to make glossy and web2.0 like, With the font "Tahoma" Selected with a 48 PT as the font size.
>>>Feel free to make words bolder or bigger with different colors at your own desire.

https://vborg.vbsupport.ru/external/2011/09/23.jpg

2.(optional) Go to Layer>Layer Style>Gradient Overlay and make something so that the top color of the font is lighter then the bottom or you can just leave it.



3.) Select the Text layer you want to be reflective then go to Layer>Duplicate layer. You will now have 2 of the exact same text layers overlapping each other. With the Move tool Drop it just under the original text.

https://vborg.vbsupport.ru/external/2011/09/24.jpg


4.) Select the layer on the bottom. Go to Edit>Transform Flip Vertically.
https://vborg.vbsupport.ru/external/2011/09/25.jpg


5.) On the text layer. Change the "Opacity" And the "Fill" to 45% for both! If you feel this isn't strong enough or it is to strong then you can either lower the number for a lighter effect or raise the number for more boldness.

https://vborg.vbsupport.ru/external/2011/09/26.jpg

6.) To add a cool little effect select the line tool and make it be a 3 PT Line, Select a 3 PT soft brush. Then make something similar to this. With the pen tool. Click Create new layer for this layer will be the layer of this pen tool.

https://vborg.vbsupport.ru/external/2011/09/27.jpg
Right click and go to "Stroke Path" With "simulate" Pressure on. You will get something similar to this
https://vborg.vbsupport.ru/external/2011/09/28.jpg

This is great!

I have an issue trying to get a person or an object out of the crowd. How can I do that?

Thanks.

Vic


All times are GMT. The time now is 05:20 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01115 seconds
  • Memory Usage 1,768KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (23)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete