دروس دورة تصميم استايل للمبتدئين

<HR style="COLOR: #c8d097" SIZE=1>

اهلا ومرحبا بحضراتكم في ::

الدرس الاول : دورة تصميم استايل للمبتدئين

المقدم من معهد رفيق الخير

اولا جميعنا نسطب برنامج فوتوشوب الخاص بنا ثم نفتحه كأي برنامج

وبعد فتح البرنامج ؛ سوف نفتح عمل جديد كالتالي :

نتجه الى اعلى يسار البرنامج ونختار file او ملف ؛ ثم نختار new او جديد كالتالي :

ستظهر لنا اللوحة التاليه :

كما شاهدنا المربعات الحمراء من فوق لاسفل

(اسم العمل - المقاسات والافضل 777*600 - اللون الابيض للخلفيه ) ؛

وبعد ذلك نضغط على ok او موافق ليصبح العمل ان شاء الله كالتالي :

سوف نقوم الان بعمل layer او طبقه جديده

ومن الان نتعود على اننا عندما نقوم بعمل اي شيء جديد يكون في لير جديد ؛

ونتابع معا كيفية عمل لير او طبقه جديده

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

سنضغط عليه ليظهر لنا اللير الجديد كالتالي ::

وبالضغط على المساحه الزرقاء التي في اللير مرتين يمكننا تغيير الاسم

كما راينا في الصورة السابقه وكتبنا ( الخلفيه ) ؛

الان سوف نملئ خلفيه الاستايل باللون الخاص بها وهذا من خلال هذه الاداة :

نضغط على اول مربع من الاداة المشار اليها بالمربع الاحمر في الصورة السابقه

ثم نختار اللون المراد ملئ خلفيه الاستايل به وهذا ما اخترته مثلا :

ثم بعد الاختيار نضغط ok او موافق ؛

ثم نتجه الى هذه الاداة ونضغط عليها ::

ثم نذهب الى الخلفيه و نكب بها اللون بالضغط كليك شمال فقط

لتصبح الخلفيه كالتالي ان شاء الله ::

والان سننشأ لير او طبقه جديده كما تعلمنا ونسميها هذه المرة هيدر كالتالي ::

وهذه الطبقه هي راس الاستايل او البنر العلوي ؛

ثم نختار هذه الاداه المشار اليها بالمربع الاحمر ( اداه التحديد ) :

وبعد ذلك نتجه الى اعلى التصميم الخاص بنا ونسحب من اليمين الى اليسار مستطيل كالتالي ::

ليكون البنر العلوي او الهيدر header الخاص بنا

ثم نملئه باي لون اخر وانا اخترت الاحمر كالتالي

ليصبح الشكل كالتالي ان شاء الله ::

الان ادرجنا الهيدر ولكنه لون فقط دون تاثيرات

سوف نضع التاثيرات حالا باذن الله ..

وانت معلم بالازرق على طبقه الهيدر اذهب الى الاداة المشار اليها باللون الاحمر كالتالي :

ثم تختار منها blending options كما شاهدنا بالصورة السابقه

لتظهر لنا اللوحة التاليه باذن الله ::

سنختار stroke كما شاهدنا لعمل تحديد للهيدر ؛

ونعطي نفس القيم التي شاهدناها بالصورة السابقه ..

ثم نختار gradient overlay ونعطي نفس القيم كالتالي ان شاء الله ::

ثم نضغط موافق لترى ان الهيدر اصبح شكله جميل عما سبق نوعا ما والحمد لله ..

الان سوف ننشأ طبقة الفوتر وهي الطبقه السفليه للاستايل كالتلي ::

ثم باداه التحديد التي ذكرناها من قبل عندما رسمنا الهيدر نرسم الفوتر

ثم باداه التلوين نكب اللون في الفوتر مثل الذي اخترناه للهيدر

ليصبح العمل كالتالي ان شاء الله تعالى ...

الان نريد تطبيق نفس اعدادات تجميل الهيدر للفوتر

سنذهب الى طبقه الهيدر ونضغط بالماوس كليك يمين

ونختار copy layer style كالتالي ::

ثم نذهب الى الفوتر ونضغط بالماوس كليك يمين ونختار paste layer style كالتالي :

