منتديات المعلم القدوة التعليمية
منتديات المعلم القدوة التعليمية
منتديات تعليمية

انضم إلى المنتدى ، فالأمر سريع وسهل

منتديات المعلم القدوة التعليمية
منتديات المعلم القدوة التعليمية
منتديات تعليمية
منتديات المعلم القدوة التعليمية
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

اذهب الى الأسفل
عادل عبد الله
عادل عبد الله
عضو نشيط
عضو نشيط
ذكر عدد المساهمات : 45809
نقاط : 252752
تاريخ التسجيل : 05/04/2010
العمر : 49
الموقع : http://nahdtmesr75.blogspot.com/
يارب احفظ مصر

http://http:/kodwa1.com

شرح تصميم موقع احترافي بالفوتوشوب Empty شرح تصميم موقع احترافي بالفوتوشوب

الخميس 07 يوليو 2011, 16:39
شرح مفصل عن تصميم موقع احترافي بالفوتوشوب من الألف الى الياء وبالتفصيل الممل
والشرح بالصور ..........

ولا يقتصر التصميم على هذا الشرح فلا مانع من الزياده
عليه حتى تجعل من موقعك تحفة فنيه
قبل البدء نقوم بعرض الشكل النهائي التقريبي للموقع


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نبـــــــداء الدرس على بركة الله ,,,,,,,,,,,,,,,,,,!!!!!
افتح الفوتوشوب وعمل صفحه جديده من new او جديد وختر القياسات 777 * 555 او على حسب رغبتك لاحظ الصور :::

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نأتي بالصوره التى نريد ان نضعها خلفيه بالضغط على open او فتح ونختار
الصوره من جهازنا ثم نسحبها الى منطقة العمل وهنا اخترت خلفية الورود لاحظ
الصور
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نضغط على CTRL + T ونسحب اطراف التحديد للصوره حتى نغطي الصفحة بها لاحظ الصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعد ان نغطي الصفحة البيضاء بالصوره نضغط انتر لأزالت التحديد ثم نذهب الى
filter >>> blur >>> radial blur ونطبق الخيارات كما
بالصوره :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ستلاحظ ان الصوره اصبحت كالأشعاع ثم نبداء بوضع بنر او مربع عنوان الموقع وسيكون الشرح بالصور تابع :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثم نطبق فلتر على المربع الذي رسمناه والفلتر هو كما بالصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
تظهر رسالة تفيد أن الشكل سيحدث به تغيرات المهم انت اضغط ok

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ضع خيارات الفلتر كما بالصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعد اعطاء البنر انحناء نعطيه تأثير الضل من اسفل قائمة اللير نختار كما بالصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نضع الخيارات كما بالصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الأن نريد وضع خلفية للبنر او مربع عنوان الموقع .. نضغط فتح ثم نختار صوره ونسحبها الى منطقة العمل كما شرحنا قبل
ونغطي بالصوره ثلاث ارباع البنر بالضغط على CTRL+T وسحبها الى الوضع المطلوب لاحظ الصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الأن اضغط انتر لأزالت التحديد ... الأن نريد دمج الصوره مع البنر بحيث تكون الصوره داخل اطار البنر فقط .. وركز في هذه الخطوه
سيكون شرحها بالصور افضل :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الان اجعل التحديد على خلفية البنر واقصد بالتحديد اللون الازرق الواضح على الصوره التي تتحكم بها وهي الصوره الأولى ويجب ان تكون
فوق البنر وليس تحته الأن اضغط الأختصار CTRL+G وهذه
الخطوه لدمج الخلفيه مع البنر وجعلها داخل حدود البنر فقط .. حركها لتعرف معنى كلامي .. بعد عمل الازم ستلاحظ وجود سهم صغير يدل على
دمج الصوره مع البنر لاحظ الصوره :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الأن نريد تغيير لون خلفية البنر لتتناسب مع لون البنر وذلك بالضغط على CTRL+U وقم بعمل
نفس الأعدادات بالصوره :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الأن نريد وضع صوره داخل شكل جميل وتكون بالزاويه على اليمين للموقع .. نختار شكل من الاشكال الجاهزه عندنا او فرشاه
وليكن شكل ويمكن الحصول عليه بالضغط بالزر الأيمن على المربع وختيار اخر شكل من بين المجموعه.. تابع الصور :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعد الحصول على الشكل المطلوب وليكن قلب مثلا .. نأتي بالصوره التي نريد دمجها معه ونضع الصوره فوق الشكل وندمجها بالضغط
على CTRL+G كما علمنا سابقا .. الأن نريد تحريك الشكل مع الصوره الى المكان المناسب ويم تحريكهما معاً بربطهما معاً
وذلك يتم كما بالصوره :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ونحرك الشكل الذى عملناه وهو قلب داخله صورة بنت الى الجهه اليمني من البنر
ونعطيه بعض التاثيرات مثل الضل او على حسب الرغبه كما تعلمنا تاثير الضل سابقاً
سيصبح شكل الموقع حتى الأن تقريباً كما بالصوره :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نرسم مربع بالنص من ادات المربع بشريط الأدوات ونعطيها تأثير الضل كما عرفناه لاحظ
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ونكتب فوقه كلمة chat او دخول الزوار او اي كلمة ترغب بها ونعمل لها
تأثيرات كما في الصوره ماعليك الاوضع علامة صح امام الخيارات التي امامك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نضع فراشه او قلوب او ايقونات او حتى صوره ونمسح اطرافها لمربع الشات حتى تعطيه منظر جذاب
وطبعا كلمه chat نغير لونها الأسود الى اي لون متناسق مع الموقع لاحظ بعد التعديلات .. مع اضافة بعض

