كيفية تصميم موقع احترافي بالفوتو شوب [الأرشيف]

مشاهدة النسخة كاملة : كيفية تصميم موقع احترافي بالفوتو شوب

la_fontaine25

25-07-2007, 06:50 PM

اقدم لكم درس تصميم فوتشوب احترافي

مع الشرح بالصور

نبدأ الدرس على بركة الله ,,

1- افتح الفوتوشوب وعمل صفحه جديده من new او جديد وختر القياسات 777 * 555 او على حسب رغبتك لاحظ الصور

http://up-00.com/uploads/9c0aa6c664.gif (http://up-00.com)

2- نأتي بالصوره التى نريد ان نضعها خلفيه بالضغط على open او فتح ونختار الصوره من جهازنا ثم نسحبها الى منطقة العمل وهنا اخترت خلفية الورود لاحظ الصور

http://up-00.com/uploads/2a7f4708e5.gif (http://up-00.com)
http://up-00.com/uploads/a6efd9415b.gif (http://up-00.com)

3- نضغط على CTRL + T ونسحب اطراف التحديد للصوره حتى نغطي الصفحة بها لاحظ الصوره

http://up-00.com/uploads/f5bb2b1cd7.gif (http://up-00.com)

4- بعد ان نغطي الصفحة البيضاء بالصوره نضغط انتر لأزالت التحديد ثم نذهب الى filter >>> blur >>> radial blur ونطبق الخيارات كما بالصور :

http://up-00.com/uploads/a176ab0382.gif (http://up-00.com)
http://up-00.com/uploads/39afc1b46c.gif (http://up-00.com)

5- ستلاحظ ان الصوره اصبحت كالأشعاع ثم نبداء بوضع بنر او مربع عنوان الموقع وسيكون الشرح بالصور تابع :

http://up-00.com/uploads/1da3b51c61.gif (http://up-00.com)

6- ثم نطبق فلتر على المربع الذي رسمناه والفلتر هو كما بالصوره

http://up-00.com/uploads/45a57abc91.gif (http://up-00.com)

7- تظهر رسالة تفيد أن الشكل سيحدث به تغيرات المهم انت اضغط ok

http://up-00.com/uploads/7eef44b1c4.gif (http://up-00.com)

8- ضع خيارات الفلتر كما بالصوره

http://up-00.com/uploads/bf15df956f.gif (http://up-00.com)

9- بعد اعطاء البنر انحناء نعطيه تأثير الضل من اسفل قائمة اللير نختار كما بالصوره

http://up-00.com/uploads/78bac60e17.gif (http://up-00.com)

10- نضع الخيارات كما بالصوره

http://up-00.com/uploads/7825b5bd04.gif (http://up-00.com)

11- الأن نريد وضع خلفية للبنر او مربع عنوان الموقع .. نضغط فتح ثم نختار صوره ونسحبها الى منطقة العمل كما شرحنا قبل
ونغطي بالصوره ثلاث ارباع البنر بالضغط على CTRL+T وسحبها الى الوضع المطلوب لاحظ الصوره

http://up-00.com/uploads/eac38f0e9c.gif (http://up-00.com)

12- الأن اضغط انتر لأزالت التحديد ... الأن نريد دمج الصوره مع البنر بحيث تكون الصوره داخل اطار البنر فقط .. وركز في هذه الخطوه
سيكون شرحها بالصور افضل :

http://up-00.com/uploads/ee06ee3def.gif (http://up-00.com)

13- الان اجعل التحديد على خلفية البنر واقصد بالتحديد اللون الازرق الواضح على الصوره التي تتحكم بها وهي الصوره الأولى ويجب ان تكون
فوق البنر وليس تحته الأن اضغط الأختصار CTRL+G وهذه
الخطوه لدمج الخلفيه مع البنر وجعلها داخل حدود البنر فقط .. حركها لتعرف معنى كلامي .. بعد عمل الازم ستلاحظ وجود سهم صغير يدل على
دمج الصوره مع البنر لاحظ الصوره :

