[| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |] (3 زائر)

[ENORI]

[TBL="http://store1.up-00.com/2015-04/1428324596991.jpg"]























[/TBL]​

[TBL="http://store1.up-00.com/2015-04/1428324596991.jpg"]

​

[/TBL]

[TBL="http://www14.0zz0.com/2015/03/28/12/986616757.png"]
[/TBL]​

[TBL="http://www14.0zz0.com/2015/03/28/12/986616757.png"]
اليوم نبدأ درس جديد والذي سندخل فيه الى الجزء الخاص بتصميم الأسطوانة بنا والواضح ان الجميع استوعب الفكـــــــــرة

و قدم تطبيقه بشكل جيد جدا ، وأنا صراحة فخور بكم وبكونكم طلاب متميزين ،، الأن نأتي الى الجزء الخاص بالواجهة الأولى
التي تحدد شكل التصميم وباقي الصفحات ونبدأ بـــ

.. | المقاسات الخاصة بالتصميم | ..

بالنسبة للمقاسات التي سنعمل عليها وبشكل عام يفضل ان يكون القياس مابين [ 300 الى 800 ] سواء للطــــــول او العرض
وذلك احتراما للمقايس الخاصة بشاشات الأجهزة وايضا لكي نستطيع التحكم بالتصميم واخراجه بشكل جيد ،، فكلمـــــــــــا كبــــر
ظهرت عيوب معينة ونحن طبعا نريد تجنب ذلك ما عدا اذا كان التصميم [ Flat ] ،،الأمر الثاني هو الخلفية الأولى التي سنضع
عليها الكتابة والأزرار وغيرها

.. | تصميم الخلفية : الألــوآن | ..

بالنسبة للخلفية الأولى فهنالك عد اقتراحات يمكن العمل عليها ومن بينها نجد :
لون موحد للخلفية ، وهذا يحتاج لاختيار لون مقبول في التصميم وهنا سننتقل من الأسلوب القديم حيث نستخدم [ Swatches ]
أو [ Color Picker ] الخاصة بالفوتوشوب الى تكوين الواننا الخاصة لكن لما سنقوم بهذا ؟ اغلبنا لم يدرس الكثير عن الألوان

ودرجاتها لذلك فبدل التجربة والبحث عن لون مناسب أقترح عليكم هذه المواقع التي ستساعدكم كثيرا ونبدأ اولآ مع موقع خـــــاص
بأدوبي [ Adobe Kuler ] حيث يمكنكم من تحميل العديد من السواتش الى جهازكم كما في الصورة فقط يجب ان نتسجل فــــــــي
الموقع وهو أمر لايأخذ وقت طويل [ من قائمة SIGNE IN اعلى اليمين ] ايضا يمكنكم الموقع من تعديل الوان خاصة بكــــــــــــــم
ومشاركتها في المعرض :

