Welcome to our website!

1stwebdesigners is a miniature site focused on building nice web-based applications. It is currently run by two human in his spare time, the Bilal Ahmed and Janitor Jesse. If you are interested in learning programming, you can watch Video Tutorials to learn. You can also download Open Source files to help you on your way.

Sunday 20 May 2012

Adobe Illustrator CS5 Tutorial 1 | Quickstart!




Here is a really quickstart to Adobe Illustrator CS5. How to setup your layout and save it, and we make a heart for the fun of it. I'm just using the Trial Version until I get more money to actually buy it, they give you 30 days trial sweet.




Adobe Illustrator CS5 Tutorial 2 | Shapes




In this tutorial for Adobe Illustrator CS5 we mess with shapes and adjusting them. Gotta know these to do the basics or else you will be very sad :(




Adobe Illustrator CS5 Tutorial 3 | Pen Tool




This tutorial covers the Pen Tool in AI CS5. It's really frustrating and scary at first but once you figure out how it works with all the little handles/anchor points you'll feel like it is a breeze.




Adobe Illustrator CS5 Tutorial 4 | Gradients




Gradients in adobe illustrator




Adobe Illustrator CS5 Tutorial 6 | Make a Package Box



This tutorial is a simple on in AI CS5 about making a box. I think rather than explain every tool if we start making some things you'll see how things can be done!

Adobe Illustrator CS5 Tutorial 7 | Make a Leaf





We make a cute little leaf in vector graphics :) Just simple shapes, path finder, and gradients -- and one little Effect - Warp, and Bam! Easy Peasy!




Adobe Illustrator CS5 Tutorial 8 | Anime Eyes





Me use Adobe Illustrator CS5 to create some Anime Eyes, it's pretty easy and we make it in 5 minutes, looks nice! You could make an entire vector mascot out of this if you find the time.




Adobe Illustrator CS5 Tutorial 9 | Text Logos



I show you how to use a regular font, break it apart so you can manipulate it and make it into a logo. This end result of this is lame because to make a good connecting logo you have to think about it. But you could do a lot more than what Im just showing you here.

Adobe Illustrator CS5 Tutorial 10 | Israeli Star





In this tutorial I show how to work a little bit with shapes and stroke to create the Star of David on the Israel flag. I rushed through this sorry, but I think you get the idea!




Adobe Illustrator CS5 Tutorial 11 | Sonic the Hedgehog





I draw sonic the hedhog pretty fast to show you how you can do it. Sorry I rushed through it so he doesnt look that great but you get the idea :P




Adobe Illustrator CS5 Tutorial 12 | Tails from Sonic (Part 1)




Here is a quick run through of drawing tails from sonic the hedgehog. He actually looks pretty good at the end when you add the borders.


Adobe Illustrator CS5 Tutorial 13 | Tails from Sonic (Part 2)



Here is a quick run through of drawing tails from sonic the hedgehog. He actually looks pretty good at the end when you add the borders.








Adobe Illustrator CS5 Tutorial 14 | Blend Tool




Quick example of the blend tool




Adobe Illustrator CS5 Tutorial 15 | Clipping Masks




Quick example of Clipping Masks

Adobe Illustrator CS5 Tutorial 16 | Shape Builder



This is a cool new shape builder tool

Adobe Illustrator CS5 Tutorial 17 | Draw Inside Feature



This is an awesome new feature called Draw Inside for Adobe Illustrator CS5!

Adobe Illustrator CS5 Tutorial 19 | Cartoon Book



Here we will draw a cartoon like book in Adobe Illustrator CS5.

Adobe Illustrator CS5 Tutorial 20 | Cake



In this tutorial for Adobe Illustrator CS5 we are going to make a pretty piece of cake! With a cherry on top so that we can feel happy inside after eating all that chocolate. 

Adobe Illustrator CS5 Tutorial 21 | Diagram Flowchart



Here are some very basic things you can do to create a diagram or flowchart in Adobe Illustrator CS5. Easy Peezy, Japan-eezy.

Adobe Illustrator CS5 Tutorial 22 | Bicycle Tire



We'll make a vector graphic bicycle tire in adobe illustrator cs5 now. We use the CTRL+D (Transform Again) quite a bit, so get comfortable with it, it's very handy! 