http://up-00.com/uploads/2da966d346.gif (http://up-00.com)

14- الأن نريد تغيير لون خلفية البنر لتتناسب مع لون البنر وذلك بالضغط على CTRL+U وقم بعمل
نفس الأعدادات بالصوره :

http://up-00.com/uploads/ab15beb87f.gif (http://up-00.com)

15- الأن نريد وضع صوره داخل شكل جميل وتكون بالزاويه على اليمين للموقع .. نختار شكل من الاشكال الجاهزه عندنا او فرشاه
وليكن شكل ويمكن الحصول عليه بالضغط بالزر الأيمن على المربع وختيار اخر شكل من بين المجموعه.. تابع الصور :

http://up-00.com/uploads/d7a3e2bada.gif (http://up-00.com)

la_fontaine25

25-07-2007, 06:51 PM

تابع الموضوع السابق ....

16- بعد الحصول على الشكل المطلوب وليكن قلب مثلا .. نأتي بالصوره التي نريد دمجها معه ونضع الصوره فوق الشكل وندمجها بالضغط
على CTRL+G كما علمنا سابقا .. الأن نريد تحريك الشكل مع الصوره الى المكان المناسب ويم تحريكهما معاً بربطهما معاً
وذلك يتم كما بالصوره :

http://up-00.com/uploads/96f32b6b2c.gif (http://up-00.com)

17- ونحرك الشكل الذى عملناه وهو قلب داخله صورة بنت الى الجهه اليمني من البنر
ونعطيه بعض التاثيرات مثل الضل او على حسب الرغبه كما تعلمنا تاثير الضل سابقاً
سيصبح شكل الموقع حتى الأن تقريباً كما بالصوره :

http://up-00.com/uploads/c3594c8622.gif (http://up-00.com)

18- نرسم مربع بالنص من ادات المربع بشريط الأدوات ونعطيها تأثير الضل كما عرفناه لاحظ

http://up-00.com/uploads/e5ef6493ac.gif (http://up-00.com)
http://up-00.com/uploads/7952e91b17.gif (http://up-00.com)

19- ونكتب فوقه كلمة chat او دخول الزوار او اي كلمة ترغب بها ونعمل لها تأثيرات كما في الصوره ماعليك الاوضع علامة صح امام الخيارات التي امامك

http://up-00.com/uploads/086366cc01.gif (http://up-00.com)
http://up-00.com/uploads/6148d1e41f.gif (http://up-00.com)

20- نضع فراشه او قلوب او ايقونات او حتى صوره ونمسح اطرافها لمربع الشات حتى تعطيه منظر جذاب
وطبعا كلمه chat نغير لونها الأسود الى اي لون متناسق مع الموقع لاحظ بعد التعديلات .. مع اضافة بعض
اللمسات من الفرش الجاهزه لبرنامج الفوتوشوب

http://up-00.com/uploads/e71a7947ad.gif (http://up-00.com)

21- الان نكتب عنوان الموقع ونعطيه نفس تأثيرات كلمة شات التي عملناها سابقاً ونزيد عليها بتمويج العنوان ليكون بارزاً عند دخول الموقع
وهذا عند الضغط على زر الكتابه انضر فوق بالزاويه اليمنى للفوتوشوب تلاحظ وجود زر حرف T وتحته انحناء
لاحظ الشرح بالصور

http://up-00.com/uploads/8452347b1a.gif (http://up-00.com)

22- وعند الضغط عليها يتم عرض مربع ومنه تختار اي شكل يعجبك مع امكانية سحب اشرطة التمرير وتغيير الشكل
ليتناسب مع الوضع الذي تريد لاحظ الصوره

http://up-00.com/uploads/282fe5b9ce.gif (http://up-00.com)