ليصبح الشكل كالتالي باذن الله تعالى ::

والان نحفظ العمل على صيغه

psd

حت نعمل به في وقت لاحق وهذا من خلال

file>save

وتحفظ العمل بصيغه psd في اي مكان بالجهاز لديك

وبكده نكون الحمد لله قد انتهينا من الدرس الاول في دورة تصميم استايل للمبتدئين ..

ولا تنسوا اهم شيء ان ارى التطبيق العملي الخاص بحضراتكم

والى اللقاء في الدرس الثاني باذن الله ..

اهلا ومرحبا بحضراتكم في ::

الدرس الثاني : دورة تصميم استايل للمبتدئين

توقفنا في الدرس الاول عند هذا الشكل

دروس دورة تصميم استايل للمبتدئين 22

وفي الدرس الثاني هذا سوف نتعرف على أداة الباث وكيفية استخدامها

وايضا سنتعرف على الباترون وكيفيه استخدامه ان شاء الله

فتابعوا معي ؛

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

دروس دورة تصميم استايل للمبتدئين 001

ثم نذهب الى العمل ونضغط

ctrl+"

لتعطي لنا شكل الشبكة على العمل كالتالي :

دروس دورة تصميم استايل للمبتدئين 002

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

ونبدا بوضع النقاط بواسطه اداة الباث ؛

ولوضع نقطه وانت معلم على اداة الباث تضغط كليك شمال بالماوس في المكان المحدد لوضع النقطه ؛

تابعوا معي ..

نذهب الى اعلى يمين الهيدر ونضع نقطه وبعدها ب خليتين او 3 نضع اخرى على ان تكون محازة للسابقه افقي وهذا كالاتي ::

دروس دورة تصميم استايل للمبتدئين 003

ثم نضع نقطه باسفل من السابقه وبميل كالتالي ::

دروس دورة تصميم استايل للمبتدئين 004

ثم نقطه اخرى في نفس محازاه السابقه افقيا ولكن في اخر يسار الهيدر كالتالي ::

دروس دورة تصميم استايل للمبتدئين 005

ثم اسفل منها بنقطه لتحازيها راسي كالتالي ::

دروس دورة تصميم استايل للمبتدئين 006

ثم نقطه اخرى الى اخر يمين الهيدر كالتالي ::

دروس دورة تصميم استايل للمبتدئين 007

ثم تضغط على اول نقطه بدأنا بها لنغلق الرسم والحمد لله ليصبح الشكل كالتالي ::

دروس دورة تصميم استايل للمبتدئين 008

نذهب الى لير الرسم ونضغط كليك يمين بالماوس ونختار

rasterize layer كالتالي ::

دروس دورة تصميم استايل للمبتدئين 009

ثم نسميها لوجو ليصبح شكل اللير كالتالي ان شاء الله ::

دروس دورة تصميم استايل للمبتدئين 010

والان سوف نضع باترون على الشكل الذي رسمناه بأداه الباث فتابعوا معي ..

نقوم بالتعليم على اللير ثم ندخل الى

كما تعلمنا blending options

دروس دورة تصميم استايل للمبتدئين 015

وهذه المرة نختار

Bevel and Emboss ومنها نختار Texture

وسوف نضيف باترون جديد الان غير الموجودين

للتحميل اذكر الله ثم اضغط هنا

http://www.traidnt.net/vb/attachment...5&d=1196397387

وباسورد فك الضغط هو

www.r-khair.net

تابع شرح تركيبه ؛

دروس دورة تصميم استايل للمبتدئين 011

ستفتح لنا قائمه منها ندخل الى الجهاز لنختار الباترون الذي حملناه كالتالي :

دروس دورة تصميم استايل للمبتدئين 012

ثم نضغط load

ثم نختار الشكل التالي مع القياسات التاليه

دروس دورة تصميم استايل للمبتدئين 013

لتكون النتيجه كالتالي باذن الله تعالى ::

دروس دورة تصميم استايل للمبتدئين 014

الان كل ما عليك هو ان تعلم على لير الشكل ثم تحرك الشكل بسهم الكيبورد الاعلى حركتين

ليكون الشكل النهائي كالتالي باذن الله

دروس دورة تصميم استايل للمبتدئين 015

والى اللقاء في باقي الدروس ان شاء الله

