استخدام الفوتوشوب في تصميم المواقع
TRANSCRIPT
لمواقع
201
كاله، كافة ضيف
ھي
ويسة
وب في تصميم الم
12/4/7
ميم بكافة أشكل كامل أي
يضيكفي لبما
ث عنھا ھنا،
رة لتكون ترو
التحريك
التحديد تاة القصار اللونإلصالح فرشاةاة النسخ ممحاةج اللونيالضبابية
اللونجة ت الرسماة النصت الرسم األشكالالتحريك المكبرة
ستخدام الفوتوشو
مشق
مواقع
صور والتصمقع، إما بشكل
بو ،كل جزئي
والتي سنتحدث ب الزائر.
ة:
معالجة صور
ا أداة
أدوات أدا
اختياأداة أداة اإل
أد
التعبئة والتدرج أدوات اللطخ وا
درجأدوات التحكم ب أدوات أدامؤشرات
يد ا
اس
وزارة الثقافة / دم
تصميم المو
ت معالجة الصلرئيسية للمو
، أو بشكيرھا
لفوتوشوب، و بسيطة تجذب
وات األساسية
روع بسيط لم
م. رندة بشير / و25 من 1 صفحة
شوب في ت
من خيارات ماھنا الواجھة ال
وغي إعالنات
يھا استخدام ات إلكترونية
مع بعض األدو
لنا على مشر ب.
م وتوشوبالص
ام الفوتوش
يقدم لنا عالمب، ونقصد ھر وأيقونات و
التي يمكن فيصميم إعالنات
ألدوات
ية للبرنامج مع
ات أثناء عملي بسيط وجذا
طبقات
النص
جلسة الرابعة: فو
استخدا
Adobe Phم مواقع الوبصور وأزرار
طلوب.
صميم المواقعل أساسي وتص
اللوحات واأل
اجھة الرئيسي
ض ھذه األدواعالن إلكتروني
لوحة الط
إعدادات
الج –واقع الوب
hotoshop ذلك تصميمالموقع من ص للتصميم المط
مجاالت تصم الصور بشكل
ف بالبرنامج:
كل التالي الو
م بشرح بعضوتصميم إعال،
أثيرات الطبقة
تصميم مو
برنامجبما فيأجزاء جمالية
من أھممعالجة
التعريف
في الشك
وسنقومللموقع،
تأ
لمواقع
201
موقع
، واف
Filte
وب في تصميم الم
12/4/7
اإلفالت من م
النقاط والحو
er Shar
ستخدام الفوتوشو
مشق
قة السحب وا
ي:
ر في بعض
rpen Sm
اس
وزارة الثقافة / دم
.وبة منھا
Op أو بطريق
وإزالة الباقي
طيھا حدة أكثر
mart Sharp
م. رندة بشير / و25 من 2 صفحة
رويسة المطلو
penمن قائمة امج.
خذ جزء منھا
ث يعطيثر بح
pen
م وتوشوبالص
وكوالتة
ھا وإنشاء التر
إما بفتحھا م واجھة البرنا
Crop T ألخ
الصورة أكث
جلسة الرابعة: فو
دة لموقع شو
نريد معالجتھ
طة فوتوشوب الحاسب إلى
oolة القص
ضيح تفاصيل
الج –واقع الوب
تروسية جديد
صورة محددة ن
صورة بواسطة على جھاز
حھا سنأخذ أدا
صھا نريد توض قائمة:
تصميم مو
إنشاء ت
لدينا ص
لفتح الصالصورة
بعد فتح
بعد قصفنأخذ قا
لمواقع
201
وب في تصميم الم
12/4/7
:OKضغط
ستخدام الفوتوشو
مشق
طلوبة ثم نض
اس
وزارة الثقافة / دم
التفاصيل المط
م. رندة بشير / و25 من 3 صفحة
نحصل على ا
م وتوشوبالص
عدادات حتى ن
جلسة الرابعة: فو
نغير في اإلعد
الج –واقع الوب
فذة الظاھرة ن
تصميم مو
في الناف
لمواقع
201
Ima
وب في تصميم الم
12/4/7
age Adj
ستخدام الفوتوشو
مشق
ustments
اس
وزارة الثقافة / دم
Color B
:حمر
م. رندة بشير / و25 من 4 صفحة
خذ قائمة:
Balance
جة اللون األح
م وتوشوبالص
ت اللونية، نأخ
نزيد من درج
جلسة الرابعة: فو
عض الدرجات
ن أكثر دفئا فن
الج –واقع الوب
آلن بإضافة بع
ريدھا أن تكون
تصميم مو
لنقوم اآل
مثال نر
لمواقع
201
على
Ima
وب في تصميم الم
12/4/7
تأثيرا كبيرا
age Adj
ستخدام الفوتوشو
مشق
لتي تضيف ت
ustments
اس
وزارة الثقافة / دم
ھم األدوات ال
Brightn
سب:
م. رندة بشير / و25 من 5 صفحة
وھذه من أھ
ness/Cont
التأثير المناس
م وتوشوبالص
كيز األلوان،
trast
نحصل على
جلسة الرابعة: فو
إلضاءة وتركي ة:
ظاھرة حتى ن
الج –واقع الوب
آلن بعض اإلة، نأخذ قائمة
المؤشرات الظ
تصميم مو
نريد اآلالصورة
نحرك ا
لمواقع
201
وب في تصميم الم
12/4/7
ستخدام الفوتوشو
مشق
اس
وزارة الثقافة / دم
T:
م. رندة بشير / و25 من 6 صفحة
Type Toolص
م وتوشوبالص
دام أداة النص
جلسة الرابعة: فو
بسيط باستخد
الج –واقع الوب
ف اآلن نص
تصميم مو
سنضيف
لمواقع
201
ادات
وب في تصميم الم
12/4/7
ح لوحة إعدا
الصورة.
ستخدام الفوتوشو
مشق
يد النص نفتح
ي تناسقا مع
اس
وزارة الثقافة / دم
Chوبتحديد ،
يعطيالذي ه و
م. رندة بشير / و25 من 7 صفحة
ocolataب
ان الذي نريده
م وتوشوبالص
صورة ونكتب لون:
ص إلى المكا
جلسة الرابعة: فو
وضع من الص، الحجم، والل
يك نحرك النص
الج –واقع الوب
على أي موونختار الخط،
ام أداة التحري
تصميم مو
نضغطالنص و
باستخدا
لمواقع
201
File
وبدقة
سرعة صيغة
وب في تصميم الم
12/4/7
Save f
و JPEGمنھا
سركانية تقدير ى اختيار الص
ستخدام الفوتوشو
مشق
خذ من قائمة:
for Web
مھا، نختار من
النھائية وإمك تساعدنا على
.
اس
وزارة الثقافة / دم
ب للوب، فنأخ
ودقتھا وحجم
حجم الصورة المؤشرات
ف السرعات.
م. رندة بشير / و25 من 8 صفحة
تنسيق مناسب
غة الصورة و
مؤشر إلى حإلنترنت، ھذه
رة على مختلف
م وتوشوبالص
ريد حفظھا بت
خيارات لصيغ
فلية اليسرى م المتوفرة لإلأسرع للصور
جلسة الرابعة: فو
نر ة الخطوات
لدينا عدة خي
ي الزاوية السفف السرعاتسب لتحميل أ
الج –واقع الوب
نتھاء من كافة
فذة الظاھرة .Saveثم
نه يعطينا فيا على مختلفوالحجم المناس
تصميم مو
بعد االن
في النافHigh ث
الحظ أنتحميلھاوالدقة و
لمواقع
201
وب في تصميم الم
12/4/7
ستخدام الفوتوشو
مشق
طبقات الحقا.
اس
وزارة الثقافة / دم
عديل على الط
م. رندة بشير / و25 من 9 صفحة
إلمكانية التعد
م وتوشوبالص
اھزة:
PSDبصيغة
جلسة الرابعة: فو
تنا الجديدة جا
ف األساسي ب
الج –واقع الوب
تكون ترويست
سى حفظ الملف
تصميم مو
وبذلك ت
وال ننس
لمواقع
201
خدام حجم
حجوم
وب في تصميم الم
12/4/7
باستخكوالتة، ثم إعداد الح
إلى ح الحقا أي وقت).
ستخدام الفوتوشو
مشق
ديد من الشوك النصوص،
بيكسل: 600
ثم تصغيرهلعودة إليه في
اس
وزارة الثقافة / دم
ويج لنوع جدجمالية تبرز
x 0 400ثال
بحجم كبيرللع PSDملف
م. رندة بشير / و25 من 10 صفحة
بھدف التروي وتأثيرات ج
أخذ الحجم مث
ى أي تصميم األصلي في م
م وتوشوبالص
الن إلكترونيطوط مختلفةعلى الموقع.
File ولنأ
العمل على مااظ بالتصميم
اھز للعمل.
جلسة الرابعة: فو
وني
وم بإنشاء إعالصوص بخطنه عناسب مكا
New يد من
األفضل دائمجاتنا واالحتفا
لف الجديد جا
الج –واقع الوب
إعالن إلكترو
المثال سنقو وبعض النصب لإلعالن لين
اية ملف جديد
ھنا أنه منتناسب احتياج
لدينا اآلن المل
تصميم مو
إنشاء إ
في ھذاصورةالمناسب
نأخذ بد
(الحظأخرى ت
أصبح ل
لمواقع
201
ضعھا إلى ا ن ھن
مركز
وب في تصميم الم
12/4/7
لوبة من موضمع مؤشراتمناسب (يمكنحفاظ على مر
ستخدام الفوتوشو
مشق
النقشة المطلوأبعاد معينة مإلى الحجم الم
للح Altوالزر
اس
وزارة الثقافة / دم
صورة تمثل فتظھر لنا بأكبر الصورة إعلى األبعاد و
م. رندة بشير / و25 من 11 صفحة
عالن، نأخذ صلف الجديد،
ى الزوايا ونكبSh للحفاظ ع
م وتوشوبالص
ى أرضية اإلعلى داخل الملحب من إحدى
hiftعلى زر
جلسة الرابعة: فو
ض النقوش إلىب ونسحبھا إلتصغير، نسحب الضغط ع
الج –واقع الوب
سنضيف بعضجھاز الحاسب التكبير أو التمن مع السحب
ة في مكانه).
تصميم مو
بداية سعلى جإمكانيةوبالتزامالصورة
لمواقع
201
للون
وب في تصميم الم
12/4/7
دات الخط وال
ستخدام الفوتوشو
مشق
نختار إعداد
اس
وزارة الثقافة / دم
شروع األول
م. رندة بشير / و25 من 12 صفحة
المشكما في و
م وتوشوبالص
ون لإلعالن،
جلسة الرابعة: فو
بسيط كعنوان
الج –واقع الوب
اآلن نص ب م.
تصميم مو
نضيفوالحجم
لمواقع
201
لعديد سافة
أكثر
من نفس
وب في تصميم الم
12/4/7
نافذة تضم الإعدادات المس
وترويجب
بتحديد جزءق فيواللص
ستخدام الفوتوشو
مشق
فتظھر fxة ، نغير إظل
المناسب.
عامل جذبة
تقوموالتي ومع النسخ و
.سية)
اس
وزارة الثقافة / دم
أثيرات الطبقةD إلضافة ظ
ل على الظل
منھا إضافة
Rectangu،لمختارةة ا
الطبقة األساس
م. رندة بشير / و25 من 13 صفحة
ط على زر تأDrop Shad
S حتى نحصل
ة نريدة سائل
ular Marqصورةل من البحذف ا لباقي
م وتوشوبالص
نص، نضغطdow منھا
Sizeوالحجم
تةشوكوال ثل
quee Tool القسم األول
ونحذف الب(ه
جلسة الرابعة: فو
يرات على الن، نختارراتSpreadار
رسومية تمثل .إلعالن
األولى حديدطيل، ونحدد الذي اخترناه
الج –واقع الوب
بعض التأثيف يارات التأثير
Dist واالنتشا
آلن صورةأعلى اإلفي ھا
وال أداة التحة بشكل مستط يظھر الجزء
تصميم مو
فنضيلمن خيtance
اآلنأخذ ونضعھ
أونأخذ الصورةالمكان
لمواقع
201
خرى ات ح
ھا.
وب في تصميم الم
12/4/7
أداة تحديد أخ باختيار مساحضاء الختيار
ستخدام الفوتوشو
مشق
نأخذ لسائلة،ة أنھا تقوم
المساحة البيض
اس
وزارة الثقافة / دم
الشوكوالتة الاألدا زة ھذه
فنضغط على
م. رندة بشير / و25 من 14 صفحة
حتفاظ فقط باMagic وميز
ن ودرجته، ف
م وتوشوبالص
للصورة واالc Wand Toناء على اللون
جلسة الرابعة: فو
لفية البيضاء لoolلسحرية
بنقرة واحدة بن
الج –واقع الوب
ريد إزالة الخللتحديد الداة ا
من الصورة بن
تصميم مو
نراآلن أدوھي كاملة م
لمواقع
201
وضة
وب في تصميم الم
12/4/7
كوالتة المعرو
ستخدام الفوتوشو
مشق
ي قطع الشوكو .Openل
اس
وزارة الثقافة / دم
بيضاء.
إلعالن.
إلعالن وھيمج من خاللا
م. رندة بشير / و25 من 15 صفحة
ل المساحة الب
ة في أعلى اإل
ع األساسي لإلل على البرنا
م وتوشوبالص
D حذف كاملل
صورة الناتجة
مثل الموضوعھا بشكل مستقل
جلسة الرابعة: فو
Deleteضغط
ريك نثبت الص
فة صورة تمث ونقوم بفتحھا
الج –واقع الوب
ام التحديد نض
أداة التحرخدام
التالية إضافة نختار صورة
تصميم مو
إتمابعد
وباستخ
الخطوةللبيع، ن
لمواقع
201
لكن ة في تحكم Poly
صورة
وب في تصميم الم
12/4/7
سابقة،ة الصورض الصعوبةضيال في التygonal Lasخارجية للص
ستخدام الفوتوشو
مشق
قمنا في الصويؤدي إلى بعض
واألكثر تفض ssoوھي )
ى الحواف الخ
اس
وزارة الثقافة / دم
البيضاء كما، والذي قد يل
وات التحديدن ذلك بكثير)بالضغط على
. الصورة
م. رندة بشير / و25 من 16 صفحة
ديد المساحة اي يمثل الظل
من أدر دقةكثر تعقيدا من
التحديد باطالمطلوبة من
م وتوشوبالص
لسحرية وتحدالذيالرمادي
األداة األكثرجھنا صور أك
نقات وتثبي نوي المساحة ا
جلسة الرابعة: فو
أداة التحديد الاللونمن ت
لك سنختاراجور (قد توعينئھا على ت
ضلع معقد يحو
الج –واقع الوب
ھنا اختيار أا ت وجود درجا بالتحديد، لذلف أنواع الصو تعتمد بمبدئھ
، لتمثل مضبة
تصميم مو
بإمكاننانالحظالتحكمبمختلفTool،المطلوب
لمواقع
201
Fea ، شاذة
وب في تصميم الم
12/4/7
atherقائمة نقاط ش وأحادة
ستخدام الفوتوشو
مشق
ونختار من القھر حواف حا
اس
وزارة الثقافة / دم
حة المحدد و حتى ال تظھ
م. رندة بشير / و25 من 17 صفحة
ي على المساححة المختارة
م وتوشوبالص
بالزر اليمينيحواف المساح
جلسة الرابعة: فو
حديد نضغط نعومة على ح.ص الصورة
الج –واقع الوب
اء من التحنتھضيف تميزة قص دعن حواف
تصميم مو
االنبعد ھذه المعلى الح
لمواقع
201
لرقم
ظ في ھذه ضغط
وب في تصميم الم
12/4/7
يكون ا غالبا
، نالحظصورةن الھدف منية وذلك بالض
خلفية.
ستخدام الفوتوشو
مشق
مھا صغير غ
نلصق الص اوبما أنجديدة،
ن طبقة الخلفيمع شفافية الخ
اس
وزارة الثقافة / دم
ي يكون حجم
ف جديد تماماة الصورة الج
عن اإلظھارعلى الصورة م
م. رندة بشير / و25 من 18 صفحة
والتي المرئية
خ وعلى ملفBack وطبقةخاصيةنزيل
ة، فنحصل عل
م وتوشوبالص
سبة للصور مثال. 3ا
م اآلن بالنسخkgroundية
ندون خلفية،بجانب الطبقة
جلسة الرابعة: فو
لكن بالنس ،ده، سنختار ھنا
المثالي، نقومن: طبقة الخلفيظ بالصورة دل شكل عين ب
الج –واقع الوب
أي رقم نريد،5و 2ل بين
من التحديد ا الناتج طبقتين ھي االحتفاظ
يمثل زر الذي
تصميم مو
أختار نالمفضل
انتھيناالملف االعمليةعلى الز
لمواقع
201
دور P مع
وب في تصميم الم
12/4/7
قة، ھنا يأتيPNG‐24غة
ستخدام الفوتوشو
مشق
خدامات الحقنختار الصيغ
اس
وزارة الثقافة / دم
الشفافية الستخSave for W
م. رندة بشير / و25 من 19 صفحة
مع االصورةWebة، فمنSave.
م وتوشوبالص
نحتفظ باحيثالمطلوبةافية
eت ثم نضغط
جلسة الرابعة: فو
ف الجديد بح تحتفظ بالشفاقية اإلعدادات
الج –واقع الوب
آلن حفظ الملفالتي PNGة
ظ بالحجم وبق
تصميم مو
اآلنريد الصيغةاالحتفاظ
لمواقع
201
طريقة
حتوى رجية على
وب في تصميم الم
12/4/7
ة بسھولة بطر
مثال.
عبرة عن محإلضاءة الخار ماذا يحدث
ستخدام الفوتوشو
مشق
ع الشوكوالتة
Drop Shad
األخرى المعخرى مثل اإلرات وشاھد
اس
وزارة الثقافة / دم
ة صورة قطع
dowذ الظل
ض النصوص وتأثيرات أخمختلف التأثير
م. رندة بشير / و25 من 20 صفحة
نا اآلن إضافة
ض التأثير فنأخذ
لنضيف بعض،جوم مختلفةھنا بنفسك م
م وتوشوبالص
صبح بإمكانن ف.
ضيف بعضن
،لنص األول وألوان وحج
St جرب ھ)
جلسة الرابعة: فو
عالن، أصف اإلى داخل الملف
ن المناسب ن
ي أنشأنا بھا الطوط متنوعة
rokeإلطار
الج –واقع الوب
آلن إلى ملف واإلفالت إلى
يتھا في المكان
نفسھا التيقة ن بأنواع خط
Outer واإل.
تصميم مو
النعود السحب
تثبيبعد
بالطريقاإلعالنGlowالنص).
لمواقع
201
من رض
وب في تصميم الم
12/4/7
بداخله، نأخذى كامل العر
.Fillئة
ستخدام الفوتوشو
مشق
ت االتصال ب مستطيل على
ار لون التعبئة
اس
وزارة الثقافة / دم
كتابة معلوماتل اإلعالن
ط القوائم نختا
م. رندة بشير / و25 من 21 صفحة
ى اإلعالن لكرسم في أسفل
وأسفل شريط
م وتوشوبالص
ر سفلي علىRectaونر ،
افذة البرنامج
جلسة الرابعة: فو
إضافة إطار ngle Tool
ت في أعلى نا
الج –واقع الوب
األخيرة ھي ل المستطيل ع مناسب.
يط اإلعدادات
تصميم مو
اللمسةاألشكالوبارتفاع
رشمن
لمواقع
201
الحظ تمكن ضمان
وب في تصميم الم
12/4/7
ج اللوحة نالEyوذلك لنت (
الن وذلك لض
ستخدام الفوتوشو
مشق
المؤشر خار yedropperناصر اإلعال
اس
وزارة الثقافة / دم
بتحريكو، نr Toolاللون
في بقية عن .OKضغط
م. رندة بشير / و25 من 22 صفحة
ختيار األلواناأداة اختيار ت الموجودة مناسب ونض
م وتوشوبالص
ظھر لوحة اخمماثل لشكل(
وان والدرجاتتار لون فنخ
جلسة الرابعة: فو
الملون تظبعشكل قطارة (يب من األلوان وتناسقھا،
الج –واقع الوب
على المربط لمؤشر إلى شتيار لون قرية تمازج األلو
تصميم مو
بالضغطتحول امن اختخاصية
لمواقع
201
ناتجة
وب في تصميم الم
12/4/7
م الصورة النا
ستخدام الفوتوشو
مشق
طيل.
تصغير حجم
اس
وزارة الثقافة / دم
ھا فوق المستط
Save f مع
م. رندة بشير / و25 من 23 صفحة
تصال ونثبتھ
or Webمن
م وتوشوبالص
معلومات اال
م JPEGيغة
جلسة الرابعة: فو
النھائي وھي
بصيالصورة .كسل مثال
الج –واقع الوب
اآلن النص ا
خرى نحفظ ابيك 250رض
تصميم مو
نضيف
أخومرة عرإلى
لمواقع
201
وب في تصميم الم
12/4/7
ستخدام الفوتوشو
مشق
اس
وزارة الثقافة / دم م. رندة بشير / و
25 من 24 صفحةم وتوشوب
الص
.
جلسة الرابعة: فو
جاھز للنشر
الج –واقع الوب
يكون إعالننا
تصميم مو
يوبذلك
استخدام الفوتوشوب في تصميم المواقع
12/4/2017 م. رندة بشير / وزارة الثقافة / دمشق الجلسة الرابعة: فوتوشوب –تصميم مواقع الوب 25 من 25 الصفحة
للعودة إليه في أي وقت إذا احتجنا إلى التعديل عليه. PSDننسى حفظ الملف األساسي بصيغة وال
والصور المطبوعة(اإللكترونية) حول الفرق بين الصور المرئية مالحظات
عن الصور المرئية، أھم ھذه اللوني طھانمدقتھا وحجمھا وكثيرا الصور المطبوعة في تختلف والتي عند إنشاء ملف جديد يجب تعديلھا بشكل يدوي: ،الفروقات
بوعةالمط المرئية in أو إنش cmسم Pixel بيكسل قياس الحجموحدة
RGB اللونيالنمط (Red – Green – Blue)
CMYK (Cyan – Magenta – Yellow – Black)
(ال نحتاج االفتراضية المثلىالدقة لتغييرھا)
أو متريبيكسل في السنت 120 بيكسل في اإلنش 300
بايت (يجب أن ال بالكيلو الملف النھائيحجم ميغا بايت) 1يتجاوز
غيغا بايت 1يصل إلى قد وأكثر
سرعة صغر حجم الصورة وبالتالي من ھذه الفروق أنه في الصور المرئية ھدفنا ھو الھدف ، أما في الصور المطبوعة الھدف ھو دقة الطباعة وبألوان تتوافق مع ألوان الحبر المستخدم ھالتحمي
.CMYKفي كافة الطابعات وھو نظام اللون