الموقع الثاني عبارة عن مجموعة من الالوان يمكن استخدامها عن طريق النقر على احدها وبعدها سيتم نسخ الكود بشكل تلقائي
مثلا [ #e67e22 ] و هناك يمكنك حفظها في ملف تكست او ادخالها مباشرة الى [ Color Picker ] كما في الصـــــــــــورة :

وإذا اردت حفظه ضمن [ Swatches ] نختار [ Add To Swatches ] ايضا اضيف هذا الموقع الاخير لكن هذا يتطلب
نسخ كود الهيكس الخاص به مثلا [ EB9532 ] .. الموقع الثاني [ هنــآ ] الموقع الثالث [ هنا ]
طيب قد يسأل البعض لما كل هذا الحديث عن الألوان وما أهميتها ؟ وللأجابة عن سؤالكم نلاحظ هذا التطبيق والاختلاف بيـــــــن
إختيار الألوان بالاحمر الطريقة التقليدية اما الجزء الثاني فباستخدام الوان احد المواقع وهنا نحن نبحث عن الوان تكون مريحة
للعين ويمكن لها أن تظهر لنا المحتوى والكتابة والأزرار وغيرها بشكل جيد . نقطة أخيرة في هذا الجزء تتعلق بـــــــــــــاستخدام
[ Color Overlay ] على اللير المراد العمل عليه بدل [ Paint Bucket Tool ]​

مثال : اللون الأحمر في الخلفية غير مريح والكتابة لا تظهر بالشكل المناسب

.. | تصميم الخلفية : البــآترن | ..

الباترن او الحشو كما يقال مهم والعديد منا يتسخدمه لكن الأن كيف يمكننا الموازنة بينه وبين اللون السابق ؟ اولا نقوم بالدخــــول
الى [ Pattern Overlay ] في البداية نختار باترن مناسب ونقلل الشفافية الخاصة به الى [ 60% ] مثلا وعندما نستقر علــى
حشو نخفف الى ان نصل الى نسبة يظهر فيها لكن لايختفي وبذلك نحافظ على اللون الاساسي :

لكن في حالة ما اذا كنا قد استخدمنا [ Color Overlay ] وجربنا اضافة [ Pattern Overlay ] فهذا الأخير لن يظهر والسبب
في ذلك هو الترتيب فاللون 100% ويسبق الباترن ، ولنظهره نخفف شفافية اللون الى 80% مثلا حتى نختار الباترن المناســـــــب
ونكمل كما في الجزء الأول

لكن ما رأيكم الان ان نضيف حركة على مكان زر [ مرحبا بكم ] ؟ اولا نختار الطبقة التيتحتوي على الخلفية او الباترن السابق
ونقوم باستخدام اداة [ Restangular Marquee Tool ] الخاصة بالتقطيع والتحديدبشكل طولي على الزر مع البقــــاء
على لير الخلفية ثم نختار كما في الصورة ونزيل العين في الاخير على باترن اللير اللذي قمنا بقصه :

ملحوظة : قد لا تظهر الصور بالجودة الأصلية وبذلك فالتصميم سيظهر سيء نوعا ما لكن تم اضافة رابط PSD
التصميم من هنــآ : [ 1 ] [ 2 ]


.. | التطبيقات المطلوبة | ..
الأن ندخل الى مرحلة الجد والعمل وايضا هذه المرة ستتغير طريقة تقيم التطبيقات ،، المطلوب في هذا الدرس هو اخذ قيــــــــاس
مناسب والعمل على تكوين [ خلفية مع الباترن واللون ] كما راينا حسب الذوق الذي يناسبكم مع اضافة اللوغو التالي في الأعلى

وتحته زر مكتوب به [ تحميل - Download ] وفي الاسفل التعريف التالي :

Mozilla Firefox (known simply as Firefox) is a free and open-source web browser

developed for Windows, OS X, and Linux
,
with a mobile version for Android,

وهذا مثال تطبيقي للعمل [ PSD ] :

- التطبيق الثاني سيكون نسخة عن التصميم الاول لكن مع اضافة حركاتكم او طريقتكم الخاصة بمعنى تصميم حـــــــــــــــــــر
ويرجى ارفاق ملف [ PSD ] كلا التصميمين .. الدرس القادم سيكون عن التنسيق الداخلي للاسطوانة و تصميـــــــــــــــم
الأزرار بطرق متنوعة اي سيكون درس طويل نوعا ما ويحتاج لتركيز وبعده سننتقل في الدرس الرابع الى مرحلة التركيب
والعمل على البرنامج الثاني وكالعادة اي استفسارات تطرح في نفس الموضوع وبالتوفيق للجميع​

​

[/TBL]

[TBL="http://www14.0zz0.com/2015/03/28/12/886138463.png"]








[/TBL]​

[TBL="http://www14.0zz0.com/2015/03/28/12/886138463.png"]

​

[/TBL]

​

 

[ENORI]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

[ .. التطبيقــــآت .. ]

التطبيق صاحب المركز الأول هنـآ [ 11 ] للمبدع [ مويه ] وهذه هي التصاميم :

[ الملف المفتوح : هنـــآ ]

[ الملف المفتوح : هنـــآ ]

التقيم : [

] ممتآز

- في إنتظار البقية

[ .. مستلزمـــآت للتحميل .. ]

أولآ نبدأ بصور الموضوع لانها لاتظهر بشكل جيد والسبب غير معروف • .. هنــآ .. •

ثانيا مجموعتي الخاصة بالخطوط العربية • .. هنــآ .. • و الخطوط الانجليزية • .. هنــآ .. •

ثانيا مجموعتي الخاصة من الباترن • .. هنــآ .. •

موقع خاص بتحميل صور على شكل PNG ستفيدنا في التصميم • .. هنــآ .. •

موقع أخر • .. هنــآ .. • أو • .. هنا .. •















​

 

[Killua]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

جآري تنفيذ آلوآجب ..

بس آنهي شغلي في آلورشه وآرجع اعجبني1​

 

[H A V E N ~]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

السلام عليكم و رحمة الله و بركاته
اهلين سينسي اخبارك اليوم ان شاء الله تمام
اعذرني على التاخير بس النت ما يساعد بالمره
الدرس رائع فعلا و استفدت من اشياء كثيره
و صراحه تطرقت لاشياء ما كنت اعرفها زي تدرجات الالوان ا
بس عندي كم من سؤال
1) هل في ضرر لو حطينا اللون مباشره بدل ما ندخله في Color Overlay
لاني ما ارتاح لما استخدمها بالذات اذا استخدمت الباترون معاها
2) الباترونات لما احطها يكون لها لونها الخاص فيخرب في درجة اللون الي اكون حاطتها
حتى لو خليت شفافيتها نازله مره فاطر اني اغير البترون رغم انه يكون عاجبني
3) في بعض التصميمات يكون فيها كم من لون انا ما اعرف انسق تدرجات تكون متناسقه مع بعض
و اتعب لين اوصل للونين متناسبه شوي ايش اسوي بالضبط
4) هذا الاخير س7 الحين الواجب اسوي تطبيقين صح الاول نفس تطبيقك طبق الاصل ولا اغير في الالوان
ولا ايش اسوي فيه بالضبط مافهمت ايش المطلوب
و الثاني اسوي شي مختلف كليا بس احط اللوجو و الكلام الي تحت و الباقي من عندي يمي1
اسفه على الازعاج والله يعينك علي و يكتب اجرك سينسي ح8
استنى اجاباتك و باحاول اطبق من عندي و ان شاء الله النت يتحسن شوي
بارجع بالتطبيق باذن الله
في امان الله
​

 