Adobe Illustrator CS5 Tutorial 23 | Tracing Image (Manually)



A quick introduction into tracing images into Vector **WITHOUT live trace**. So if you drew something on paper you could LOCK the OBJECT (CTRL+2) and UNLOCK IT (CTRL+ALT+2) and work on it that way.

Adobe Illustrator CS5 Tutorial 24 | Lightning Bolt



Time to use some 3D effects and make a lightning bolt. This is actually very simple and we get a pretty cool graphic! 

Adobe Illustrator CS5 Tutorial 25 | Microsoft Logo



Get comfortable with the Warp tools because they can save you a lot of time. We'll make a logo just like Microsofts, it won't be exact, but it'll help you see how building shapes works -- which is the most important thing in illustrator.

Adobe Illustrator CS5 Tutorial 26 | Hello Kitty



We'll draw Hello Kitty in about 5 minutes, easy peezy, really simple cartoon.

Adobe Illustrator CS5 Tutorial 27 | Rainbow



Making a rainbow in illustrator is kind of tricky to figure out. I hope this quick tutorial helps you, if you ever need to make one, or anything else with a curve.

Adobe Illustrator CS5 Tutorial 28 | Neck Tie



Here we will draw a neck tie in Adobe Illustrator CS5. Very basic tutorial, this helps you get the feel of the program!

Adobe Illustrator CS5 Tutorial 29 | Candy Cane



In this Illustrator Tutorial we will make a Candy Cane! We'll use the line tool with a fat border, then we expand it. BAM! Then we draw inside it to give it some stripes, all so easy!

Adobe Illustrator CS5 Tutorial 30 | Christmas Tree



We make a simple Christmas Tree. The point of the tutorial is to show you the "Transform Each" tool and a quick way to get results faster than doing everything by hand. Since the tree is pretty plain I left it out of the downloads area, have fun!

llustrator - My Little Pony Tutorial



This was a request to draw hair on a G4 My Little Pony in Adobe Illustrator. I hope it helps! I tried to go at a slower pace and explain things better in this video, I hope that helps also. 

Adobe Illustrator CS5 Tutorial 37 | Appearances & Graphic Styles



In this Illustrator tutorial Ill show you a handy way to make use of the Appearances and Graphic styles, cheers!


Illustrator Chrome Logo Tutorial (36)



Here we play with a Layer Masks to accomplish the strange shape inside the Google Chrome Logo. I am using Adobe Illustrator CS5, but you can accomplish this in CS (or version 11).

Illustrator Text Tutorial: 3D Inverted (36)



A guy requested this on how to go about making some inverted text. This was one way you can do it, cheers.

Illustrator Tutorial (36) Glossy Shiny Orbs



In this tutorial we create some cool Glossy and Shiny Orbs in Illustrator!

Illustrator (36) Orbs!



We create some cool orbs in Illustrator!

Adobe Illustrator CS5 Tutorial 31 | Graphs & Charts



Graphs and Grids in Adobe Illustrator don't seem to get much buzz. In my opinion the options for them could be a lot better, but we can't change that so let's work with what we've got. I'll show you how to pop your design on your columns, and how to scale a special area if you need to.

Illustrator Tutorial (35) 3D Pac Man



We use a few tricks with Illustrator to accomplish a 3D pac man and ghost.

Adobe Illustrator CS5 Tutorial 34 | Sword



Some people requested a slower tutorial. Here is a tutorial of a vector sword. It's good practice to get used to thinking in shapes, mirroring things, and quickly manipulating them. Once you get good practice in shaping; You can worry about the fine detail. I have left the illustrator sword 1/2 way detailed. Add more details as you see fit. 

I hope you feel good and smile while you draw the sword, because Illustrator is fun and it makes me happy sometimes.

Adobe Illustrator CS5 Tutorial 33 | Mario Star



We'll use adobe illustrator cs5 to make a mario star, lol.

Adobe Illustrator CS5 Tutorial 32 | Batman Logo



We take a break from all the features and exercise our Pen Tool skills in Illustrator. Let's make the batman logo, very simple and easy, and we'll use a real image as a reference to trace it!

