المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : درس تصميم ايقونه ::1::


عبدالكريم البراهيمي
12-06-2009, 01:45 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخوتي الكرام الافاضل اتقدكم لكم بي درس معرب وهو كيفية تصميم ايقونه

وهذا مثل لي الدرس الايقونه

http://www.psdesignzone.com/images/photoshopicon/gt.jpg

بسم الله
Step 1:
First create a new Photoshop ******** 16x16 pixels in size:
اولاً:
ننشأ عمل جديد بالمقاسات 16 ×16 بالفتوشوب

http://www.psdesignzone.com/images/photoshopicon/create.png

Step 2:
First pull out the pencil tool (you'll be using this alot) and set your foreground color to: #7C7C7C, Zoom in as far as you can zoom in and use the pencil tool to draw out an image like below:

ثانياً:
اختر اداة القلم الرصاص http://www.psdesignzone.com/images/photoshopicon/pencil.pngوجعل كود الون الامامي هكذا#7C7C7C
وقم بالشكل الاتي مع مراعات التكبير لي اخر درجه عشان تقدار تشوف التصميم واضح

http://www.psdesignzone.com/images/photoshopicon/outline.png

Step 3:
Next set your foreground color to white and fill in the areas where the paper would be **BE SURE TO TURN OFF ANTI-ALIASED IN THE TOP RIGHT OF PHOTOSHOP

ثالثاً:
خذ اداة التعبئه وجعلها باللون الابيض وجعلها كما في الصوره


http://www.psdesignzone.com/images/photoshopicon/withwhite.png
Step 4:
Now pull out your pencil tool again and set your foreground color to #C2C2C2 and draw a shape like below:


رابعاً:
اختر اداة القلم الرصاصhttp://www.psdesignzone.com/images/photoshopicon/pencil.png واجعل الون الاماميC2C2C2 واسحب على الشكل الي تحت الي في الصوره

http://www.psdesignzone.com/images/photoshopicon/shade.png


Step 5:(optional but recommended)
Zoom out sit back relax and enjoy the results of your work so far (*^_^*)

خامساً:
صغر التصميم الى 100 لكي تراها بالحجمها الطبيعي

كما في الصوره

http://www.psdesignzone.com/images/photoshopicon/sofar.png


Step 6:
Now create a new layer and with the pencil tool and foreground color set too #242424 draw out a rectangle like below:

سادساً:
سوي طبقه جديده وبي اداة القلم الرصاص سوي كالاتي ولكن الالوان الامامي يكون #242424

كما موضح بالصوره


http://www.psdesignzone.com/images/photoshopicon/leftcorner.png


Step 7:
Create another layer and use the pencil tool to fill in the area inside of the upper left rectangle with #3E9FE0

سابعاً:

سوي طبقه اخرى جديده وبي اداة القلم الرصاص اجل الالوان #3E9FE0 وبعدها لون بي اداة القلم الرصاص


http://www.psdesignzone.com/images/photoshopicon/withblue.png

Step 8:
Now apply the following Gradient Overlay to the layer.

ثمانيه:
اجعل التاثيرات كما موضح بالصوره التاليه

على الطبقه الي سوينا عليها لون ازرق في الخطوه السابعه

http://www.psdesignzone.com/images/photoshopicon/grad.png


http://www.psdesignzone.com/images/photoshopicon/grad2.png


Which should produce:

الذي يجب ان ينتج معك


http://www.psdesignzone.com/images/photoshopicon/withgrad.png

Step 9:
Now you need to insert the **** 'PS' for Photoshop, use a System font like System, or MS Sans-serif, set the font to really small and the Anti-Aliasing of **** to 'None' Type in PS (believe me, it says PS down there). If you can't find a font that works then just draw out the white shapes with the pencil tool.

وبي الاداة القلم الرصاص او الخطوط النظام او اي شيء مع مراعاة اجعل الاوان ابيض وسوي مثل كذا في الصوره

http://www.psdesignzone.com/images/photoshopicon/ps.png



صغر العمل وراح تشوفه مثل كذا

http://www.psdesignzone.com/images/photoshopicon/veryclose.png


Step 10:
Last thing to do is insert the Photoshop Feather, download the feather below by right clicking and selecting 'Save Image As' or 'Save Picture As', save it to your hard drive then open it in photoshop:

هذا الريشه هي التي تعني لك ان هذه الايقونه لي الفتوشوب ويمديك تجيبها من الجهاز هذه هي الصوره

http://www.psdesignzone.com/images/photoshopicon/feather.png

Copy the image and paste it into your icon on a layer directly under the layer with the 'PS' box on it, but above the paper part in the backgroud,go to Edit > Transform (ctrl+t) so that you can resize the feather to a size that fits inside of the paper:

بعدها اوضع الريشه لي تصميمك ولكن اجعلها في الخلفيه الصندوق الطبقه وبعدها ctrl+t راح يتكبر وشوف في الصوره كيف


http://www.psdesignzone.com/images/photoshopicon/withfeather.png


وراح يطلع معك كذا


http://www.psdesignzone.com/images/photoshopicon/final.png


But don't stop there! Use your newfound pixel skills to do other cool stuff http://www.traidnt.net/vb/images/smilies/cupidarrow.gif

لكن لا يتوقف التصميم في هذه النقطه لا بل يوجد اشياء كثيره انت تستطيع عملها

مثال
http://www.psdesignzone.com/images/photoshopicon/skills.png



وسلملم
تعريب الدرس طالب جدي
وسلملم

¨°o.O طالت دروبي O.o°¨
12-06-2009, 01:46 PM
يعطيك الف عافيه اخوي

ورده النيل
12-06-2009, 02:04 PM
الف شكر اخي

تقبل مروري

my love""r777d
12-06-2009, 02:55 PM
يعطيك ربي الع ـافيه
تقبل طلتي