[ENORI]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

السلام عليكم و رحمة الله و بركاته
اهلين سينسي اخبارك اليوم ان شاء الله تمام
اعذرني على التاخير بس النت ما يساعد بالمره
الدرس رائع فعلا و استفدت من اشياء كثيره
و صراحه تطرقت لاشياء ما كنت اعرفها زي تدرجات الالوان ا
بس عندي كم من سؤال
1) هل في ضرر لو حطينا اللون مباشره بدل ما ندخله في Color Overlay
لاني ما ارتاح لما استخدمها بالذات اذا استخدمت الباترون معاها
2) الباترونات لما احطها يكون لها لونها الخاص فيخرب في درجة اللون الي اكون حاطتها
حتى لو خليت شفافيتها نازله مره فاطر اني اغير البترون رغم انه يكون عاجبني
3) في بعض التصميمات يكون فيها كم من لون انا ما اعرف انسق تدرجات تكون متناسقه مع بعض
و اتعب لين اوصل للونين متناسبه شوي ايش اسوي بالضبط
4) هذا الاخير س7 الحين الواجب اسوي تطبيقين صح الاول نفس تطبيقك طبق الاصل ولا اغير في الالوان
ولا ايش اسوي فيه بالضبط مافهمت ايش المطلوب
و الثاني اسوي شي مختلف كليا بس احط اللوجو و الكلام الي تحت و الباقي من عندي يمي1
اسفه على الازعاج والله يعينك علي و يكتب اجرك سينسي ح8
استنى اجاباتك و باحاول اطبق من عندي و ان شاء الله النت يتحسن شوي
بارجع بالتطبيق باذن الله
في امان الله
​

وعليكم السلام ورحمة الله وبركاته

أهلا بك شيرو .. الحمد لله كل أموري تمام وإن شاء الله تكوني بالمثل والله يعينك على النت الكل يشتكي منه ، وبالتأكيد لا توجد

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

# 1

أجل لا يوجد أي ضرر وقد سبق لي في نفس الموضوع أن اعتمدت على [ Paint Bucket Tool ] أما [ Color Overlay ]

فهو يتيح المزيد من التحكم ومشاهدة تغير اللون مباشرة ،، أصلا نستطيع العمل بهما معا والتحكم بالشفافية ، بإختصار لن يؤثـــر

وللأمانة أنا ايضا كنت أنزعج منه لكن مع الوقت أحسست أنه أسهل في التعاطي مع لون الطبقة .


# 2

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

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

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

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

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

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

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

عندما احصل على PSD الخاص بتصميمك اعجبني3


# 3

عندما يحتوي تصميم معين على عدد كبير جدا من الألوان فوق 4 ألوان مختلفة فهذا إنتحار بالنسبة لي لان التصميم يتحول اى

مصدر تشويش مثلا هذا العبارة [ النت بطيئ جدآ ] مقارنة مع [ النت بطيئ جدا ] المثال الأول يوجد به 5 الوان والمشكلة انها

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

النتيجة افضل .. ما انصحك به هنا هو التقليل قدر الأمكان من الألوان حتى يمكنك التحكم بها الامر الثاني يتعلق بالباترنات مرة

أخرى لنقل اخترت باترن مناسب وبه عدة الوان .. اردت الكتابة فوقه ؟ غالبا ستستخدمين لون غامق ليظهر وهنا يختل التصميم

وايضا هذه الجزئية لي عودة اليها بعد رؤية PSD التصاميم xD