دروس دورة تصميم استايل للمبتدئين Rmdan

.:ليس بالضروري ان مانقدمه من دورات هو الاصح وانما هو احد الطرق الصحيحه:.

اهلا ومرحبا بحضراتكم في :

الدرس الثالث : دورة تصميم استايل للمبتدئين

توقفنا الدرس السابق عند ::

جميعنا نفتح العمل الخاص بنا

ثم نذهب على لير او طبقه اللوجو ثم نضغط كليك يمين عليها

ونختار duplicate lyaer اي اخذ نسخه اخرى منها

لتاخذ الشكل التالي ان شاء الله

الان جميعنا نعلم على طبق اللوجو لتصبح زرقاء كالتالي

ثم نتابع الشرح على الصورة التاليه :

ثم بعد ذلك نحرك مربع التحديد حركتين بسهم الكيبورد اليمين وحركتين بالسهم لاسفل

ثم نضغط على زرار delete من الكيبورد لتاخذ الشكل التالي :

ثم نقوم برسم مربع لكتابه اسم الموقع عليه كالتالي :

ثم نفعل الخطوة التاليه كما تلعمناها من قبل :

ليكن هذا هو الشكل ان شاء الله :

الان سنعطي للصورة التي سنكتب عليها اسم الموقع تاثير الهيدر

وممكن ان تعطيها تاثيرا اخر حسب مايحلو اليك ..

فسناخذ التاثيرات من الهيدر كالتالي :

ثم نذهب ونطبقها على الصورة كالتالي ::

ثم نطلق عليها اسم بنر كما تعلمنا

ليكون الشكل كالتالي باذن الله تعالى :

الان باداه التحديد نعلم من يمين الفوتر الى يسارة مستطيل التالي ::

ثم نضغط على زرار delete ليكن الشكل النهائي كالتلي ::

وبكده نكون الحمد لله قد انتهينا من التصميم

وبصراحه انا اختصرت فيه او حذفت منه بعض الامور كالاطارات مثلا

لاني ما اريد ان اطيل عليكم او اشق عليكم ..

وما تقلقون سوف يتم تناولها في دورات تاليه باذن الله ..

يعني ماراح نهملها ... الله المستعان ..

وتابعوا معي باقي الدروس ان شاء الرحمن ..

.:ليس بالضروري ان مانقدمه من دورات هو الاصح وانما هو احد الطرق الصحيحه:.

اهلا ومرحبا بحضراتكم في :

الدرس الرابع : دورة تصميم استايل للمبتدئين

انتهينا والحمد لله من التصميم وكان هذا هو الناتج باذن الله

اليوم باذن الله سوف نقوم بتقطيع التصميم الى قطع

كي يتم تركيبها ببرنامج الفرونت بيج ومن فوائده (التمدد)

وللتقطيع طرق عديده وسنستخدم منها باذن الله

التقطيع بواسطه اداه التحديد هذه

نبدأ الشغل بسم الله الرحمن الرحيم

اولا الكل يحفظ التصميم على هيئه صورة بامتداد gif كالتالي :

ثم اضغط على save كالتالي

اعطيها اي مسمى وليكن index

وبالامتداد gif كما ترون

ثم نفتح الصورة عن طريق برنامج الفوتوشوب كالتالي :

ثم تختار الصورة من جهازك وتضغط عليها ستفتح معك باذن الله

الان من شريط الادوات اختر اداة التحديد هذه

ثم قم بتحديد الهيدر من اليمين الى اليسار وبارتفاعه كاملا

مع ترك نسبه بسيطه من لون الخلفيه

لتكن القطعه المحدده كالتالي :

والان ستضغط على زرارين ctrl+c من الكيبورد

وهي تعني نسخ القطعه المحدده ..

ثم تذهب لتفتح عمل جديد كما تعلمنا كالتالي:

ستظهر لك مقاييس العمل الجديد بنفس المقاسات التي حددتها للهيدر

فكل ما عليك هو تسميتها header والضغط على ok فقط لاغير كالتالي :

سيظهر لك العمل الجديد ابيض

كل ما عليك هو ان تضغط على زرارين ctrl + v اي لصق من الكيبورد

لتصبح الصورة كالتالي باذن الله

وسنكرر هذه الطريقه مع الفوتر ؛ سنقوم بتحديده كالتالي :

ثم ننسخه ثم عمل جديد فسياخذ المقاسات ونسميها footer كالتالي :

ثم نلصقه ليكن كالتالي ان شاء الله :

الان سنقوم بتقطيع الهيدر الى قطع صغيره ان شاء الله

نقطع البنر مع ترك نسبه من باقي الهيدر كالتالي :

ثم نسخ ثم عمل جديد ونسميها h-r كالتالي :

ثم لصق ليكن الشكل كالتالي ان شاء الله

سوف ناخذ الان منطقه التمدد للهيدر باذن الله

نقطع اي قطه بسيطه بعرض الهيدر كاملا كالتالي :

ثم نسخ ثم عمل جديد ونسميها h-b كالتالي :

ثم لصق لتكن بالشكل التالي باذن الله :

دروس دورة تصميم استايل للمبتدئين 016

سوف نقوم بتقطيعها الى نصفين

ليكون النصف العلوي فارغا لوضع اي بنر اعلاني

والنصف السفلي للكتابه عليه ووضع زراير كما تحب ان شاء الله

اولا نقوم بالتعليم على النص العلوي كالتالي باذن الله

دروس دورة تصميم استايل للمبتدئين 017

ثم قص ctrl + x ليكن كالشكل التالي ان شاء الله

دروس دورة تصميم استايل للمبتدئين 018

واردت بالقص هذه المرة التيسير في اخذ القطعتين كاملتين

فتابعوا وستفهموا بعد ذلك باذن الله

ثم عمل جديد ونسميه h-b1 كالتالي ان شاء الله :

دروس دورة تصميم استايل للمبتدئين 019

ثم لصق ليكن كالشكل التالي باذن الله :

دروس دورة تصميم استايل للمبتدئين 20

والان جائت فائده القص

سنعلم على قطعه h-b بزرارين ctrl+a التعليم على الكل كالتالي :

دروس دورة تصميم استايل للمبتدئين 21

ثم نسخ ctrl+c ثم عمل جديد ونسميه h-b2 كالتالي :

دروس دورة تصميم استايل للمبتدئين 22

ثم لصق لياخذ الشكل التالي باذن الله

دروس دورة تصميم استايل للمبتدئين 23

اتمنى تكون اتضحت فكرة القص هذه المره ان شاء الله

والان نكون بفضل الله قد قمنا بتقطيع الهيدر كاملا والحمد لله

ونقوم بتقطيع الفوتر باذن الله الان وهو بسيط جدا

كلنا ناخذ قطعه بعرض الفوتر كاملا كالتالي ::

دروس دورة تصميم استايل للمبتدئين 24

ثم نسخ ثم عمل جديد ونسميه f-b كالتالي ان شاء الله

دروس دورة تصميم استايل للمبتدئين 25

ثم لصق ليكن الشكل كالتالي ان شاء الله

دروس دورة تصميم استايل للمبتدئين 26

ثم نحدد اي طول بعرض الفوتر لنكتب عليه عبارة حفظ الحقوق كالتالي :

دروس دورة تصميم استايل للمبتدئين 27

ثم نسخ ثم عمل جديد ونسميه logo كالتالي :

دروس دورة تصميم استايل للمبتدئين 28

ثم لصق ليكن الشكل كالتالي باذن الله :

دروس دورة تصميم استايل للمبتدئين 29

والان سوف نقوم باخذ لون الخلفيه وهذه الفكرة لن تنفعنا في عمل استايل

وانما تنفعنا في عمل الواجهه ان شاء الله وهذه هي المفاجئه

دروس دورة تصميم استايل للمبتدئين 30

بعد التحديد على اي قطعه بالخلفيه ناخذها نسخ ثم عمل جديد

ونسميه back كالتالي ان شاء الله :

دروس دورة تصميم استايل للمبتدئين 31

ثم لصق ليكون كالتالي باذن الله :

دروس دورة تصميم استايل للمبتدئين 32

وكل ما نريده من القطع التي تم تقطيعها هم 6 قطع فقط لاغير

وهم كالتالي :

دروس دورة تصميم استايل للمبتدئين 33

وكفى المؤمنين شر القتال