اللمسات من الفرش الجاهزه لبرنامج الفوتوشوب
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الان نكتب عنوان الموقع ونعطيه نفس تأثيرات كلمة شات التي عملناها سابقاً ونزيد عليها بتمويج العنوان ليكون بارزاً عند دخول الموقع



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

تحياتي

________________________________________________
جاري تحميل مناهج 2024 كل الفرق
عادل عبد الله
عادل عبد الله
عضو نشيط
عضو نشيط
ذكر عدد المساهمات : 45809
نقاط : 252752
تاريخ التسجيل : 05/04/2010
العمر : 49
الموقع : http://nahdtmesr75.blogspot.com/
يارب احفظ مصر

http://http:/kodwa1.com

شرح تصميم موقع احترافي بالفوتوشوب Empty رد: شرح تصميم موقع احترافي بالفوتوشوب

الخميس 07 يوليو 2011, 16:42
أنا دلوقتي هشرح ازاي نخلي الواجهة في منتصف الصفحة

وازاي نضيف روابط

أول حاجة لازم يكون عندنا برنامج الفرونت بيج


وبعدين

بنفتح صاحبنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
وبعد ما تدخل عليه اضغط على [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
وامسح كل هذه الكتابات
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]This image has been resized. Click this bar to view the full image. The original image is sized 787x325.

بعدين اضغط على Design
واضغط على [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الموجودة فوق
واختار 3 خانات
ملاحظة هذه الخانات يكون عددها حيب التقطيع وأنا اخترت 3 لاني قسمت الهيدر لـ3 صور
طبعاً رح يطلعلنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
طيب هذا الجدول ما بيمشي حاله بالواجهة
شوووووو الحل؟؟؟؟
اقولك...اضغط كليك يمين
وبعدين Table Properties...
واعمل التعديلات التالية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
طيب شو بقي؟؟؟
اللي بقي هو وضع الصور بالجدول
طيب كيف؟؟؟؟
اضغط على أول خانة يعني خلي مؤشر الكتابة يصير فيها ثم اضغط على [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
شوفو أنا عملت الهيدر بالجدول
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]This image has been resized. Click this bar to view the full image. The original image is sized 782x216.

طبعاً طبقو هذا الشي على كل الجداول اللي رح تدرجوها
وما تنسو ان عدد خانات الجدول بيكونو على حسب عدد الصور وقت التقطيع
طيب انتو بنضركم الواجهة حلوة تكون مو بمنتصف الصفحة؟؟؟؟؟
طبعاً الجواب لااااااااا
طيب كيف بتصير بالمنتصف؟؟؟؟؟
سهههههههههههلة
اضغط على جدول الهيدر كليك يمين وبعدين اضغط على Table Properties...
وغير ما يلي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ووووووو خلي الصورة تحكي

طيب شو بقي يا شاطريييييييييين؟؟؟؟؟؟
الروااااااابط
طيب كيف بنضيف ارتباط على الصورة
سهههههههلة
طبعاً نحنا بدنا نعمل روابط على صور الأزرار
طيب كيف؟؟؟؟؟
حدد الصورة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
وبعدين اضغط على
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
واعمل التالي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
موفقيييييييييييين
وأي استفسار انا هون

________________________________________________
جاري تحميل مناهج 2024 كل الفرق
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى