سنتعلّم كيفيّة تصميم أيقونات تواصل اجتماعيّ جميلة بواسطة فوتوشوب، وسنغطّي الخاصّية الجديدة في إعدادات أداة الشكل Shape Tool ألا وهي الحدود الخارجية للشّكل Stroke وبواسطة هذه الأداة يمكن وبكلّ سهولة إضافة تأثير قُطَب الخياطة وتعديله حسب الرّغبة.

ما سنحتاجه هو بعض أيقونات التواصل الاجتماعي بقياس 32px*32px.

وهذا ما سنقوم بصنعه:

الخطوة الأولى: تهيئة ملف العمل

ننشئ ملفًّا جديدًا في الفوتوشوب بالأبعاد: 570px*470px، ونختار اللّون 333236# للخلفيّة.

نطبّق المؤثر:

Filter > Noise > Add Noise

على طبقة الخلفيّة Background.

سنعمل الآن على إضافة بعض الإضاءة في وسط الخلفيّة، وذلك باستخدام أداة الفرشاة (Brush Tool(B ورسم الإضاءة في منتصف الخلفيّة.

نغيّر نمط الطّبقة إلى Soft Light والشّفّافيّة إلى 50%.

الخطوة 2:

هذا هو الشّكل الأساسيّ والذي نراه في الصّورة أدناه، وهو عبارة عن مستطيل مدوّر الأطراف بمقدار 5px وأبعاده 120px*80px، ولونه #b59973.

تمّ تعديل المستطيل بواسطة أداة التّحديد المباشر (Direct Selection Tool(A وأداة القلم Pen Tool وذلك بجعل الأطراف العلوية مستقيمة، وإضافة نقطة إرساء anchor point في منتصف الضّلع السّفلي ثم سحب هذه النقطة إلى الأسفل بواسطة أداة التّحديد المباشر (U).

نطبّق الآن إعدادات المزج التالية:

التّدرّج اللّونيّ:

والنتيجة هي:

الخطوة 3: إضافة النقش

ننشئ ملفًّا جديدًا في الفوتوشوب بالأبعاد 5px*5px، ونجعل الخلفيّة شفّافة باختيار Transparent من قائمة Background Contents.

نكبّر الصّورة باستخدام أداة التكبير (Zoom Tool(Z أو بالضغط على المفاتيح Ctrl++ في لوحة المفاتيح، ثم نرسم خطًّا بواسطة أداة قلم الرّصاص (Pencil Tool(B كما في الصّورة أدناه:

نحفظ الملفّ على هيئة نقش Pattern عن طريق الأمر:

 Edit < Define Pattern

ويمكن اختيار أي اسم لهذا النّقش. نطبّق هذا النّقش بعد حفظه على الشّكل الأساسيّ كما في الصّورة أدناه.

الخطوة 4: إضافة الإضاءة

سنحتاج إلى إضفاء بعض النّكهة إلى الشكل الأساسيّ بإضافة بعض الإضاءة. سننشئ طبقة جديدة فوق الشّكل ونربطها به بواسطة الضغط على مفتاح Alt في لوحة المفاتيح مع الضّغط بزرّ الفأرة الأيسر على الخطّ الذي يفصل بين الطّبقتين، كما هو موضّح أدناه:

نرسم على الجزء السفليّ من الشّكل باستخدام أداة الفرشاة (Soft Brush Tool(B ونختار نمط Soft Light من أنماط الطّبقة، ونعطي للشفافيّة القيمة 80%.

نضيف طبقة أخرى، ونختار أداة التدرّج (Gradient Tool(G ونضغط على خَيَار التدرّج المنعكس Reflected Gradient، وباللّون #fff نضيف التدرّج بالقرب من الجزء العلويّ للشّكل. نختار نمط الطّبقة Soft Light ونخفّض الشّفافيّة إلى 50%.

نضيف طبقة أخرى، ولكن هذه المرّة سنضيف بعض الظّلال إلى الشّكل. باستخدام التدرّج المنعكس واللّون #000 نضيف التدرّج إلى الجزء العلويّ من الشّكل، ونختار نمط الطّبقة Multiply ونخفّض الشفافيّة إلى 50%.

الخطوة 5: إضافة القطب

إضافة القُطَب في برنامج الفوتوشوب CS6 سهل جدًّا، فقد طوّرت شركة Adobe أداة الأشكال وأضافت إليها بعض الإعدادات الإضافيّة الخاصة بالحدود الخارجيّة والأشكال.

لوحة إعدادت تعبئة اللّون:

لوحة إعدادات الحدود الخارجيّة:

لإضافة القُطب، نرسم الشّكل أوّلًا وبنفس الطّريقة المتّبعة في رسم الشّكل الأساسيّ، ولكن بتغيير قيمة العرض إلى 70px.

يجب تعديل الحدّ الخارجيّ بواسطة النّقر على الخيارات الإضافيّة More Options وتغيير قيمة Dash إلى 5 و Gap إلى 6. نغيّر لون الحدّ الخارجيّ إلى #a4b1cf، ثمّ نلغي لون التّعبئة ليظهر الحدّ الخارجيّ فقط.

يمكن الحصول على نفس الشّكل في نسخة CS5 من الفوتوشوب باستخدام أداة الخطّ (Line Tool (U بتعيين 5px لكلّ خطّ و 6px للمسافة الفاصلة بين خطّ وآخر.

نحذف القُطَب العلويّة وذلك بالضّغط بالزرّ الأيمن للفأرة على اسم الشّكل الثّاني واختيار Rasterize Layer، ثمّ نمسح القُطَب العلويّة بواسطة أداة الممحاة Eraser Tool ثمّ نضيف الظلّ إلى القُطَب كما يلي:

لنحصل على هذا الشّكل:

الخطوة 6: إضافة الأيقونات

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

ثم نطبّق إعدادات المزج التّالية:

الحدّ الخارجيّ:

التدرّج اللونيّ:

الظلّ:

نضيف اسم الأيقونة بواسطة أداة النصّ (Text Tool (T.

نضاعف طبقة النصّ، ونغيّر اللّون إلى #b406a2 ونحرّكها إلى الأعلى بالضّغط مرّة واحدة على مفتاح الاتّجاه إلى الأعلى في لوحة المفاتيح.

الخطوة 7: إضافة الظلال

نضاعف طبقة الشّكل الأساسيّ، ونختار لون التّعبئة #000000، نضع هذه الطّبقة تحت طبقة الشّكل الأساسيّ ثم نذهب إلى:

Filter > Blur > Gaussian Blur

نضيف قناعًا Mask إلى الطّبقة، ونغطّي المناطق الّتي لا نرغب في ظهورها، كما في الصّورة أدناه:

نضيف ظلًّا كما في الصّورة أدناه، باستخدام أداة التدرّج اللونيّ واختيار التدرّج الخطّيّ Linear Gradient باستخدام اللّون #000000.

نضيف خطّاً فوق الظلّ العلويّ بواسطة أداة الخطّ بقياس 1px وباللّون #515005.

وأخيرًا، نغطّي طرفي الخطّ والظلّ العلويّين بواسطة قناع لجعلهما يختفيان بصورة متدرّجة.

يمكن تحميل ملف PSD المرفق والذي يحتوي على 4 أيقونات تواصل اجتماعيّ أخرى، وبألوان مختلفة.

ترجمة -وبتصرّف- للمقال Learn How to Quickly Create Tasty Social Icons using Photoshop لصاحبه Dainis Graveris.

هناك الكثير من الأشخاص ممن يحبون سلسة الدروس التي تبدأ بتصميم مدونة باستخدام برنامج فوتوشوب وتنتهي بتحويل ذلك التصميم إلى قالب ووردبريس كامل، وهذا ما سنقوم به في هذه السلسلة المكونة من ثلاثة دروس، بحيث سنقوم أولًا بتصميم فكرة القالب باستخدام الفوتوشوب، بعدها سنقوم بـتحويل ذلك التصميم إلى نموذج HTML5 وأخيرًا إلى قالب ووردبريس كامل.

سنقوم بتسمية القالب الذي سنقوم بإنشائه بالاسم "Typo"، بحيث سيعتمد القالب بشكل كامل على مبادئ الخطوط والطباعة (typography) حتى يكون التركيز بشكل كامل على المحتوى. وبما أننا نريد للتصميم أن لا يحتوي على أي عناصر رسومية (صور مثلًا) فإننا سوف نستخدم نظام شبكي (grid) صارم لتحقيق التوازن في التصميم وربط جميع عناصره معًا.

سوف نحتاج في البداية إلى نظام شبكي لوضعه في مستند الفوتوشوب الذي سنقوم بإنشائه، ولقد قمت بالفعل بإنشاء واحد مكون من 12 عمودًا (column) باستخدام موقع grid.mindplay.dk، كما أنني أنشأت نمط (pattern) على شكل خطوط لتعمل كشبكة خطوط قاعدية (baseline grid) بحجم 24px.

قم بملء طبقة الخلفية (background layer) بلون رمادي فاتح وبعدها قم بإضافة Noise بقيمة أقل من 3% وذلك عن طريق الذهاب إلى:

Filter > Noise > Add Noise

قم بضبط الإعدادات إلى Gaussian وMonochromatic.

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

قم بإلغاء تشبع الـtexture وتغيير نمط المزج (blending mode) إلى Darken. سوف تحتاج أيضًا إلى تعديل مستويات (levels) الصورة لتصبح ساطعة أكثر لتتناسب مع الخلفية الرمادية الفاتحة.

قلنا سابقًا بأنّ هذا التصميم سوف يعتمد بشكل كلي على الـtypography بما في ذلك الشّعار. سوف نستخدم خط Droid Serif في التصميم وسنقوم لاحقًا في الدروس التالية من هذه السلسلة باستخدام خدمة Google Web Fonts.

قم الآن بإضافة عناصر القائمة الرئيسية (navigation) بناءً على أعمدة النظام الشبكي والخط القاعدي (baseline)، وضع بجانب كل عنصر رقمًا (كما هو مبين في الصورة بالأسفل) وقم بتغيير لون هذه الأرقام حتى تكون أقل بروزًا من النص (أعطها لونًا أفتح/أبهت من لون عناصر القائمة نفسها).

اجعل هناك مسافة قليلة بين الترويسة (header) وبين المحتوى الرئيسي للمدونة. وبما أنّ عنوان التدوينة يعدّ من أهم العناصر في أي مدونة فسوف نختار حجم خط كبير.

قم باختيار أداة الكتابة وأنشئ مربع نصّي وضع بداخله نصًا عشوائيًا، واجعل حجم الخط 14pt وهو خط مناسب للمحتوى واجعل التباعد بين السطور (leading) بقيمة 24pt.

يجب علينا تمييز الروابط داخل محتوى المدونة بتنسيقات مختلفة. لذلك سوف نجعلها ذات لون أزرق، مائلة (italic) وتحتها خط (underline).

قم الآن بجمع العناصر التي تمثل التدوينة الأولى داخل مجلد واحد (اختر العناصر واضغط على ctrl + G من لوحة المفاتيح). قم بتكرير هذا المجلد ليصبح لدينا تدوينتين وقم بمحاذاة التدوينة الثانية أسفل الأولى واجعل بينهما مسافة مناسبة.

قم بإضافة رابطين أسفل التدوينات؛ الأول "الصفحة التالية (next page)" والآخر "الصفحة السابقة (previous page)"، وقم بإعطاء هذين الرابطين نفس تنسيقات الروابط (أزرق ،مائل وتحته خط) وقم بزيادة الحجم حتى يكونا بارزين بشكل أفضل.

ابدأ الآن بإضافة محتوى القائمة الجانبية (sidebar) واجعلها على نفس مستوى المحتوى الرئيسي اعتمادًا على خطوط الخط القاعدي الخاص بالنظام الشبكي، وبما أنّ ترويسات/عناوين (headers) هذه القائمة ليست مهمة كثيرًا فسوف نجعل حجم الخط الخاص بها صغيرًا.

بعض الروابط في المدونة يمكن أن توضع بجانب بعضها (تكون كلمة واحدة على الأغلب)، والبعض الآخر سيكون فوق بعضه البعض (تكون جمل كاملة كعنوان لمقال على سبيل المثال، لذلك لن يكون هناك مجال لوضعها بجانب بعضها).

لنقم الآن ببناء مربع البحث. قم برسم مستطيل واملأه بلون مناسب (#f7f7f7 مثلًا)، وبما أنّ مربع البحث يعد من أهم العناصر في أي موقع فسوف نقوم بإعطائه بعض التأثيرات لتمييزه عن باقي عناصر الموقع.

أنقر مرتين على طبقة مربع البحث لإضافة بعض التأثيرات. قم بإضافة تأثير Inner Shadow خفيف وتأثير Color Overlay بلون رمادي فاتح وStroke بحجم 1px بلون رمادي مناسب.

قم بمحاذاة النص الموجود داخل مربع البحث بالنسبة للخط القاعدي. سيؤدي هذا إلى أن يصبح الهامش أعلى وأسفل النص الموجود داخل مربع البحث غير متساوي، وبالتالي سوف نحتاج إلى قص جزء من مربع البحث حتى نصلح الأمر.

بقي علينا إضافة أيقونة بحث إلى يمين مربع البحث. يمكنك رسمها يدويًا أو استخدام أيقونة جاهزة لتسهيل المهمة عليك.

عندما تنظر إلى مربع البحث من دون وجود النظام الشبكي فإنّه يبدو متناسقًا ومتوازنًا. فالعناصر من مثل الأزرار أو مربعات البحث تحتاج غالبًا إلى تحجيمها من دون استعمال نظام شبكي وذلك حتى تسمح للنص الموجود بداخلها بأن يبقى على خطوط النظام الشبكي ليبدو كل شيء متوازنًا.

تبقى علينا الآن أن نقوم بإضافة الـfooter، لذلك قم برسم مستطيل بسيط في نهاية الصفحة واجعل هذا المستطيل يأخذ ارتفاع سطرين من أسطر النظام الشبكي وقم بإعطائه لونًا اسودًا وقم أيضًا بتغيير نمط المزج (blending mode) إلى Overlay.

أخيرًا وليس آخرًا، قم بإضافة بعض العناصر إلى الـfooter.

لاحظ أنّه مع أننا لم نستخدم في هذا التصميم أي صور أو عناصر بصرية، إلّا أنّ الصفحة بقيت جميلة ومؤثرة وذلك لاستخدامنا لشبكة خطوط قاعدية (baseline grid) مناسبة مما جعل كل شيء متناسقًا.

يمكنك في الصورة رؤية النتيجة النهائية بدون وجود الخطوط الشبكية وكيف أنّ كُلّ شيء في الصفحة يبدو متوازنًا ومتناسقًا مع بعضه.

ترجمة -وبتصرّف- للمقال Create a Typography Based Blog Design in Photoshop لصاحبه Iggy.

في درسنا هذا سنتعلم طريقة تصميم مؤقت عد تنازلي والذي نجده في نظام التشغيل iOS 7 بواسطة برنامج فوتوشوب .

هيمن التّصميم المسطّح مؤخّرا على شبكة الأنترنيت، ولا شك في أن الجميع بات يعلم سعي شركة أبل لخلق نظرة جديدة وشعور جديدة تجاه أنظمة تشغيلها، لقد كنت سعيدا حقا عند رؤيتي لبعض التصاميم التي تم إصدارها قبل صدور نسخة نظام التشغيل iOS 7. لهذا قمت بتجهيز هذا الدرس والذي سيستند فيه كل من الشكل والألوان على الخلفيات التي تم إصدارها، و سيكون هذا الدرس سريعا جدا ومناسبا للمبتدئين وسيساعدهم في فهم القوة التي يتمتع بها التحويل الحر.

1. نقوم بفتح ملف جديد وليكن بالمقاسات التّالية: 730px*410px، ثم نضيف الخطوط التوجيهية guidelines عن طريق سحب أداة المسطرة Ruler Tool التي تظهر في الأعلى وعلى الجهة اليسرى، ووضع الخطّين النّاتجين في مركز العمل (خط عمودي وآخر أفقي):

2. نرسم دائرة باستخدام أداة (Ellipse Tool (U مقاسها 120px*120px، نضعها في مركز مساحة العمل لكن مع إخفاء طبقة التعبئة fill وتحديد قيمة stroke بـ: 5px، أمّا اللّون فنختار #e1e1e1:

3. نقوم بتكبير مساحة العمل بنسبة 1200% ونرسم خطًا عرضه 1px باستخدام الأداة (Line Tool (U، بدءًا من الحافّة العلوية إلى غاية مركز الدّائرة:

4. من لوحة المفاتيح نضغط Ctrl+Alt+T، فتظهر لنا النّقاط التي تتحكّم بتحويل الشّكل.هل شاهدت النقطة المحورية (التي تظهر في وسط الخط) دعنا نقوم بتحريكها إلى الحافة السفلى من الخط عن طريق الضغط على مفتاح Alt في لوحة المفاتيح والنقر وسحبه إلى الأسفل:

5. قبل الضغط على المفتاح Enter وبينما النقاط التي تتحكم بتحويل الشكل لا زالت تظهر نقوم بتغيير قيمة الدوران Rotation إلى 10 درجات ثم نضغط على الزر مرتين Enter:

6. من لوحة المفاتيح نضغط Shift+Ctrl+ Alt+T لنسخ ما قمنا بتصميمه في الخطوة السابقة، نستمر في الضغط إلى غاية الحصول على شكل حلزوني كما يظهر في الصورة:

بعدها نقوم بتغيير اللون إلى الأبيض:

7. نقوم بمضاعفة الشكل الأساسي الأول الذي قمنا بعمله ونضعه في أعلى قائمة الطبقات layers panel، حيث أن ذلك سيكون مؤشر الدوران:

نقوم بتطبيق التدرج اللوني gradient overlay:

8. نقوم بتغطية الجزء الذي نريد إخفاءه ونتأكد أنه يتوافق مع اليوم الذي نريده وكذلك الوقت، الدقائق والثواني التي سوف نضعها:

9. باستخدام أداة النص (Text Tool (T نضع رقم اليوم الذي نريده وكذلك الوقت، الدقائق والثواني مع إضافة تسمية مناسبة:

الخطوة الأخيرة

نقوم بتجميع الطّبقات التي قمنا بعملها ومضاعفتها 4 مرات، ثم نرتّبهم بشكل أفقي مع تحديد مسافة 20px للفصل فيما بينهم:

ترجمة -وبتصرّف- للدّرس Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired لصاحبه James Richman.

سيساعدك هذا الدّرس على تعلّم طريقة عمل خلفية مُلفتة وفريدة من نوعها في بضع خطوات، حتّى المبتدئين بإمكانهم تطبيق هذا الدرس وإضافة لمساتهم وأسلوبهم الخاص، أنا على ثقة تامّة بأنكم ستستمتعون وتتعلّمون.

من بين المهارات التي ستُتقنونها هي طريقة عمل خلفيّة جميلة، إضافة تأثير التوهّج وكذلك التعامل مع الخط، الحجم والألوان لجعل بعض المناطق بارزة.

حسنا فلنبدأ.

الخطوة الأولى: عمل الخلفية

بداية نقوم بفتح ملف جديد بالمقاسات التالية: 1920px*1200px ونختار له اللّون 242424#، نضاعف طبقة الخلفية ونغير اسمها إلى Film grain. بعدها نتّبع المسار التّالي:

Filter > Artistic > Film Grain

مع تطبيق الإعدادات التي تظهر في الصورة:

نخفّض قيمة opacity للطّبقة إلى 50 بالمئة حتى تظهر لنا النتيجة كما في الصورة:

الخطوة الثانية: عمل التوهج

نقوم بعمل طبقة جديدة وليكن اسمها Lighting، بعدها نحدد أداة Radial Gradient مع استخدام اللونين الأبيض والأسود:

نغيّر نوع الطبقة إلى Overlay وقيمة opacity إلى 50 بالمئة حتى نحصل على التالي:

الخطوة الثالثة: استخدام الفرش

نحمِّل الفرشاة التالية، نضيف طبقة جديدة ونقوم باستخدامها قليلا حول الشّكل السابق، ثم نحدد قيمة opacity بـ: 50 بالمئة.

نقوم بوضع الخامة التالية فوق الشكل الذي قمنا بتصميمه:

ونقوم بتحديد نوع الطبقة بـ: Overlay وقيمة opacity بـ: 10 بالمئة:

الخطوة الرابعة: كتابة النص الأساسي

نقوم بتحميل الخط BEBAS، ثم نفتح طبقة جديدة ونكتب فيها النّص الذي نريد، اخترت مقاس الخط 350pt وفضّلت أن يكون ناعما (smooth mode) أمّا اللون فلك حرية الاختيار، أخيرا نقوم بتسمية الطبقة PEACE:

الخطوة الخامسة: إضافة خلفية النص (خطوة جد هامة)

نقوم بتخفيض قيمة opacity الخاصّة بالنّص إلى: 15%، بعدها نتبع المسار التالي لعمل مجموعة طبقات:

 Layer > New > Group

ونقوم بتسمية تلك المجموعة بـ Words.

نفتح طبقة جديدة ونحاول كتابة كلمات مختلفة واستعمال مقاسات وأنواع خطوط مختلفة كذلك، مع تجنب وضع مسافات كبيرة بين تلك الكلمات، بالنسبة لي استخدمت هذه الخطوط:

• Arial
• Cambria
• Candara
• Impact
• Tahoma
• Times New Roman
• Verdana
• وبعض الخطوط الإفتراضية
• كذلك يمكن استعمال بعض من هذه الخطوط المجانية dafont ،Colaborate ،Extravaganzza

الخطوة السادسة: عمل بعض التأثيرات

نقوم بمضاعفة مجموعة الطّبقات التي قمنا بتسميّتها بـ Words:

Layer > Duplicate Group

ثمّ ندمجها (Ctrl+E)، بعدها نجعل مجموعة الكلمات (غير المدمجة) غير مرئية invisible، نحدّد أكبر نص لدينا (في تصميمي حددت كلمة PEACE) ونضغط على CTRL (لمستعملي أجهزة mac نختار Command) ثم نضغط على الصورة المصغّرة في الطبقات:

نضغط على طبقة الكلمات المدمجة ثم نضغط على Ctrl+J، إذا كنت قد دمجت الطبقة Words وكانت مجموعة الطبقات غير المدمجة لازالت غير مرئية فستحصل على النتيجة التالية:

الخطوة السابعة: عمل تأثيرات لخلفية النص

نقوم بإظهار طبقة Words المدمجة من جديد ونطبق النمط التالي:

نحدد قيمة opacity بـ:30%:

نضاعف الطبقة المدمجة Words، ونضعها في الأسفل، بعدها نتبع المسار التّالي:

Filter > Blur > Motion Blur

مع تطبيق نفس الإعدادات التي في الصّورة:

نحدد قيمة opacity بـ:15%:

بإمكاننا أن نضيف أيضا نص أسفل العنوان:

الخطوة الثامنة: اللمسات الأخيرة

نحدّد الطبقة التي تحتوي على كلمة PEACE ونغير قيمة opacity إلى 4 بالمئة:

نقوم بعمل طبقة جديدة ونذهب إلى:

Image > Apply Image

ثم نتبع المسار التالي:

Filter > Render > Lightning Effects

مع تحديد الإعدادات التالية:

نحدد قيمة opacity بـ:30%، وبهذا نكون قد أنهينا درسنا.

كذلك قمت بإضافة gradient map لإحدى طبقات الكلمات وكانت هذه هي النتيجة:

ترجمة -وبتصرّف- للدّرس How To Create Great Typographic Wallpaper In Photoshop لصاحبه James Richman.

سيكون هذا هو الدرس الأول من أصل درسين سنقوم من خلالهما بتصميم وتكويد واجهة موقع لغابة افتراضية اسمها "Pinewood Forest". سنستخدم في تصميم هذه الواجهة العديد من textures وخليط من اللونين الأزرق والرمادي.

ستكون النتيجة النهائية كما في الصورة التالية:

سيكون الهدف من هذا الموقع هو تعريف الزوار بهذه الغابة وما تقدمه وإعلامهم بالأحداث القادمة، وستحتوي خلفية الموقع على صورة كبيرة ثابتة لتسمح بتمرير (scroll) محتوى الموقع فوقها، كما سيتم تقسيم محتوى الموقع إلى عدة أجزاء رئيسية مع استخدام بعض الصور الفوتوغرافية لجذب انتباه الزائر.

سنقوم في هذا الدرس بتصميم الواجهة الرئيسية للموقع باستخدام برنامج الفوتوشوب، أمّا في الدرس الثاني فسنقوم بتكويد التصميم باستخدام لغتي HTML وCSS.

سنبدأ أولًا بإنشاء مستند جديد، وبما أنّ التصميم سيحتوي على صورة خلفية كبيرة فإننا سنحتاج إلى إنشاء مستند يستطيع استيعاب الشاشات ذات الدّقة والأبعاد الكبيرة (24 أو 27 انش). 

باستخدام أداة marquee قم برسم منطقة في منتصف الصفحة بعرض 960px وقم بوضع guides على طرفي ما قمت برسمه. ستكون هذه المنطقة هي المنطقة التي سوف تحتوي على المحتوى الرئيسي للموقع.

قم بتحميل صورة ذات أبعاد كبيرة يمكنها تغطية معظم الصفحة (يمكنك تحميل الصورة التي استعملتها في هذا الدرس من هنا). قم الآن بإدراج هذه الصورة في المستند وقم بتعديل أبعادها لتتناسب مع الشاشات الكبيرة (لنقل 1920px) واجعل هناك هامش بسيط على كلا الجانبين، ثم ضع guide أسفل الصورة ليصبح كل شيء كما في الصورة التالية:

قم الآن بإضافة Layer Mask للصورة واستعمل بعضًا من الفرش المائية (Watercolor brushes) لإبهات الأطراف. قم بتخفيف شفافية (opacity) الفُرش لإنشاء مظهر أجمل لتصبح الصورة وكأنها متداخلة مع الخلفية:

قم باستعمال خطّي League Gothic وClarendon لإنشاء الشّعار الخاص بالموقع وقم بوضعه في منتصف الصفحة. قم بتعديل حجم الخطوط حتى يكون التركيز أكبر على كلمة "Pinewood" وقم بمحاذاة الكلمتين عن طريق زيادة المسافة بين الحروف (the tracking) في كلمة "forest". سيكون الشعار مشابهًا للصورة:

قم بإضافة تأثيري Drop Shadow وGradient Overlay لكلمة "Pinewood". سوف يضفي كلا التأثيرين نوعًا من العمق على الشعار وسيجعلانه بارزًا أكثر في الصفحة. حاول أن تجعل التباين (contrast) قليل بين تأثير الـgradient وشفافية الظل (shadow) حتى يظهر بشكل أفضل:

قم بإضافة/كتابة عناصر القائمة الرئيسية وقم بتوزيعاها على التساوي على كلا جانبي الشّعار. يمكنك استعمال خط Georgia كخط بديل عن Clarendon الذي استعملناه في الشّعار. يمكن تنفيذ التباعد بين حروف الكلمات (tracking) باستعمال الخاصية letter-spacing الموجودة في لغة CSS وهو ما سنفعله لاحقًا في الدرس القادم.

قم برسم مستطيل كبير بين الـguides ذات العرض 960px التي وضعناها في خطوة سابقة وقم بملء هذا المستطيل بلون رمادي فاتح كاللون المستعمل في تأثير gradient الخاص بالشّعار:

قم بإضافة Noise خفيف عن طريق الذهاب إلى:

 Filter > Noise > Add Noise 

ولتكن القيمة 2.5% لإعطاء نوع من الجمال الحسي على منطقة المحتوى في الموقع.

اضغط على زر ctrl في لوحة المفاتيح وأبق يدك على هذا الزر وبعدها اضغط بزر الفأرة الأيسر على الصورة المصغرة (thumbnail) للطّبقة (layer) التي أنشأناها في الخطوة السابقة. ستلاحظ أنه تم اختيار المنطقة الخاصة بتلك الطبقة. قم الآن بالضغط بزر الفأرة الأيمن على ما تمّ اختياره واختر Transform Selection ثم قم بتقليص الطول والعرض بنسبة 40px واملأ تلك المنطقة باللون الأبيض، بعدها قم بإضافة تأثير Drop Shadow على تلك الطبقة:

قم بتحميل فرش paint roller واستعملها في جعل الحواف الرمادية خشنة نوعًا ما وذلك عن طريق الرسم على قناع الطبقة (layer mask). فعّل التحديد (selection) الخاص بالمنطقة البيضاء واملأها باللون الأسود فوق قناع الطبقة (layer mask) لجعلها شفافة ثم بعد ذلك قم بإنقاص شفافية الحواف الرمادية إلى 60% حتى تظهر الخلفية التي وراءها:

قم بتحميل صورة ما لوضعها كخلفية للمنطقة البارزة (main feature area) في الصفحة، ثم باستخدام أداة marquee selection قم برسم مستطيل كما ها موضح في الصورة أعلاه، بعد ذلك اضغط بزر الفأرة الأيمن على تلك المنطقة واختر Select Inverse ثم اضغط على زر delete من لوحة المفاتيح:

يمكنك ملاحظة أن ألوان الصورة لا تتناسب كثيرًا مع الموقع، لذلك سنقوم ببعض التعديلات باستخدام أداة Curves. قم بتعديل قنوات اللونين الأخضر والأحمر على شكل يشبه حرف S واللون الأزرق على شكل حرف S ولكن معكوس كما هو موضح في الصورة:

قم بتقليل تشبّع (saturation) الصورة لتخفيف حدّة الألوان. ستظهر ألوان هذه الصورة بعد التعديلات بشكل يتلائم مع ألوان التصميم:

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

قم بتعديل حجم وتباعد الحروف الخاصة بنص العنوان لإضفاء بعض الجمال، بعد ذلك اجعل حجم الخط للفقرة 14px:

عليك الآن باستعمال نفس التأثيرات المستعملة في الشّعار (Gradient Overlay و Drop Shadow) وتطبيقها على النص الذي كتبته للتو:

سنحتاج الآن إلى إضافة زر call to action لإخبار الزّوار إلى أين يمكنهم ان يتوجهوا بعد تصفحهم للصفحة الرئيسية. لفعل ذلك قم برسم مستطيل بحجم مناسب واملأه بلون أزرق متوافق مع اللون العام للموقع، ثم قم بإضافة فلتر noise خفيف لتخشين الزر قليلًا. بعد ذلك استعمل أداة المسح (Eraser tool) واختر pencil بعرض 1px وقم بمسح جزء من كل طرف من الأطراف الأربعة للزر. أنظر الصورة التالية:

قم بإضافة تأثير Inner Glow للزر واستعمل لون أزرق أدكن بقليل من لون الزر نفسه. لتكن الإعدادات عبارة عن Normal blending mode وشفافية (opacity) بنسبة 100% وقم بتعديل الأحجام حتى تصبح ملائمة. قم أيضًا بإعطاء الزر إطار(stroke) بحجم 1px باستعمال لون أرزق أفتح بقليل من لون الزر:

ويتبقى في الآخر إعطاء نص مُعبّر لوضعه على الزر، وتأكّد أيضًا أن جميع عناصر المنطقة البارزة (feature area) مرتّبة بشكل مناسب وأنيق:

قم الآن بتعبئة منطقة المحتوى بالنصوص التي تريدها، واجعل حجم خط العنوان أكبر بقليل واجعله يتمدد على عرض الصفحة بالكامل. افصل النص المتبقي إلى عمودين؛ واحد عريض للمحتوى الرئيسي والآخر بعرض أصغر للمحتوى الجانبي (sidebar). يجب علينا أيضًا أن نميّز الروابط بلون مختلف عن باقي النص، لذلك قم بتلوين بعض الكلمات بلون أزرق واجلعها تحتوي على خط أسفلها (underline).

في جزء المحتوى الجانبي (sidebar) سيكون هناك ثلاث مناطق تؤدي إلى مناطق أخرى في الموقع، بحيث تحتوي كل واحدة من هناك المناطق على صورة، عنوان وفقرة قصيرة. قم بإضافة خلفية مزخرفة وذلك باستعمال paint roller brushes وقم بعد ذلك بقص صورة خارطة ووضعها داخلها:

استعمل paint roller brushes لإنشاء خلفية أخرى بلون أزرق أدكن بقليل من اللون الذي استعملته في الخطوة السابقة وستكون هذه الخلفية هي المكان الذي سيحتوي على العنوان الخاص بكل منطقة. لا تنسى قص الأجزاء المتداخلة لتتوافق مع طرف الصورة.

قم بإضافة عنوان قصير فوق الخلفية التي أنشأناها في الخطوة السابقة وقم بإعطاءه نفس التأثيرات المستعملة في النص الموجود في الـfeature section:

قم بوضع كل العناصر التي أنشأناها إلى الآن في مجلد واحد وبعد ذلك قم بنسخ ذلك المجلد مرتين وقم بالتعديل على عناصر كل مجلد بالشكل المناسب. أنظر الصورة:

سوف نضيف الآن قسم "Upcoming events" أسفل النص الموجود في العمود الرئيسي. قم باستعمال نفس تنسيقات الخطوط الموجودة في الترويسة وباقي المحتوى الرئيسي، وبعدها قم بإنشاء جزء خاص بالتاريخ واستعمل لون رمادي مشابه للإطار(border):

كل حدث سيحتوي على التاريخ، عنوان، بعض المعلومات ووصف بسيط:

يمكننا الآن التخطيط لكيفية تحويل هذا التصميم إلى ملف HTML وهذا ما سنفعله في الدرس القادم بإذن الله.

وبهذا نكون قد وصلنا إلى نهاية المقال، وأصبح لدينا تصميم جاهز يمكننا تحويله إلى صفحة ثابتة باستعمال لغتي HTML وCSS.

ترجمة -وبتصرّف- للمقال Design a Textured Outdoors Website in Photoshop لصاحبه Iggy.

سنقوم بتصميم أيقونة غيمة زاهية وجذّابة عن طريق اتباع هذا الدرس المفصّل خطوة بخطوة. سنستخدم الكثير من التدرجات وتأثيرات الإضاءة لعمل أيقونة غيمة رائعة ومثالية لاستخدامها عند تصميم موقع جديد أو تطبيق للنقّال.

ولكي نعطي للأيقونة مظهرًا ثلاثيّ الأبعاد سنستخدم العديد من الألوان. يتيح لنا مزيج الألوان من البنفسجي والأزرق في إبراز القاعدة الملّونة، وستساعد الإضاءات في ابراز الأيقونة ورفعها عن مستوى الشاشة.

افتح مستند فوتوشوب جديد وابدأ برسم دائرة في طبقة (layer) جديدة باستخدام Elliptical Marquee Tool واملأها باللون الأسود. اضغط على المفتاح Shift، ومع الاستمرار بالضغط قم بتحريك التحديد إلى احدى الجوانب لعمل نسخة من هذه الدائرة واملأها بالأسود أيضًا. بعد ذلك قم بملأ المساحة الوسطية باستخدام Rectangular Marquee Tool، وتأكد من محاذاة الحافة السفلية بصورة جيدة.

ارسم دائرتين احداهما أكبر قليلًا والأخرى أصغر قليلًا بحث تتداخل مع الدائرتين اليمنى واليسرى الأصليتين باستخدام Elliptical Marquee Tool من جديد.

إذا كانت هنالك أي فراغات في الوسط فقم بملئها ليصبح الشكل كالغيمة.

انقر بشكل مزدوج على طبقة الغيمة لتفتح لك نافذة أنماط الطبقة (layer styles window)، ثم قم بإضافة Gradient Overlay. قم بإضافة لون ثالث في الوسط وغيّر الألوان إلى 300a85 ،#2555dd# وc8ecff# عمل أيقونة غيمة رائعة باستخدام فوتوشوب. عندما تقوم باختيار الألوان تجنّب اختيار الدرجة (tone) من نفس الصبغة (hue)؛ وإنما قم بالاختيار من عجلة الألوان بحيث تكون الاختلافات في الألوان أكثر حدة، وبالتالي تصبح الدرجات أكثر دفئًا أو أكثر برودة.

قم بإضافة تأثير Inner Glow للغيمة لإعطائها مظهر ثلاثي الأبعاد. غير اللون إلى الأبيض، الوضع (mode) إلى Soft Light، وقيمة Opacity 100%، ثم تلاعب بالحجم الخاص بالتأثير-حسب ما تراه مناسبًا-.

يمكن استخدام تأثير Inner Shadow لإبراز الجهة العليا بشكل رائع. غيّر اللون الافتراضي من الأسود إلى الأبيض ثم غّير الوضع إلى Overlay لكي تسمح للألوان بالتداخل. قم بتعديل إعدادات Distance ،Choke وSize بحيث يعطي مظهر متوازن ما بين خشن/لامع وأملس/ناعم.

اضغط موافق لتطبيق تأثيرات الطبقة ثم اضغط Ctrl + طبقة الغيمة لعمل استعادة للتحديد ثم اذهب إلى:

 Select > Modify > Expand

وضع القيمة 5px.

املأ التحديد الجديد باللون الأسود وبطبقة جديدة تحت طبقة الغيمة الرئيسية لعمل إطار خارجي.

افتح نافذة أنماط الطبقة لطبقة الإطار الخارجي وقم بإضافة Gradient Overlay. اختر نفس الالوان البنفسجية والزرقاء لكن بتغيير كافٍ في الدرجة (tone) لكي تتباين مع طبقة الغيمة. استخدمتُ هنا الألوان 4c54e5 ،#c0e8ff# و571a9b#.

اعمل استعادة تحديد (Load Selection) لطبقة الغيمة مرة أخرى ثم اضغط بزر الفأرة الأيمن واختر حدّ (Stroke) في طبقة جديدة.

غيّر عرض الحد إلى 2px واللون إلى الأبيض ثم تأكد من إن الموقع في الداخل (Inside).

امسح الجزء السفلي من الإطار باستخدام الممحاة (Eraser) وبفرشة ناعمة كبيرة مكوّنًا بذلك تلاشي متدرّج من الأعلى إلى الأسفل. هذه اللمسة البسيطة تضيف إضاءة دقيقة إلى الأيقونة.

ارسم بقعة سوداء أسفل الغيمة في طبقة جديدة، ثم عن طريق التحويل (transform) قم بتسويتها وتسطيحها بحيث يصبح شكلها أقرب للظل.

اقسم الظل إلى نصفين باستخدام أدوات التحديد (Marquee وSelection). اضغط على المفتاح Shift واستمرّ بالضغط لتتأكد من إن النصف الثاني يبقى في نفس المستوى.

استخدم Single Column Marquee Tool لعمل تحديد، ثم اضغط Ctrl+T وقم بسحب التحديد ليملأ المنطقة الوسطية للظل بقطعة مستقيمة.

حرّك الظل حتى يصبح تحت الغيمة على الأرضية، ثم قم بإضافة Gradient Overlay من نافذة أنماط الطبقة. استخدم للظل درجات أغمق من الألوان الأزرق والبنفسجي. الظل في الواقع ليس أسودًا وإنما هو مكّون من مزيج من الألوان والانعكاسات التي حوله.

انتهينا من صنع أيقونة غيمة رائعة الآن. التدرجات والإضاءات ساعدت حقّا في عمل مظهر ثلاثي الأبعاد، بينما التنوع في الألوان يعطي بدّقة إحساس أكثر واقعية للظل.

ترجمة -وبتصرّف- للدّرس How to create a vibrant cloud icon in Photoshop لصاحبه: Iggy.

قبل البدء قم  بتحميل ملف الحشو (pattern) لكي نقوم باستخدامه لاحقًا.

ستقوم عند إتّباعك لهذا الدرس بتصميم أيقونة عدّاد بكامل تفاصيله وذلك باستخدام العديد من أنماط الطبقة لعمل التّدرجات والظلال للحصول على شكل مفصّل، قريب من الواقع وبحجم كبير. ثم ستقوم بالتعديل على الحجم للحصول على أحجام نموذجية متنوّعة.

إن ما يميّز هذه الأيقونة هو شريط عدّاد أملس وملوّن موضوع داخل إطار مشطوف من الكروم، بالإضافة إلى التراكيب والتدرجات التي تضفي عليها مظهرًا دقيقًا. سيكون حجم 256px * 256px هو الأكبر والأكثر تفصيلًا، وبعد ذلك سنقوم بتحجيمها تدريجيّا إلى 128px ،64px ،48px، و32px. وكل حجم من هذه الأحجام سيصبح أقل تفصيلًا لكن سنقوم بتعديلها بشكل طفيف ليتم استخدامها بهذا الحجم الصغير.

سنبدأ بالأيقونة الكبيرة. ارسم دائرة في طبقة جديدة بقطر 256px باستخدام Elliptical Marquee Tool واملأها بأيّ لونٍ كان. انقر بشكل مزدوج على طبقة (layer) الدائرة لتفتح نافذة أنماط الطبقة (layer styles window). قم بإضافة Gradient Overlay متدرّجًا من الرمادي الغامق إلى الفاتح ليعطي تأثير معدني لامع.

قم بإضافة حدّ (stroke) بعرض 1px بلون رمادي متوسط ما بين درجتي اللونين المستخدمين في التدرّج السابق. إنّ عمل الأيقونة باستخدام أنماط الطبقة سيسهّل إعادة تصميم الأيقونات الأصغر حجمًا حيث إن كل تأثير يمكن إعادة تحميله والتعديل عليه بسرعة بواسطة نافذة خيارات أنماط الطبقة.

اضغط على طبقة الدائرة+Ctrl لعمل تحديد للدائرة ثم اضغط بزر الفأرة الأيمن واختر Transform Selection، بعدها قم بتقليص التحديد بينما تضغط على المفتاحين Shift+Alt. املأ التحديد الجديد باللون الأسود وفي طبقة جديدة.

افتح نافذة أنماط الطبقة للدائرة الجديدة وقم بإضافة Gradient Overlay بلونين؛ أسود ورمادي غامق لكي تشكّل قاعدة لوحة العدّاد.

قم بإضافة تأثيرّي Inner Glow وStroke لنفس الطبقة مستخدمًا درجات من الرمادي الفاتح لإعطائها شكل معدن الكروم.

اعمل استعادة للتحديد (load selection) بالضغط على طبقة الدائرة ومفتاح Ctrl في نفس الوقت، ثم أضف طبقة جديدة واملأها بالحشو(pattern) الموجود في الرابط في بداية الدرس (أختر الحشو كالذي في الصورة أعلاه). غير وضع (mode) الطبقة إلى Multiply وذلك لتحويل المناطق البيضاء إلى شفافة واختر قيمة Opacity 25%.

قم بعمل استعادة تحديد (load selection) للدائرة مرّة ثانية ثم قلّص الحجم بشكل طفيف ثم املأها -في طبقة جديدة- باللون الأبيض. اعمل استعادة تحديد من جديد، قلّص حجم الدائرة أكثر هذه المّرة ثم احذف هذا التحديد (اضغط فقط على مفتاح delete) لتتشكّل لديكَ حلقة بيضاء. بعد ذلك قم بعمل تحديد مربّع، اضغط زر الفأرة الأيمن واختر Transform Selection، قم بتدوير المربع بـ 45 درجة (مع الضغط باستمرار على مفتاح shift) ثم قم بتحريكه إلى الأسفل بحيث تكون الحافة العُليا للمعين محاذية لمركز العدّاد. احذف هذا الجزء المحدد من الحلقة البيضاء.

افتح نافذة أنماط الطبقة للقوس الأبيض ثم أضف Gradient Overlay، استخدم تدرّج قوس قزح الافتراضي. غيّر النمط إلى Angle، ثم غيّر الموقع إلى أن يصبح التدرّج مبدوءا بالأزق ومنتهيًا بالأحمر. بعدها قم بإضافة تأثيرInner Shadow إلى الحافّة العُليا.

ارسم دائرة صغيرة في طبقة جديدة في مركز العدّاد واضف تأثير Gradient Overlay للطبقة مستخدمًا درجات من اللون الرمادي لإعطائه نمط معدني. كذلك قم بإضافة تأثير Drop Shadow لإعطائه عمق ولمسة من الواقعية.

قم بإضافة طبقة جديدة تحت طبقة المسمار المركزي، ارسم شكل إبرة باستخدام Polygonal Lasso Tool، ثم قم بإضافة تأثير Gradient Overlay مستخدمًا درجات فاتحة وغامقة من اللون الأحمر. غيّر زاوية التدرّج بحيث يكون مُنسابًا بالضّبط أسفل وسط الإبرة، ثم أضف تأثير Drop Shadow بشكل يعطي انطباع أن الإبرة مرفوعة قليلًا عن واجهة العدّاد.

اكتملت الأيقونة الأكبر الآن. كل هذه التدرّجات ساعدت على توليد الإضاءة والظل التي شكّلت أيقونة أقرب للواقعية. الآن سنقوم بعمل الأيقونات بأحجام أصغر.

قم بتحديد جميع الطبقات ثم اضغط Ctrl+T. ادخل قيم الأبعاد التي تريدها للأيقونة الأصغر؛ استخدم شريط الأدوات العلوي.

ستختفي بعض التأثيرات عند تصغير الأيقونات، أو إنّ حجم هذه التأثيرات سيكون كبيرًا جدّا بحيث يظهر بصورة غير صحيحة في الأيقونة الأصغر. لذلك قم بإزالة التأثيرات التي لم تعد مرئيّة من نافذة أنماط الطبقات.

ستحتاج التأثيرات الأخرى كالتدرّجات والظلال إلى تعديل لتتوافق مع حجم الأيقونة الصغير. وعليه اذهب إلى نافذة أنماط الطبقة وقلّل حجم كلّ تأثير من هذه التأثيرات.

الشيء الرائع في أنماط الطبقة هو إنّ التأثيرات تبقى كما هي حتى بعد تغيير محتوى الطبقة بشكل كامل. في الأيقونة الصغيرة جدّا سيصبح المسمار المركزي بالذات صغيرًا جدّا، لذلك قم بعمل دائرة أكبر في نفس طبقة المسمار وسيتمّ إضافة نفس نمط الطبقة (التدرّجات والظلال) تلقائيّا.

في الأيقونة الكبيرة تظهر كافة التفاصيل، لكن عند تقليص الحجم اختفت بعض هذه التفاصيل. لذلك تم تعديل الخصائص ليبقى التصميم واضح المعالم؛ يتضمن هذا عمل المسمار والإبرة بحجم أكبر، وإبدال تدرّجات إطار الكروم بحد (stroke) عادي رماديّ اللون.

ترجمة -وبتصرّف- للدرس How to create a detailed gauge icon in Photoshop لصاحبه: Iggy.

سنقوم في هذا الدرس بعمل الشكل الخارجي لحقيبة باستخدام الأشكال الأساسية، أما بالنسبة للتفاصيل الدقيقة التي تُبرز معالم الأيقونة سنقوم بعملها باستخدام أنماط طبقة مختلفة مثل Inner Glow وStroke. ولكي نجعل شكل الحقيبة أكثر واقعية سنستخدم الخامات لإعطائها ملمس جلدي.

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

العديد من الأيقونات تأتي بأحجام كبيرة هذه الأيام؛ تتراوح ما بين 16px إلى 512px. ابدأ بمستند فوتوشوب جديد بحجم 256px * 256px لعمل الأيقونة بالحجم الأكبر.

ارسم مستطيلا ناعم الحوافّ في طبقة جديدة وغيّر نصف قطر الحافّة إلى 10px. تأكّد من تغيير وضع الشكل إلى Pixels (ستجده في شريط الأدوات في أعلى الشاشة). انقر بشكل مزدوج على طبقة المستطيل لفتح نافذة أنماط الطبقة (Layer Styles Window). قم بإضافة Gradient Overlay ممتدّا من البنّي الغامق إلى البنّي الفاتح.

بعدها قم بإضافة Inner Glow، غيّر الوضع إلى Normal، قيمة Opacity 100%، اللون بنّي أفتح من الدرجة المستخدمة في التدرّج، قيمة Choke 100%، والحجم 3px.

قم بإضافة حدّ (Stroke) بحجم 2px والموقع Inside. استخدم لون بنّي غامق بحيث يكون أغمق من الدرجة المستخدمة في التدرّج.

افتح خامة الجلد (حمّل الخامة من هنا) وقم بتصغيرها ليتناسب حجمها وحجم الأيقونة. اضغط Ctrl+ طبقة الأيقونة لعمل استعادة تحديد ثم اضغط مفاتيح الاختصار Ctrl+Shift+I لعكس التحديد. احذف الزائد من الشكل لتشذيب الخامة ضمن حدود الأيقونة.

غيّر وضع طبقة الخامة إلى Soft Light لتسمح للتدرّج البنّي بالظهور ثم اذهب إلى:

 Filter > Sharpen > Sharpen

لإظهار تفاصيل الخامة.

ارسم مستطيلا آخر ناعم الحوافّ في طبقة جديدة، لكن هذه المرة سيكون نصف قطر الحافّة 5px. قم بعمل تحديد باستخدام Rectangular Marquee Tool ثم قم بقص المستطيل من الأسفل ليصبح الجزء السفليّ بحوافّ مستقيمة.

اضغط بزرّ الفأرة الأيمن على الطبقة الخاصّة بالجزء الأسفل من الحقيبة واختر Copy Layer Style. بعدها اضغط بزرّ الفأرة الأيمن على الطبقة الخاصّة بالجزء العلوي واختر Paste Layer Style للحصول على نفس أنماط الطبقة.

قم بإضافة خامة الجلد إلى طبقة الجزء العلوي من الحقيبة، ثم قم بتصغيرها وقصّها لتتناسب مع الشكل وليتطابق الجزء العلوي مع السفلي.

ارسم مستطيلا رفيع في الوسط كيّ يمثّل حزام الإبزيم. طبّق نفس أنماط الطبقة للطبقات السابقة لكن بزيادة تأثير Drop Shadow لكي يعطي لمسة أكثر عمقًا.

استخدم أدوات التحديد لرسم مربع بسيط في طبقة جديدة بأي لون كان. اختر أداة الممحاة وغيّر الوضع إلى Pencil بعرض 1px لثَلم الحافّتين السفليتين (انظر الصورة أعلاه)، لكن اترك الحافّة العليا مستقيمة.

انقر بشكل مزدوج على طبقة المربع واستخدم نفس أنماط الطبقة السابقة لإعطائها مظهر معدني. استخدم نفس إعدادات Inner Glow، Stroke، وGradient Overlay السابقة لكن غيّر درجات الألوان إلى الرمادي بدلًا من البنّي.

ارسم تفاصيل إضافية في طبقة جديدة مستخدمًا Pencil Tool وتأثيرات أنماط الطبقة لعمل فتحة القفل.

لإعطاء الشكل السابق بُنية بسيطة، دقيقة، وأقرب لشكل القفل؛ اضغط على Ctrl+طبقة فتحة القفل لعمل استعادة تحديد ثم املأ التحديد باللون الأبيض في طبقة جديدة. اذهب إلى:

 Filter > Noise > Add Noise

والإعدادات كما في الصورة أعلاه. بعدها غيّر وضع الطبقة إلى Soft Light وقيمة Opacity 50%.

استخدم نفس إعدادات طبقة القفل المعدني لعمل قاعدة لمقابض اليد على الحافّة العُليا للحقيبة. ارسم مربعين صغيرين، اثلم الحوافّ باستخدام ممحاة 1px، ثم قصّها من الأسفل لمحاذاتها مع غطاء الحقيبة.

لعمل مقابض اليد؛ ارسم شكل بيضوي في طبقة جديدة باستخدام Elliptical Marquee Tool ثم املأه باللون الأسود. بعد ذلك اعمل تحديد بشكل بيضوي أصغر بقليل من السابق واحذف الجزء الوسطي. قم بقصّ أي جزء إضافي لحصول على مقبض شبه دائري باستخدام Rectangular Marquee Tool. لاحظ أن موقع المقبض سيكون بين قاعدتيه في الأعلى.

ولإنهاء الأيقونة قم بإضافة الظل. ابدأ بتدرّج قطري صغير في طبقة جديدة، ثم عن طريق Ctrl+ T قم بمطّه -لكن ليس بدرجة كبيرة- بصورة عمودية.

اعمل تحديد عِبر منتصف التدرّج القطري، وقم بتحريك الجزء المحدد إلى الجهة المقابلة عند زاوية الحقيبة. ستبقى المنطقة الوسطى ما بين جزئيّ الظل فارغة لذلك قم بملئها بتدرّج صغير في طبقة جديدة، ثم اضغط Ctrl+ T لمطّ الظل بصورة أفقية ما بين جزئي التدرّج السابق وعلى طول الحافّة السفلى للحقيبة (لاحظ الصورة أعلاه).

وبذلك نكون قد انتهينا من عمل الأيقونة. عدّل على الخلفية كما تريد ثم قم بحفظها بصيغة PNG لاستخدامها لاحقًا كما تشاء. إذا كنت تريد الأيقونة بحجم أصغر وقمت بتصغيرها يدويًا فإنّ ذلك سيؤدي إلى تمويه الخطوط وفقدان التفاصيل؛ لذلك من الأفضل عمل الأيقونة بنفس الخطوات من البداية لكن بحجم أصغر. ­

ترجمة -وبتصرّف- للدرس How to create a detailed briefcase icon in Photoshop لصاحبه: Iggy.

سنتعامل هنا مع العديد من أدوات الفوتوشوب لعمل أيقونة رادار مفصّل وشبه حقيقي. سنقوم بعمل الأيقونة بالعديد من الطبقات layers وبمساعدة التدرجات، الفرش، وتأثيرات نمط الطبقة layer style. سيكون الشكل النهائي للأيقونة رائعًا وسيكون بإمكانك استخدامها كأيقونة لتطبيق ماك أو تطبيق آيفون خاصّ بك.

الأيقونة عبارة عن رادار نموذجي باللون الأخضر مع شاشة مضيئة وبرّاقة. سيساعد استخدام التدرجات بطريقة ذكية في إضافة عمق إلى الأيقونة، بينما سيكون حشو pattern خطوط المسح والإضاءات الناعمة في الشاشة عنصرًا مهمًا في إضافة لمسة من الواقعية.

قم بفتح مستند فوتوشوب جديد واملأ الخلفية باللون الأسود. بالنسبة للحجم؛ قُم باختياره حسب حجم الأيقونة الذي تريده. بعد ذلك قم بعمل دائرة في طبقة layer جديدة في وسط الملف واملأها باللون الأبيض، ثم اضغط بزر الفأرة الأيمن واختر Transform Selection. قم بتقليص التحديد في الوقت الذي تضغط فيه -مع الاستمرار بالضغط- على مفتاحيّ Shift و ALT. اضغط Enter ثم امسح الجزء الوسطي من الدائرة لعمل حلقة رفيعة.

انقر بشكل مزدوج على طبقة الحلقة الرفيعة في خانة الطبقات لتفتح لك نافذة أنماط الطبقة layer styles. قم بإضافة Gradient Overlay متدرجًا من الأخضر الغامق إلى الأخضر الفاتح، ثم أضف Inner Glow خفيف باللون الأبيض.

بعد ذلك قم بتغيير إعدادات تأثير Outer Glow وذلك بإضافة ظل أسود حول الحلقة. لن يكون هذا التأثير واضحًا في هذه الخطوة، لكنه سيساعد في إضافة عمق إلى شاشة الرادار لاحقًا.

ارسم دائرة داخل مساحة الحلقة باستخدام Elliptical Marquee Tool بحيث تكون هذه الدائرة في طبقة layer جديدة تحت طبقة الحلقة ثم عبئها بتدرج أخضر. اختر ألوانًا متدرجة من الأسود إلى الأخضر المتوسط ثم الأخضر الفاتح جداً، اختر نوع التدرج قطري radial gradient.

افتح مستند جديد بحجم 2x3 px. وبعد التكبير zoom قم برسم خط عبر الحافة العليا باستخدام Pencil tool، ثم اٍذهب إلى القائمة:

Edit > Define Pattern

ارسم دائرة أخرى في طبقة جديدة داخل حدود الحلقة الخارجية ثم ٍاختر أداة التعبئة Paint Bucket Tool وغيّر أسلوب التعبئة إلى Pattern من القائمة المنسدلة، ثم اختر الحشو Pattern الذي قمت بعمله قبل قليل. غيّر الوضع mode إلى Overlay بقيمة Opacity 50%.

ارسم خطين أحدهما أفقي والآخر عمودي في طبقة جديدة باستخدام أداتي التحديد Single Row selection وSingle Column selection. ولكي تتأكد من توسيطهما؛ اضغط على مفتاحي Ctrl+A أو CMD+A لتحديد الكل ثم مفتاحي Ctrl+T أو CMD+T لعمل تحويل transform. بعدها قم بإظهار المسطرة بضغط مفتاحي Ctrl+R أو CMD+R وقم بسحب الدلائل guides التي تظهر على جابني المسطرة وجذبها snap إلى مقابض التحويل transformation grips.

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

ارسم دائرتين في الوسط ابدأ من مركز الخطين ثم ارسم الدائرة بينما تضغط على مفتاح Alt، ثم اضغط زر الفأرة الأيمن واختر حد Stroke بعرض 1px ولون أبيض.

ارسم -في طبقة جديدة- مضلّعًا خارجيّا لاحتواء مدى الرادار باستخدام Polygonal Lasso tool وانتبه جيدًا إلى المحاذاة إلى الوسط. قم بإضافة بقعة بيضاء باستخدام فرشاة ناعمة كبيرة.

قم بعمل تحديد إضافي للحلقة وذلك بالضغط على Ctrl وطبقة الحلقة في نفس الوقت -انتبه إلى أن المضلع مازال محدّدًا- ثم أمسح أي شيء زائد وغير مرغوب فيه حول الحلقة من طبقة المضلّع نفسها. غيّر وضع طبقة المضلّع layer mode إلى Overlay ولذلك للسّماح للألوان بالتداخل وإنتاج تأثيرًا أخضرًا برّاق.

قم بعمل نقاط فوق الرادار في طبقة جديدة باستخدام الفرشاة، ومن نافذة أنماط الطبقة اختر Outer Glow لإعطائها توهّجًا إضافيّا.

وبهذا نكون قد حصلنا على أيقونة رادار صغيرة، رائعة، وجاهزة لتصديرها بصيغة PNG واستخدامها كملف أيقونة تعمل بشكل كامل في تطبيقك المفضّل، أو كنوع من أيقونات الواجهة لتطبيقك أو موقعك على شبكة الأنترنت.

ترجمة -وبتصرّف- للدّرس How To Create a Vibrant Radar Icon in Photoshop لصاحبه Iggy.

سنتعلم في هذا الدرس كيفية تصحيح ألوان الصور الفوتوغرافية مع إضافة تأثير عالي الدقة HD عليها باستخدام برنامج Photomatix وهو برنامج مخصص للمصورين ويمتاز بإضافة تأثيرات اكثر من رائعة على الصور، بالإضافة إلى برنامج فوتوشوب. الصور التالية تشرح الفرق (على اليمين هو الصورة بعد معالجتها وعلى اليسار الصورة الأصلية):

الصورة المُستخدمة للشرح في هذا الدرس: 

نبدأ بفتح برنامج Photomatix ومن الواجهة الرئيسية نختار Load a single photo لإستدعاء الصورة المراد التعديل عليها إلى البرنامج:

ستنبثق نافذة أخرى منها نقوم بإختيار الصورة التي نريد ثم نضغط على open:

الآن أصبحت الصورة جاهزة لإضافة التأثيرات عليها، من نفس الواجهة نضغط على Tone Map:

 بعد الضغط على Tone map انتظر قليلاً ثم سترى نافذة أخرى فيها الصورة بعد إضافة التأثير عليها وخيارات اُخرى:

1. بإمكانك التنقل بين هذه التأثيرات المختلفة، كل واحد منها له طابعه الخاص.
2. خيارات للتعديل اليدوي، في حال ازدادت الإضاءة مثلا بامكانك التحكم فيها عن طريق تلك القيم.
3. بعد الإنتهاء من اختيار التأثير المناسب لصورتك اضغط على Apply.

وسيتم تطبيق التأثير على الصورة بعد الضغط على Apply.

كما شرحنا سابقا؛ ستعود للواجهة الرئيسية للبرنامج ثم اضغط على Save Final Image لحفظ الصورة كما بالصورة التالية:

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

في برنامج الفوتوشوب نقوم بإستدعاء الصورة التي قمنا بإضافة التاثيرات عليها والصورة الأصلية معاً كالتالي:

توجه إلى الزر الذي يُشير اليه السهم بالصورة أعلاه واضغط عليه ستنبثق نافذة صغيرة اختر الخيار الموضح بالصورة التالية:

من جديد ستلاحظ إنبثاق نافذة اخرى، هذه الأخيرة لها فوائد عِدة ستكتشفها من خلال التنقل بين التأثيرات المُتاحة فيها، في الوقت الرآهن اختر التأثير الموضح بالصورة التالية:

ستلاحظ بأن ألوان الصورة قد تغيرت للأفضل، فقط تبقى مشكلة الإضاءة الحادة قليلاً. من نفس النافذة السابقة اختر Curves لتعديل الإضاءة كما بالصورة أدناه:

بعد اختيار الخيار الموضح أعلاه؛ ستأتيك نافذة صغيرة فيها مُربع تمكنك من التحكم في إضاءة الصورة كما الصورة التالية:

الخطوة الأخيرة، قم بعمل قناع Mask على الصورة التي قمنا بالتعديل عليها ببرنامج Photomatix كما هو موضح أدناه:

إختر اللون الأسود ثم توجه إلى قائمة الفُرش وطبق الإعدادت التالية:

عُد إلى طبقة القناع Mask وابدء بالمسح فوق الصورة، ستلاحظ إنخفاضا بالإضاءة وبذلك تكون قد أتممت الخطوات بنجاح.

توجد الكثير من الطُرق لتغيير لون الأعيُن عن طريق برنامج الفوتوشوب ومنها ما سنراه في هذا الدرس. سنقوم في هذا الدرس بتغيير لون عين طفل من الأزرق إلى الأخضر وهذه هي النتيجة النهائية بعد تتبع جميع الخطوات:

نجلب الصورة التالية إلى المشروع:

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

File > Open

نقوم بتكرار الطبقة الخاصة بصورة العين عن طريق الضغط على Ctrl + J أو ضغط على الزر الأيمن للفأرة واختيار الخيار التالي:

أولاً يجب تحديد الجزء المراد تغيير لونه؛ أبسط أداة يُمكن استخدامها هي أداة Elliptical Marquee Tool والتي يمكن تفعيلها كما بالصورة أدناه:

نتوجه إلى أقصى العين اليمنى كمثال؛ نضغط على الزر الأيمن للفأرة ونبدأ بسحب التحديد إلى جهة اليسار: 

نُكمل السحب حتى نصل إلى نهاية العين المراد تغيير لونها:

الآن نبدأ بتغيير لون العين، ومع ابقاء التحديد توجه إلى القائمة:

 Image > Adjustement > Hue/Saturation

ستفتح لك نافذة فيها ثلاث قيم؛ أولا تأكد من التأشير على خيار Colorize ثم ابدأ بتغيير القيم الموجودة إلى اللون الذي تريد ان يتم تطبيقه:

اضغط Ok بعد الإنتهاء وستلاحظ تغير لون العين. قد تظهر لك مشكلة ان اللون أكبر من منطقة العين كما بالصورة التالية: 



لحل هذه المشكلة قم بعمل قناع أو Mask على الطبقة العٌلوية كما بالصورة التالية:

ستلاحظ ان مربعاً صغيراً قد تم انشائه بالجهة اليُمنى:

 توجه إلى قائمة الفرش واختر الفرشاة الناعمة مع تخفيف الشفافية إلى قيمة أقل من 50%:

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

سنتمكن في هذا الدرس من تصميم منظر ظلامي قاتم  به ما يسمى بالموتى الأحياء zombies، وشخص وحيد ذالك الظلام، بالاعتماد على مجموعة من الصور والفرش وكذا تقنيات على برنامج فوتوشوب بغض النظر عن مضمون الصورة.

هذه هي النتيجة النهائية لدرس اليوم :

قبل البدء أدعوكم لتحميل الملفات المرفقة لهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الدقة: 2400x2800pixels.
• الأبعاد: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نجلب الصورة التالية للمشروع:

نزيل بأداة الممحاة (E) أسفل الصورة يشكل دقيق:

إلى القائمة:

Menu > Layer > New Adjustments Layer > Hue/Saturation 

ثم إلى القائمة:

  Menu > Layer > New Layer Adjustment > Curves

نضيف الصورة التالية:

نذهب إلى القائمة:

Menu > Filter > Blur > Gaussian Blur

في طبقة الفلتر المضاف وباستعمال أداة الفرشاة (B) بالخصائص التالية :

• الحجم 100-600 بكسل.
• الشفافية 80%.
• التدفق 80%.

نرسم باللون الأسود فوق الجزء الأحمر:

نغير في خصائص الدمج إلى القيمة Multiply:

في طبقة جديدة، وباستعمال الفرش في الحزمة المرفقة في بداية الدرس نضيف أشكال zombies:

ثم نذهب إلى القائمة:

Menu > Filter > Blur > Motion Blur

ومن القائمة:

Menu > Layer > New Layer Adjustment > Curves

:

وفي طبقة Mask كما في الصورة نرسم بفرشاة سوداء:

في طبقة جديدة باللون #423722 نرسم بواسطة فرشاة ذات الإعدادات التالية :

• الحجم 100-600  بكسل.
• الصلابة 0%.
• الشفافية 80%.
• التدفق 80%. 

ثم نخفض من قيمة الشفافية إلى 50:

نجلب  الصورة التالية للمشروع  ونحدد الجزء المحدد- الصخرة- بأداة التحديد L) Lasso Tool):

نقص الجزء المحدد أي الصخرة ونضعها أسفل الصورة.

نستخدم أداة (Burn Tool (B لإضافة بعض العُتمة على الصخرة:

ثم من القائمة:

Menu > Layer > New Layer Adjustment > Hue/Saturation

نجلب صورة الرجل للمشروع:

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

في لوحة اختيار الألوان في يسار البرنامج نختار اللونين كما في الصورة:

ثم من القائمة:

Menu > Filter > Render > Clouds

نخفض قيمة الشفافية إلى 15:

 نذهب إلى القائمة:

Menu > Layer > New Layer Adjustment > Color Lookup

نغير في خصائص الدمج إلى القيمة Screen وقيمة الشفافية إلى 74:

وهذه هي النتيجة النهائية لهذا الدرس:

ترجمة -وبتصرّف- للدّرس: L'obscurité avec Photoshop.

سنقوم في هذا الدرس بتصميم يعتمد على دمج وجه طفل -ويمكنكم استعمال صورة أي شخص- وصورة شجرة وهي تقنية التصوير الفوتوغرافي الذي يجمع بين صورتين مختلفتين في صورة واحدة وهي تقنية أصبحت جد مستعملة في الآونة الأخيرة، وباستعمال محرر الصور فوتوشوب. وهذه هي النتيجة النهائية لدرس اليوم:

قبل البدء أدعوكم لتحميل الملفات المرفقة لهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الدقة: 1800x1350pixels.
• الأبعاد: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نملأ الخلفية باللون #cbcbcb باستعمال أداة الطلاء (G):

نضيق طبقة بلون متدرج من القائمة:

Menu > Layer > New Fill Layer > Gradient

ثم نغير في خصائص الدمج إلى Hard light والشفافية إلى 59:

نجلب صورة الشجرة للمشروع:

ثم صورة الصبي ونضعها فوق صورة الشجرة – ستحتاج إلى تكبير صورة الصبي عن طريق الاختصار Ctrl+T-:

ثم من القائمة:

Menu > Layer > Create Clipping Mask

نغير في خصائص الدمج الخاصة بصورة الصبي:

للحصول على الصورة التالية:

نزيل أطراف صورة الصبي مع أطراف صورة الشجرة باستعمال أداة الممحاة (E) كما يلي:

نجلب صورة الصبي من جديد للمشروع:

باستعمال أداة Selection Tool (W) Quick نحدد الجزء الأمامي من وجه الصبي كما في الصورة:

من القائمة:

Menu > Select > Refine Edge

نحدد طبقة Mask السوداء بجانب طبقة صورة الطفل. وبأداة الممحاة باللون الأسود نزيل الجزء الملون بالأحمر- تم تلوينه للتعرف على الجزء المراد مسحه-:

نحدد جميع الطبقات بخلاف طبقة الخلفية و باستعمال الاختصار Ctl+G نضعها في مجموعة -مجلد-:

ثم نغير في قيمة الشفافية الخاصة بالمجموعة إلى القيمة 67:

نذهب إلى القائمة:

Menu > Layer > New Layer Adjustment > Black &White

ثم نغير في الشفافية إلى 50:

ثم  إلى القائمة:

Menu > Layer > New Layer Adjustment > Curves

و كذلك:

Menu > Layer > New Layer Adjustment > Photo Filter

ومن القائمة التالية:

Menu > Layer > New Layer Adjustment > Color Lookup

نغير خصائص الدمج إلى Lighten:

لنحصل في الأخير على الصورة التالية:

ترجمة -وبتصرّف- للدّرس: Tuto double exposition ou multiple exposition avec photoshop.

سنتعلم في هذا الدرس كيفية تصميم تنين ينفث النار باستخدام مجموعة من الصور والتأثيرات باستخدام برنامج فوتوشوب، حيث بإمكانك تصور اي منظر يخطر على البال وتركيب مجموعة من الصور لتحصلوا على لوحة رائعة متناسقة الألوان، أتمنى أن يعجبكم الدرس .

هذه هي الصورة التي سنحصل عليها في نهاية الدرس:

قبل البدء أدعوكم لتحميل  الملفات المرفقة لهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الدقة: 3600x2500pixels.
• الأبعاد: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نجلب الصورة التالية للمشروع – الصورة مرفقة مع الحزمة-:

باستعمال الاختصار Ctrl+T للتحكم في الصورة، نديرها كما هو مبين:

ثم الصورة الأخرى الخاصة بالسُحب:

باستخدام أداة الممحاة ذات الاختصار (E) نزيل جنيات الصورة الثانية لنحصل على الشكل:

نعيد نفس العملية –نضيف الصورة ثم نستعمل الممحاة- كما هو مبين:

في طبقة جديدة - نضيفها باستعمال الاختصار Ctrl+Shift+N-  نرسم بأداة الفرشاة (B) باللون الأسود على جوانب الصورة مع الإشارة إلى خفض قيمة الشفافية إلى 25:

نضيف طبقة جديدة وبنفس الأداة السابقة - الفرشاة- نرسم باللون #19292c في وسط الصورة :

نغير في خصائص الدمج إلى القيمة vivid Light و الشفافية إلى 35:

نضيف طبقة من نوع Gradient Map من القائمة :

Menu > Layer > New Layer Adjustment > Gradient Map

مع نغير خصائص الدمج إلى القيمة Hard Light:

نضيف طبقة أخرى من نوع Gradient Map:

في طبقة جديدة وباستعمال أداة الفرشاة نضيف الكوكب كما هو مبيّن في الصورة – الفرش محملة في الحزمة-:

مع بعض النجوم:

من نافذة خصائص الدمج نغير ما يلي:

نضيف صورة التنين للمشروع:

نغير خصائص الدمج الخاصة بصورة التنين:

نستعمل أداة الإضاءة  ذات الاختصار(O)- نضيء بعض المناطق ونُظلم أخرى-:

ثم من القائمة:

Menu > Filter>Blur > Motion Blur

مع تغيير خصائص الدمج إلى القيمة Color Dodge:

في طبقة جديدة بأداة الفرشاة باللون الأحمر وشفافية بقيمة 80 نضفي اللون الأحمر على العينين:

نجلب صورة اللهب للمشروع:

نغير خصائص الدمج إلى القيمة Screen:

ثم إلى القائمة:

 Menu > Filter > Blur > Motion Blur

نغير خصائص الدمج إلى القيمة  Color Dodge:

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

ننشئ طبقة جديدة وبفرشاة ذات اللون #f86300:

نغير خصائص الدمج إلى القيمة Linear Burn:

ثم ننشئ طبقة من نوع  Curve  من القائمة:

Menu > Layer > New Layer Adjustment > Curve

ثم من القائمة:

Menu > Layer > New Layer Adjustment > Photo Filter

ننشئ طبقة هي دمج لجميع الطبقات وذلك بالاختصار Ctrl+Alt+Shift+E:

من القائمة:

Menu > Filter > Blur > Radial Blur

وهاهي ذي النتيجة النهائية لهذا الدرس:

ترجمة -وبتصرّف- للدّرس: Un dragon cracheur de feu avec photoshop.

سنتعلم من خلال هذا الدرس كيفية تصميم أيقونات المواقع الاجتماعية مثل فيس بوك، تويتر وجوجل بلس، وبهذه الكيفية يمكنك محاكاة أي أيقونة ولما لا تصميم أيقونة خاصة بموقعكم.

وهذه هي النتيجة النهائية لهذا الدًرس بعد تتبع جميع خطواته:

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الدقة: 800x600pixels.
• الأبعاد: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نملأ الخلفية بأداة الطلاء (G) باللون #cdcdcd:

نضيف تدرج لوني من القائمة:

Menu > Layer > New Fill Layer > Gradient

نغير في خصائص الدمج إلى القيمة Overlay والشفافية إلى 30:

باستعمال أداة الشكل المستطيل بزوايا دائرية (U) نرسم مستطيل بشعاع قيمته 50 بكسل باللون #407bcc:

باستعمال الاختصار Ctrl+J ننسخ طبقة المستطيل ثلاث مرات:

نغير في خصائص الدمج الخاصة بالمستطيل الأول:

ننتقل إلى المستطيل الثاني ونكبّر من حجمه قليلا باستعمال الاختصار Ctrl+T مع الضغط على Alt+Shift عند التكبير للحفاظ على تناسبية الحجم من مركز الشكل:

نغير في خصائص الدمج الخاصة بالمستطيل الثاني:

نحدد المستطيل الثالث و نذهب إلى القائمة:

Menu > Filter > Blur > Gaussian Blur

ننتقل إلى المستطيل الرابع ونكبّر من حجمه قليلا باستعمال الاختصار Ctrl+T مع الضغط على Alt+Shift:

ثم نغير من خصائص الدمج الخاصة به:

نرسم مستطيلا جديدا بنفس حجم المستطيل الأخير باللون #175e7c:

نزيحه إلى الأسفل قليلا:

ثم نغير من خصائص الدمج الخاصة به:

نرسم  مستطيلا آخار بنفس الحجم ونغيير اللون إلى# 58a1cf -ملاحظة يمكنك نسخ المستطيل السابق والتغيير من لونه- مع إزاحته نحو الأعلى قليلا:

نغير من خصائص الدمج الخاصة به:

الآن نستخدم أداة الريشة (Pen Tool (P ونرسم شكل طائر أيقونة تويتر Twitter -ملاحظة إذا استعصى عليك الأمر يمكنك الاستعانة بأيقونة جاهزة والرسم فوقها ثم إزالة الصورة في الأخير-:

ثم نغير خصائص الدمج الخاصة بالطائر:

ننسخ طبقة الطائر ونغير في خصائص الدمج:

ننسخها مرة أخرى و نغير خصائص الدمج:

هذه هي نتجة درسنا اليوم:

بنفس الطريقة يمكننا تصميم أيقونات أخرى، أتمنى أن ينال الدرس إعجابكم.

ترجمة -وبتصرّف- للدّرس: Créer l'icône de Twitter, Facebook et Google plus avec Photoshop.

سنتعلم في هذا الدرس كيفية تصميم منظر قرش وحشي يهاجم غواصًا تحت ماء البحر، النتيجة لا يكاد اكتشاف أنها مصممة ببرنامج فوتوشوب فهي تبدو قريبة من الحقيقة، حيث سنتعلم من خلال هذا الدرس كيف يمكننا وضع مختلف الصور تحت ماء البحر وإضفاء بعض المؤثرات ليبدو الأمر حقيقيا، أتمنى أن يعجبكم الدرس.

النتيجة النهائية لهذا الدرس بعد تتبع جميع خطواته:

قبل البدء أدعوكم لتحميل الملفات المرفقة لهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الدقة: 2100x1500pixels.
• الأبعاد: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نجلب الصورة التالية للمشروع:

 ثم الصورة التالية:

ننسخ الصورة بالاختصارCtrl+J:  

نزيل بأداة الممحاة (E) جنبات الصورة بالإعدادات التالية:

• الحجم 100-200 بكسل.
• الصلابة 0%.
• الشفافية 60%.
• التدفق 50%.

ندمج الصورتين بالاختصار Ctrl+E ثم بالممحاة نزيل الجزء السفلي  منها:

ثم  بواسطة الاختصار Ctrl+Shift+U:

نغير في خصائص الدمج إلى القيمة Overlay:

نضيف طبقة من نوع Fill باللون# 041e61 من القائمة:

Menu > Layer > New Fill Layer Solid Color

نغير خصائص الدمج إلى القيمة Soft Light والشفافية إلى 56:

نجلب صورة القرش:

نستعمل أداة الممحاة لنزيل ذيل القرش:

ثم نغير من خصائص الدمج كما يلي:

ننشئ طبقة جديدة مع تفعيل خاصية Use Previous Layer to create Clipping Mask:

ثم نختار فرشاة باللون الأسود ونرسم كما في الصورة:

نغير خصائص الدمج إلى Soft Light:

نجلب الصورة التالية:

نغير في خصائص الدمج إلى القيمة Hard Light والشفافية إلى 24:

ثم نضيف هذه الصورة أيضا:

بالممحاة نزيل الجزء الملون بالأحمر:

ثم نضيف الصورة التالية أيضا للمشروع:

نستعمل أداة الممحاة مرة أخرى:

نجلب صورة الغواص ونضيفها للمشروع:

باستعمال أداة التحديد (Lasso Tool (L نحدد الغواص ونقصه ونضعه أمام فم القرش، هكذا:

ثم إلى القائمة:

Menu > Layer > New Adjustments Layer > Hue/Saturation

باستعمال أداة الشكل الدائري (U) وباللون الأسود نضيف دائرة أسفل القرش:

ثم من القائمة:

Menu > Filter > Blur > Gaussian Blur

نضيف الصورة التالية:

في ترتيب الطبقات نجعل طبقة الصورة المضافة أخيرا أسفل طبقة القرش من خلال نافذة الطبقات لنحصل على:

ثم نغير في خصائص الدمج إلى Color Dodge والشفافية إلى 66:

ننسخ الطبقة عدة مرات:

نجلب صور انعكاس أشعة الشمس تحت الماء للمشروع:

نضعها فوق القرش:

من القائمة:

Menu > Edit > Free Transform > Wrap 

نغير في شكلها:

باستعمال الممحاة و بتغيير خصائص الدمج إلى Hard Light والشفافية إلى 67:

ثم إلى القائمة:

Menu > Layer > New Adjustments Layer > Color Lookup

نغير خصائص الدمج إلى Darken والشفافية إلى 75:

مرة أخرى من القائمة:

  Menu > Layer > New Adjustments Layer > Color Lookup

وللمرة الثالثة أيضا:

نضيف طبقة جديدة وبفرشاة بيضاء نرسم عينا للقرش:

ثم نضيف طبقة باللون الرمادي عن طريق الاختصار Shift+F5:

نغير خصائص الدمج:

في الأخير هذه هي الصورة النهائية:

ترجمة -وبتصرّف- للدّرس: Les Dents de la Mer avec Photoshop.

سنقوم في هذا الدرس بتصميم منظر غروب شمسي (غسق) قاتم في الأدغال باستخدام برنامج فوتوشوب. وهذه نتيجة درسنا اليوم:

قبل البدء أدعوكم لتحميل الملفات المرفقة لهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الأبعاد: 1900x1200pixels.
• الدقة: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

باستعمال أداة الطلاء (G) نملأ الخلفية باللون البرتقالي f37c13#:

نضيف طبقة لون متدرج من القائمة:

 Menu > Layer > New Fill Layer > Gradient

نضيف بعض فرش السحاب –المرفقة في الحزمة المحملة سابقا- ونخفض قيمة شفافيتها إلى 37:

من خلال أداة الأشكال المخصصة (U) نضيف شكل أشعة الشمس كما في الصورة:

نفتح نافذة خصائص الدمج Blending Options:

ثم إلى القائمة: 

Menu > Filter > blur > Gaussian blur

في طبقة جديدة نضيف فرشاة دائرية:

ثم من نافذة خصائص الدمج:

باستعمال أداة القلم (Pen Tool (P نرسم الشكل:

ثم إلى نافذة خصائص الدمج:

في طبقة جديدة باستعمال الفرش التالية:

نضيف بعض الأعشاب:

ثم بعض الأشجار:

ثم طيور وحيوانات أخرى. وهذه نتيجة درسنا اليوم:

ترجمة -وبتصرّف- للدّرس: Comment créer un paysage de crépuscule avec photoshop.

سنتعلم في هذا الدّرس كيفية إضافة تأثير الاحتراق لورقة نقدية من فئة 100 دولار باستخدام برنامج فوتوشوب، وستكون هذه هي النتيجة النهائية لهذا الدرس بعد تتبع وتطبيق كامل خطواته:

قبل البدء أدعوكم لتحميل الملفات المرفقة لهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الدقة: 1200x800pixels.
• الأبعاد: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نجلب الصورة التالية للمشروع:

ثم صورة الورقة النقدية – يمكنكم استعمال قطعة ورق -:

باستعمال الاختصار CTRL+J  من لوحة المفاتيح ننسخ طبقة الورقة النقدية.

ثم من القائمة:

 Menu > Image > Adjustments > Hue/Saturation

نخفي طبقة الصورة النقدية في الأعلى بالضغط على أيقونة العين:

ثم إلى القائمة :

Menu > Filter > Adjustments > Blur > Gaussian blur

نخفض من قيمة الشفافية إلى 70 بالمائة:

نظهر طبقة الورقة النقدية ومن القائمة:

Menu > Edit > Transform Path > Wrap

ونغير جانب القطعة كما في الصورة:

بأداة الممحاة Eraser  ذات الاختصار (E) نختار الفرشاة كما في الصورة ونزيل جانب القطعة النقدية الأيسر:

نفعل نفس الشيء للطبقة السوداء خلف ورقة 100 دولار:

ننشئ طبقة جديدة عن طريق الاختصار Ctrl+Shift+N  كما في الصورة:

نأخذ أداة الفرشاة (Brush Tool (B سوداء اللون ونلون في جانب الورقة:

نغير في خصائص الدمج للطبقة إلى القيمة Overlay:

نكرر نفس العملية حتى نحصل على صورة مشابهة لهذه:

نفس الخطوات المستعملة قبل قليل لكن مع تغيير الفرشاة و استخدام الفرشاة المعينة  في أول الدرس:

نقوم بتحديد جميع الطبقات ماعدا طبقة خلفية الخشب ونديرها قليلا:

نضيف طبقة من نوع Photo Filter من القائمة:

Menu > Layer > New Layer Adjustment > Photo Filtre

بأداة الشكل المستطيل (U) نرسم مستطيل باللون #f8f0e0:

نخفض في قيمة الشفافية إلى 60:

ثم إلى القائمة:

Menu > Filter > Filter Gallery

نستخدم الممحاة لإضافة شكل تمزق الشريط اللاصق:

بعد ذلك نفتح نافذة خصائص الدمج Blending Options الخاصة الشريط  كما يلي:

نضيف طبقة لون متدرج من القائمة :

Menu > Layer > New Layer Adjustment > Gradient Map

Menu > Layer > New Layer Adjustment > Hue Saturation

وهذه هي النتيجة:

ترجمة -وبتصرّف- للدّرس: Effet de Billet Brulé avec Photoshop.

سنحاول في هذا الدّرس تصميم شريط ملون Ribon باستخدام برنامج فوتوشوب، وستكون هذه هي النتيجة النهائية لهذا الدرس بعد تتبع وتطبيق كامل خطواته:

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الأبعاد: 500x500pixels.
• الدقة: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

مع خلفية ذات لون #cebfae:

نجلب الصورة التالية للمشروع:

نغير في خصائص الدمج Blending Options إلى القيمة Overlay:

في طبقة جديدة SHIFT+CTRL+N وباستعمال أداة التحديد المستطيلة الشكل (Marquee Tool (M نقوم بتحديد شكل مستطيل ونملأه بأداة الطلاء (G) باللون #dc1154:

نكرر نفس العملية باللونين #94d64d و #fff000:

ندمج الطبقات الثلاث الأخيرة Ctrl+E ثم ننسخ الطبقة الناتجة Ctrl+J.

ندير الطبقة الأولى محوريا من القائمة:

Menu > Edit > Path Transformation > Flip Vertical

ثم الاختصار Ctrl+T للتعديل يدويا:

باستعمال أداة التحديد المستطيلة الشكل (Marquee Tool (M نحدد مستطيلا فوق الطبقة الأولى ثم نضغط زر Delete ثم نفس الشيء بالنسبة للطبقة الثانية:

ننشئ طبقة جديدة SHIFT+CTRL+N يبن الطبقتين الأخيرتين:

نضيف فرشاة باللون الأسود فوق الطبقة الجديدة:

نغير في قيمة الشفافية:

ثم نضيف النص:

من نافذة خصائص الدمج Blending Options نختار:

من القائمة:

 Menu > Filter > Filter Gallery

من جديد إلى خصائص الدمج Blending Options:

في مشروع جديد بحجم 3x3pixels، وباستعمال أداة الشكل المستطيل نضيف أربع أشكال بيضاء:

ثم من القائمة:

 Menu > Edit > define Pattern

نعود لمشروعنا، باستعمال أداة الطلاء مع اختيار نوع Pattern والشفافية 40 في إعداداتها، نملأ كل طبقة:

نضيف بأداة القلم الشكل التالي:

نزيل بعض الجوانب بأداة الممحاة ونخفض من شفافيته قليلا لنتحصل على الصورة النهائية:

ترجمة -وبتصرّف-للدّرس: Créer un ruban réaliste avec photoshop.

سنقوم في هذا الدرس بتصميم يعتمد بشكل أساسي على دمج الصور ويتمثل في قنينة تحتوي ماء وسفينة، بالإضافة إلى أشياء أخرى باستخدام برنامج فوتوشوب. وهذه نتيجة درسنا اليوم:

البرنامج المستعمل: Photoshop Cs6

قبل البدء أدعوكم لتحميل الحزمة الخاصة بهذا الدرس.

افتح مشروعا جديدا على Photoshop بالإعدادات التالية:

• الأبعاد: 3400x2400pixels.
• الدقة: Resolution 720Dpi.
• نمط الألوان: Color Mode RVB8bit.

نأخذ أداة الطلاء (G) ونملأ الخلفية باللون #b2eaff:

ننشئ طبقة جديدة Ctrl+Shift+N وبأداة الفرشاة نرسم بعض السحب في أعلى الصورة:

ثم نجلب الصورة التالية للمشروع:

إلى القائمة:

Menu > edit > Transform Path > Wrap

لنغير في شكل الصورة لتصبح كما هو مبين:

نغير في خصائص الدمج Blending Options:

في طبقة جديدة أخرى نرسم بفرشاة دائرية باللون الأسود في محيط العشب وبأخرى ذات لون أبيض في الجانب الأيسر في الأعلى:

ثم نغير في خصائص الدمج إلى القيمة Overlay:

نضيف صورة الرجل العجوز صاحب المكبرة إلى المشروع:

وبأداة (Magin Lasso Tool (L نحدد فقظ الرجل مع مكبرته -الأداة تتعمد طريقة تتبع الألوان وهي جيدة -:

ننسخ الجزء المحدد Ctrl+J ونحذف الصورة السابقة.

في ترتيب الطبقات نجعل صورة الرجل أسفل صورة العشب حتى يظهر لنا بالصورة التالية:

باستعمال أداة الكثافة (Brun Tool (O نضيف بعض الظلمة في أماكن العلامة + وبعض الإضاءة أماكن العلامة - :

لعمل الظل ننسخ طبقة الرجل:

ثم نقلبها عموديا Flip Vertical من القائمة:

Menu > edit > Transform Path > Flip Vertical

أو Ctrl+T ثم بالضغط على زر الفأرة الأيمن فوق صورة الطبقة واختيار Flip Vertical:

نضيف طبقة جديدة ونحدد طبقة الصورة المقلوبة سابقة مع الضغط على Ctrl ثم فوق الطبقة الجديدة نملأ باللون الأسود الجزء المحدد -نزيل الصورة بعد ذلك (صورة الرجل المقلوب)-:

ثم نذهب إلى القائمة:

Menu > Filter > Blur > Gaussian Blur

لنحصل على الظل:

نضيف الصورة التالية للمشروع:

نخفض من قيمة شفافية الصورة Opacity:

في طبقة جديدة وبأداة الفرشاة نضيف بعض التوهج باللون الأبيض، مع شفافية ضعيفة:

بعد ذلك ننسخ طبقة القنينة وبفرشاة ذات اللون #428494 نرسم خطوط على مستوى المحيط الداخلي للقنينة:

مع خفض قيمة الشفافية:

نفتح الصورة التالية في مشروع جديد وبأداة التحديد (Lasso Tool (L نحدد الجزء المبين في الصورة ونجلبه لمشروعنا ثم نضعه أسفل القنينة:

مع تغيير خصائص الدمج إلى القيمة light linear:

لوضع الماء (بحر وأمواج) وسط القنينة هناك صورة معدلة مسبقا:

يكفي فقط جلبها للمشروع ووضعها داخل القنينة، والطريقة الثانية هي تعلم كيفية عمل مثل هذه التقنية وذلك بقص أجزاء من بعض الصور (صورة أمواج البحر، مياه أعماق البحر) ودمجها مع بعضها حتى نحصل عل صورة تجسد البحر بأمواجه.

نفتح الصورة في مشروع جديد:

ونحدد منطقة الماء:

ثم نجلب الجزء المحدد للمشروع:

من قائمة:

Menu > Edit > Transform Path > Perspective

نشكل الصورة حسب أبعاد القنينة:

ثم الصورة التالية نقتطع منها جزء خاص بالأمواج:

وجلبه فوق صورة الماء السابقة (في جنبات الصورة السابقة):

بنفس الطريقة نضيف جزء من الصورة والتي ستمثل عمق مياه البحر:

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

وباللون الأخضر نضيف بعض العشب أسفل القنينة:

نجلب صورة السفينة للمشروع ونضعها فوق الماء مباشرة:

ننسخ طبقة السفينة ومن القائمة:

Menu > Edit > Transform Path > Wrap

نغير في شكلها قليلا لنمثل انعكاس صورة السفينة على زجاج القنينة:

نخفض من قيمة الشفافية:

بنفس الطريقة المستعملة سابقا نضيف بعض تأثيرات سير السفينة في الماء:

ثم بعض طيور النورس فوق السفينة:

مع تغيير خصائص الدمج إلى القيمة Darken:

ثم بعض المباني في الجهة اليسرى من الصورة:

بعد ذلك سدادة القنينة (نضيف لها بعض الظل بنفس الطريقة السابقة):

نضيف طبقة جديدة ونملأها باللون الأسود.

ثم من القائمة:

Menu > Filter > Render > Lens Flare

مع تغيير خصائص الدمج إلى القيمة Screen وإزاحة القرص المضيء نحو يسار الصورة:

نذهب إلى القائمة:

Menu > Layer > New Adjustment Layer > Gradient Map

 و نغير خصائص الدمج إلى القيمة Soft light، الشفافية 40:

بعد ذلك إلى:

Menu > Layer > New Layer Adjustment > Color Balance

وهذه هي النتيجة المتحصل عليها في درس اليوم:

ترجمة -وبتصرّف- للدّرس:  Créer un Monde Minuscule dans une Bouteille.