# 4

بخصوص الواجب فالمطلوب عمل تصميم ب [ الباترن + اللون ] بدون اضافات والتصميم الثاني يكون حر على حسب الرغبة

وفي كلا التصميمين فالقياس غير محدد الالوان غير محددة ،، وهنا سيظهر المود الخاص بكم وأفهمكم أكثر xD

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

ومافي أي ازعاج هاذا واجبي كلنا نتعلم من بعض وبالتوفيق لك


هنا موقع جميل لتحميل الباترنات مع امكانية استعراضها على الموقع نفسه

[ http://subtlepatterns.com ]




​

 

[Azzozi]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

وعليكم السلام ورحمة الله
يارب تكون بخير أستاذ نيرو وكل الأعضاء
درس قوي ودسم
للأسف لم أفهم المطلوب من القراءة الأولى
لكن ساعدتني استفسارات الأعضاء
فشكراً لكَ ولهم

سأعود قريباً مع الواجب

دمتم بخير
​

 

[Azzozi]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

صباح الخير
بصراحة الواجب الثاني صعب
فلا أُجيد التصميم الحر
ولم أجد فكرة مناسبة تتناسب مع الدرس
لذا اكتفيت بالأول مع بعض الاضافات البسيطة
هنا
النتيجة
هنا
أتمنى أن أكون وفقت
+
بانتظار التقييم ^_^3

ألف شكر على المستلزمات المرفقة ومواقع الصور
فهي مفيدة جداً جداً

​

 

[مويه]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

السلام عليكم ورحمة الله وبركاته ~
اهلين سينسي ي
كيفك ياعسل ان شاء الله طيوب ~ ؟
الدرس مرة روعة ~ واستفدت منه حاجات كثيرهي
يسلم لي يداتك ~ و4
عندي سؤاال صغيرون
شنو المطلوب في التطبيق؟
صراحة مافهمت ايش المطلوب ~ ؟
عطني مثال عشان اقدر استوعب شوي
وبنتظار ردك وكذآ ي
​

 

[ENORI]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

السلام عليكم ورحمة الله وبركاته ~
اهلين سينسي ي
كيفك ياعسل ان شاء الله طيوب ~ ؟
الدرس مرة روعة ~ واستفدت منه حاجات كثيرهي
يسلم لي يداتك ~ و4
عندي سؤاال صغيرون
شنو المطلوب في التطبيق؟
صراحة مافهمت ايش المطلوب ~ ؟
عطني مثال عشان اقدر استوعب شوي
وبنتظار ردك وكذآ ي
​

وعليكم السلام ورحمة الله تعالى وبركاته

اهلا مويه ، الحمد لله بخير وانت كيفك ؟

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

المطلوب كما قلت لشيرو هو تصميم شكل للاسطوانة باستخدام الدمج بين اللون والباترن يعني يعنــــــي التلاعـــــب

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

باللغة الانجليزية في الاسفل .. التطبيق الثاني يجب ان يكون نفس التصميم لكن التزين والخلفية من عندكــــم وحسب

الرغبة والاكيد يمكنكم استعمال اساليب مختلفة وليس وضع نفس شكل تصميمي

اما اللخبطة فان شاء الله نحل القصة في المواضيع القادمة وننتقل الى امور عملية وممتعة اكثر ت4






​

 

[ENORI]

رد: [| الدرس الثاني |] [| تصميم الخلفية الأولى والتعرف على الألوان والباترن |]

صباح الخير
بصراحة الواجب الثاني صعب
فلا أُجيد التصميم الحر
ولم أجد فكرة مناسبة تتناسب مع الدرس
لذا اكتفيت بالأول مع بعض الاضافات البسيطة
هنا
النتيجة
هنا
أتمنى أن أكون وفقت
+
بانتظار التقييم ^_^3

ألف شكر على المستلزمات المرفقة ومواقع الصور
فهي مفيدة جداً جداً

​

صباح الخيرات عزوزي .. نشيط كالعادة ما شاء الله عليك

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

يصبح لديك تحكم كبير في التصاميم في بعض الاحيان ليس بالضرورة ان تأتي بفكــــــــــــــرة

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

الويندوز - العلبة الخاصة بهاتف او جهاز معين - طبعــــــــــا ان ستاخذ منها فكرة ولكن ايضــا

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

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

قدرتك وتفرغك ليس بالضرورة ان يكون شيء خرافــــــــــــي لكن يجب ان تحاول معه .. ان لم

تستطع فأخبرني في انتظــــــــــــارك .. اما بخصوص التصميم فقد لا أستطيع ان أحكم لعدم وجود

الجزء الثاني





​