Saturday 19 May 2012

Photoshop CS5 Tutorial 16 | Remove Red Eye




Photoshop has a Red Eye tool, easy peezy. Except this example the red-eye is so bad it would need some more maintenance. However, in most cases this tool takes the turkey home and fixes the problem pretty well! Adobe Photoshop CS5 Remove Red Eye Tutorial 

Photoshop CS5 Tutorial 15 | Content Aware Scale




Photoshop's Content Aware Scale is actually available in CS4 as well. You can scale an image intelligently and keep objects within the image proportional to a much greater point. I'll demonstrate with 3 examples. Very good job Adobe you guys are smart! Adobe Photoshop CS5 Content Aware Scale Tutorial 

Photoshop CS5 Tutorial 14 | Content Aware Fill




We'll run some tests on this new content aware fill. It's surpisingly impressive! I tried some hard images to try and trick the thing, but try it for yourself it's a lot of fun to see what it makes :) Adobe Photoshop CS5 Content Aware Fill Tutorial 

Adobe Photoshop CS5 Tutorial 11 | Patterns



I'll show you how to define patterns because they are awesome. We'll first make a pixel pattern, apply a gradient to it, and layer mask it. Sounds confusing, but it's really very simple! Then we'll use a grass background as a pattern from the Blending Options. Get used to making your own patterns once and a while and you'll have more tricks up your sleeves when you run out of creative ideas!Adobe Photoshop CS5 Pattern Tutorial 

Adobe Photoshop CS5 Tutorial 13 | Puppet Warp



Photoshop CS5 Puppet Warp is a pretty neat feature. I'm not sure what I'd use it for, I've only played with it. But it does a pretty good job at warping something, I'm very impressed. It's easy to use and you wouldn't notice the CS5 feature if you didn't look for it! Adobe Photoshop CS5 Puppet Warp Tutorial 

Adobe Photoshop CS5 Tutorial 12 | Actions




This is a tutorial about Actions which will save you TONS of time! You MUST learn how to do this and you'll be very happy you did! Adobe Photoshop CS5 Actions Tutorial 

Adobe Photoshop CS5 Tutorial 10 | Select Tool



Here are most of the select tool features you should know. You don't have to be a master at them, but get familiar and you'll save yourself a lot of trouble in the future. There are many ways to select something, find out what works best for you! Adobe Photoshop CS5 Brush Tutorial 

Adobe Photoshop CS5 Tutorial 9 | Brush & Brushes Tools




In this example of Adobe Photoshop I'll be showing you the brush tools. There is much more than just a simple circle brush and you can do a lot of things with them. You should play around with the settings and have fun! If you have a tablet to draw on you'll have double the fun! Adobe Photoshop CS5 Brush Tutorial  

Adobe Photoshop CS5 Tutorial 8 | Image Effect & Style



Here we manipulate an image and use Layer Gradient Fades and improve the image. We also add some style and a background. Adobe Photoshop CS5 Image Effect Tutorial 

Adobe Photoshop CS5 Tutorial 7 | Image Touch Up




This will give you an idea on how to improve your photo's, it's actually pretty simple. The tools we'll be using and going over are: Clone Stamp Tool, Smudge Tool, Dodge Tool and Burn Tool. We'll quickly look at Sharpen Tool but there isn't much about it. 

In this example of Adobe Photoshop I'll be touching up a picture of Brittany Spears without makeup.Adobe Photoshop CS5 Touch up Tutorial 

Adobe Photoshop CS5 Tutorial 6 | Ribbon




In this tutorial I'll just show you how to make a ribbon. This time we'll introduce you to some Raster Image Warping. Hope it helps you become a better Photoshop user! Adobe Photoshop CS5 Ribbon Tutorial 

Adobe Photoshop CS5 Tutorial 5 | Website Layout Intro




Here i take a screenshot of Digg.com (Just for the sake of an example), and show you how you can trace things to build a layout. We'll lightly touch on the slice tool, this should help you get started and learn by example! Adobe Photoshop CS5 Website layout Tutorial 

Adobe Photoshop CS5 Tutorial 4 | Drawing a Pig