23- بعد التعديلات على اسم الموقع ووضعه بالبنر بالحجم المناسب للموقع ...... لم يبقى لنا الا الأزرار
وهذه تتم بعمل زر واحد ونسخه لأكثر من نسخه على حسب عدد الأزرار بموقعك
نبداء بعمل مستطيل ثم نقوم بمسح احد الاطراف بالممحاه مسحاً خفيفاً حتى يكون متدرجاً بالمسح
اي يكون احد الاطراف واضح والطرف الاخر خفيف ونضع عند الطرف الواضح اي شكل
لعطي الزر شكلا جميلا مثلا نختار القلب المحدد فقط كما بالصور :

http://up-00.com/uploads/2b1f2f0d59.gif (http://up-00.com)

بعد الإنتهاء من العمل ,, يصبح لديك الشكل جاهز كما هو موضح في الصورة النهائية :

http://up-00.com/uploads/536d594289.gif (http://up-00.com)

أرجو أن تكونوا قد إستمتعتم بهذا الموضوع

تحياتي لكم ,,

شكرا

رجاوى الشوق

28-07-2007, 01:39 PM

مشكور اخوى على الشرح

الله يعطيك العافية

la_fontaine25

28-07-2007, 07:28 PM

شكرا على مرورك الكريم أخت رجاوي الشوق

المهداوي

28-07-2007, 08:50 PM

مشكور على الشرح والصور المفصلة والمفيدة خوي

la_fontaine25

28-07-2007, 10:17 PM

شكرا على مرورك الطيب أخي و شكرا على نشاطك و ردودك الطيبة

أبو محمد

29-07-2007, 05:15 AM

ياسلام عليك

بارك الله فيك فعلا موضوع جميل ويستحق المشاركة
جزاك الله كل خير

la_fontaine25

29-07-2007, 11:12 AM

شكرا على مرورك الكريم أخي ابو محمد

تقبل تحياتي

palforsan

31-07-2007, 05:51 AM

اخى الكريم مشكور كتير

ودرس كتير حلو وفى الفايده ان شاء الله

جارى التطبيق بإزن الله

ولنا عوده بعد التطبيق تحياتى

اخوك

محمد

la_fontaine25

31-07-2007, 05:56 AM

في البداية أخي palforsan ( محمد ) أهلا بك في منتدى صلالة

راجين من الله ان نكون عند حسن ظنك بنا

و شكرا جزيلا على مرورك الكريم

تقبل تحياتي

palforsan

01-08-2007, 02:38 AM

أخوى أنا طبقت الدرس

http://www.palforsan.com/wisam/1233.jpg

وهى الى طلع معايا :)

أتمنى ان تنال اعحاب الجميع

تحياتى

أخوكم محمد

عطور الوادي

10-09-2007, 09:05 PM

la_fontaine25

10-09-2007, 10:23 PM

أخوى أنا طبقت الدرس

http://www.palforsan.com/wisam/1233.jpg

وهى الى طلع معايا :)

أتمنى ان تنال اعحاب الجميع

تحياتى

أخوكم محمد

تسلم ايدك اخي palforsan

مشكووووووووووووور على الاهتمام

تقبل تحياتي ....

la_fontaine25

10-09-2007, 10:28 PM

g hf

ممكن مساعده

ماعرفت ادمج الليرات

مع اني مشيت ع النصايح والخطوات

ملاحظة :: اصدار الفوتوشوب هو ::

Adobe Photoshop Version: 9.0 (9.0x506)

و الويندووز :
Operating System: Windows XP
Version: 5.1 Service Pack 2

وهاي صورة للمشكله

http://www.dhofari.com/attachment.php?attachmentid=8246&d=1189443519

مفيش اي مشكلة بإذن الله

بس بصراحة انا ما اشتغلت قبل كده على اصدار 9 من الفوتو شوب

اشتغلت على 7.0 ME و اشتغلت على 8.0CS

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

حددي الـ Layers المراد دمجها مع بعضه البعض

و اضغطي على لحة المفاتيح زر CTRL + E

و تصميم رائع منك

شكرا لكي اختي الكريمة و تقبلي تحياتي ....

محمود سليمان

17-09-2007, 03:34 PM

http://up-00.com/uploads/bed8e07085.gif (http://up-00.com)