So let's draw a pig in photoshop. Try to practice the hotkeys, I keep bringing them up because you'll save SO MUCH TIME by memorizing them, Very important! You won't regret it! I'd suggest Illustrator if you plan on doing illustrations, but this is fine if you need something simple and a fixed size. Adobe Photoshop CS5 Pig Tutorial 

Adobe Photoshop CS5 Tutorial 3 | Designing a Web Image




We are going to jump right in and play around, and make an image that would work with the web. You don't have to follow along exactly, but if you see what I'm doing it'll help you realize how things work around this part of town, LOL. Adobe Photoshop CS5 Web Image Tutorial 

Adobe Photoshop CS5 Tutorial 2 | Hotkeys & Layers



Learn these Hotkeys, force yourself to make a habit so you always use them! Then Ill show you some work with layers, it's really pretty easy. Adobe Photoshop Hotkeys and Layers Tutorial 

Adobe Photoshop CS5 Tutorial 1 | Quickstart!



I just rush through the extremely basic things, I don't think you guys are monkeys and this is pretty easy to pickup very fast, learn by a short quick example :) Adobe Photoshop CS5 Quickstart!

HTML 5 Canvas Quickstart



In this HTML 5 Tutorial Ill teach you how to use HTML 5 Canvas to draw on. I hope to expand the canvas tutorials into something more interesting, but this is a good starting point.

3ds Max Tutorial | Quickstart




We jump right into a 3ds Max tutorial and play with a polygon in order to create a 3d object.

Blender Beginner Tutorial




This is a tutorial for Blender 2.5 for beginners. 



Get used to these Blender 2.5 Hotkeys, they are for beginners and will help you move around and get started!
Mouse
------------------------------
Select Item: Right Click
Zoom:  Scroll Wheel Slide
Rotate:  Scroll Wheel Btn
Pan:  Shift + Scroll Wheel Btn

Moving Around (Numpad):
------------------------------
Top: 7
Front: 1
Right: 3

Toggle: 5 (Perspective/Ortho)
Moving Camera: 8, 4, 6, 2 

Manipulating Objects:
G: Move*
R: Rotate*
S: Scale*

 *Options:
 Press X Y or Z to handle them along a specific axis.
 Press Shift + X Y or Z to handle them along 2 specific axis's.
 
Toggle Panes
------------------------------
N: Toggle Object Properties Pane
T: Toggle Toolbar Pane

Adding Objects:
------------------------------
Add Objects: Shift + A

CodeIgniter DbForge Setup Script | 2




We'll go through using CodeIgniter's DBForge for creating a Setup Script. We will configure the Database and Autoloading. Lastly we will use the URL and Form Helpers. With practice, things get easier!

CodeIgniter Quickstart | 1




This will be the beginning of a series on using Code Igniter! Version 2+

Expression Engine Quickstart Tutorial



This is a Expression Engine Video Tutorial with for version 2.2.2. This is mainly a quick-start to get you off on your feet.

Linux Terminal Tutorial - 4



We learn to how to output text and commands to a file. We use the History command, we practice the PIPE "|" for multiple commands, and we also toggle a little bit of chkconfig to get our feet wet.

Linux Terminal Tutoral - 3



Linux Terminal Tutorial. Add a user, Remove a user, Prevent Root Login, Learn /etc/init.d Commands

Linux Terminal Tutoral - 2



Linux Terminal Tutorial. Change Password, Moving Files, Renaming Files, Creating Files, Copy Files, Using Nano Text Editor, Cancelling Operations, Updating System.

Linux Terminal Tutoral - 1



This is a series of Linux Terminal Tutorials to get you started. Listing Directories, Moving through Directories, Print Working Directory, Make Directory, Remove Directory, Remove Files.

Amazon EC2 Setup Tutorial



This is a quickstart tutorial for Amazon EC2. 
To get PuTTy/PuTTyGen: http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

Rackspace Cloud Server Quickstart





I'll show you how to create a cloud server instance, get into SSH, setup your DNS, change your sshd_config and iptables for a added security, and install Virtualmin to run multiple sites easily. 
Things you need: Rackspace Account, PuTTy, Domain Name (optional) 
Note: You will probably want to look into other security options also such as a Public/Private Key for SSH.