salima
10-30-2013, بتوقيت غرينيتش 05:25 AM
السلام عليكم
اخواني الكرام موضوعنا اليوم هو عمل واجهة interface بسيطة بالفوتوشوب باسهل الطرق
للبدا يجب ان تكون تحسن التعامل مع الفوتوشوب ولو 20 بالمائة
لفتح شهية العمل هدا هو المتال البسيط الدي سنتعلمه اليوم
http://i30.tinypic.com/atrard.jpg
ان شاء الله يعجبكم وكالعادة ابدا بالاراء الشخصية و الملاحظات واولها
ان الالوان اجتهاد شخصي يعني ممكن تختار اي الوان تعجبك
لدلك ربما لم اكن موفق في تنسيق الالوان لن الفكرة هي اكتساب مجموعة من المهارات
وربما الاضافات خصوصا للمبتدئين بالفوتوشوب
واخيرا الدرس مفصل يقتصر فقد على التصميم اما تقطيع الواجهة interface فقد تم التطرق اليها بالشرح طريقة في مواضيع سابقة
لدلك المرجوا مراجعتها لمن يود تقسيم واجهته
بسم الله نبدا نفتح عمل جديد بمقاس يكون على الارجح 600*600 بيكسل
نختار اداة التدرج gradien tools
وتكون الالوان الاساسية هي كالتالى
الخلفية سوداء و الرئيسية قيمتها #cfbead
تم نقوم بتلوين خلفية عملنا
الان نحدد اداة raounded rectangle tool لرسم الاطار العلوي
الصور توضح الهدف و النتيجة
http://i27.tinypic.com/24fzncz.jpg
بحيت تكون التاتيرات كلى النحو التالى
خاصية gradient overlay
http://i29.tinypic.com/16k976b.jpg
نطبق ايضا خاصية الظل او ال drop shadow
http://i26.tinypic.com/2rdf5l4.jpg
تم خاصية inner glow
http://i27.tinypic.com/2i1jamb.jpg
واخيرا خاصية stroke
http://i30.tinypic.com/wsmm4g.jpg
ملاحظة ان كنت قمت بتحميل التدرجات التى قمت بعرضها في قسم ادوات التصميم فانك تتوفر
على هدا التدرج موجود مباشرة لن تحتاج الى تعديلات الا تعديل ال drop shadow
الان ننتقل الى الازرار باسفل الاطار العلوى
نختار دائما اداة ال raounded rectangle tool ونقوم برسم ايقونا تصغيرة
انا اخترة ايقونات بالتدرج التالي
خصائص ال gradient overlay
هنا يجب الانتباه الى قيم كل زر وايضا مكان توضعه بحيت الاول على قيمة 100 تم الاسوسط على قيمة 50 تم الاخير باليسار على قيمة 0
مع التركيز ان الزر الاوسط هو جمع بين الزين الايمن و الايسر بحيت نضع الايسر اسفل الايمن
كما توضح الصورة مع القيم المحددة
http://i25.tinypic.com/2l9ps3c.jpg
بعد الحصول على الزر الاول نقوم بمضاعفته 7 مرات متلا او حسب الروابط التى اريد انشائها
لتكون النتيجة
http://i26.tinypic.com/fx8nrn.jpg
الان كل ما علينا هو القيام بوضع اسماء الروابط على الازرار
كما هو مبين بالصورة وهنا انا اخترت خط farsi simple bold
هدا الخط ايضا يوجد ضمن باقة الخطوطة التى قمت بعرضها سابقا
النتيجة هي
http://i25.tinypic.com/14t1pfp.jpg
الان يمكننا اضافة اي لمسة جمالية للاطار العلوى وكل واحد حسب دوقه
ننشئ لاير جديد ونختار اداة brush tool ونضيف لمسة بسيطة لتصميمنا
كما هو الحال هنا بالصورة التوضيحية
http://i30.tinypic.com/wwjg42.jpg
وايضا هده الفرش تم عرضها سابقا ضمن اداوات التصميم يمكنكم تحميلها
الان ما علينا سوي كتابة اسم موقعنا وسط الاطار العلوى ونعدل عليها بما نحب
بهدا نكون قد انهينا نصف العمل الان الى اللمسات الاخيرة
من قائمة الادوار نختار اداة eliptiqual marquee tool وننشئ لاير جديد ونقوم برسم شكل متل ما هو مبين بالصورة
http://i27.tinypic.com/6patr4.jpg
تم نقوم بملئه باللون الاسود من خلال اداة gradient tool
كليك من لوحة المفاتيح على زر ctrl+d لازالة التحديت
التاتير الدي ساقوم به هو ان نعطي شكل الظل لهدا اللير لدلك سنغير قيم ال Opacity من 100 الى 25 بالمائة
ليكون شكل النهائي هو كالتالى
http://i31.tinypic.com/1e9c8z.jpg
اخيرا الخطوة الاخيرة ويجب التركيز قليلا الان حدد جميع الليرز الا ليرز الاخير و الخلفية
يعني ليزر النصوص و الاطار العلوي واسم الموقع وايضا البروش المستعمل
قم بنسخها جميعا يعني عمل duplicate layer لتكون كل الليرات مضاعفة
ستكون الليرات المضاعفة باللون الازر يتوجب علينا دمجها ودلك من خلال زر المفاتيح
كليك على كل من ctrl+e ونتيجة العمل لابد ان تكون بهدا الشكل
http://i27.tinypic.com/6itzer.jpg
اتمنى يكون الامر مفهوم لاني احاول التبسيط قدر الممكن
الان نقوم بعمل التاتير التالى على اللير الجديد
من قائمة edit نختار transform ونختار flip vertical
تم نضعه اسفل الاطار العلوى كما تبين الصورة التالية
http://i32.tinypic.com/2f05zye.jpg
الهدف من هده الخطوة هو العمل على ان يكون شكل الاطار العلوى وكان له ظل بالاسفل لاعطاء جمالية لتصميمنا
نواصل العمل كليك من لوحة المفاتيح على ctrl+t تم كليك على اللير الاخير واختيار التالى
http://i32.tinypic.com/10zbuo8.jpg
فنقوم بعمل ميلان لتصميم من خلال المقابظ المحددة بالاحمر في الصورة
ويستحسن استخدما المسطة من اجل عمل ميلان متساوي بالجهتين,عند الوصول الى النتيجة المرضية كليك على اداة ال move tool لتطبيق تاتير الميلان على اللير
الان نغير قيمة ال opacity الخاص بهدا اللير من قيمة 100 الى 50
الان نحدد اللير ودلك بالنقر عليه من قائمة الليرز واصبعك على زر ctrl
اختر اداة التدرج بحيت اللون الابيض هو اللون الرئيسي الهدف هو عمل تدرج لوني للير
نغير قيمة ال opacity الخاصة باللير الى 25 او 30 حسب الدوق
لنصل الى النتيجة التالية
http://i30.tinypic.com/atrard.jpg
اتمنى الشرح طريقة يكون واضه و الدرس مفصل به اضافات لكم
ولمن يحب تحميل فيديو لشرح طريقة الكامل الرابط المباشر هنا
just click here (http://awtil.com/kupload/index.php?p=download&hash=ZIH2WPxHwEVQ)
اتمنى لا تنسونا من صالح دعواتكم
والله الموفق
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
اخواني الكرام موضوعنا اليوم هو عمل واجهة interface بسيطة بالفوتوشوب باسهل الطرق
للبدا يجب ان تكون تحسن التعامل مع الفوتوشوب ولو 20 بالمائة
لفتح شهية العمل هدا هو المتال البسيط الدي سنتعلمه اليوم
http://i30.tinypic.com/atrard.jpg
ان شاء الله يعجبكم وكالعادة ابدا بالاراء الشخصية و الملاحظات واولها
ان الالوان اجتهاد شخصي يعني ممكن تختار اي الوان تعجبك
لدلك ربما لم اكن موفق في تنسيق الالوان لن الفكرة هي اكتساب مجموعة من المهارات
وربما الاضافات خصوصا للمبتدئين بالفوتوشوب
واخيرا الدرس مفصل يقتصر فقد على التصميم اما تقطيع الواجهة interface فقد تم التطرق اليها بالشرح طريقة في مواضيع سابقة
لدلك المرجوا مراجعتها لمن يود تقسيم واجهته
بسم الله نبدا نفتح عمل جديد بمقاس يكون على الارجح 600*600 بيكسل
نختار اداة التدرج gradien tools
وتكون الالوان الاساسية هي كالتالى
الخلفية سوداء و الرئيسية قيمتها #cfbead
تم نقوم بتلوين خلفية عملنا
الان نحدد اداة raounded rectangle tool لرسم الاطار العلوي
الصور توضح الهدف و النتيجة
http://i27.tinypic.com/24fzncz.jpg
بحيت تكون التاتيرات كلى النحو التالى
خاصية gradient overlay
http://i29.tinypic.com/16k976b.jpg
نطبق ايضا خاصية الظل او ال drop shadow
http://i26.tinypic.com/2rdf5l4.jpg
تم خاصية inner glow
http://i27.tinypic.com/2i1jamb.jpg
واخيرا خاصية stroke
http://i30.tinypic.com/wsmm4g.jpg
ملاحظة ان كنت قمت بتحميل التدرجات التى قمت بعرضها في قسم ادوات التصميم فانك تتوفر
على هدا التدرج موجود مباشرة لن تحتاج الى تعديلات الا تعديل ال drop shadow
الان ننتقل الى الازرار باسفل الاطار العلوى
نختار دائما اداة ال raounded rectangle tool ونقوم برسم ايقونا تصغيرة
انا اخترة ايقونات بالتدرج التالي
خصائص ال gradient overlay
هنا يجب الانتباه الى قيم كل زر وايضا مكان توضعه بحيت الاول على قيمة 100 تم الاسوسط على قيمة 50 تم الاخير باليسار على قيمة 0
مع التركيز ان الزر الاوسط هو جمع بين الزين الايمن و الايسر بحيت نضع الايسر اسفل الايمن
كما توضح الصورة مع القيم المحددة
http://i25.tinypic.com/2l9ps3c.jpg
بعد الحصول على الزر الاول نقوم بمضاعفته 7 مرات متلا او حسب الروابط التى اريد انشائها
لتكون النتيجة
http://i26.tinypic.com/fx8nrn.jpg
الان كل ما علينا هو القيام بوضع اسماء الروابط على الازرار
كما هو مبين بالصورة وهنا انا اخترت خط farsi simple bold
هدا الخط ايضا يوجد ضمن باقة الخطوطة التى قمت بعرضها سابقا
النتيجة هي
http://i25.tinypic.com/14t1pfp.jpg
الان يمكننا اضافة اي لمسة جمالية للاطار العلوى وكل واحد حسب دوقه
ننشئ لاير جديد ونختار اداة brush tool ونضيف لمسة بسيطة لتصميمنا
كما هو الحال هنا بالصورة التوضيحية
http://i30.tinypic.com/wwjg42.jpg
وايضا هده الفرش تم عرضها سابقا ضمن اداوات التصميم يمكنكم تحميلها
الان ما علينا سوي كتابة اسم موقعنا وسط الاطار العلوى ونعدل عليها بما نحب
بهدا نكون قد انهينا نصف العمل الان الى اللمسات الاخيرة
من قائمة الادوار نختار اداة eliptiqual marquee tool وننشئ لاير جديد ونقوم برسم شكل متل ما هو مبين بالصورة
http://i27.tinypic.com/6patr4.jpg
تم نقوم بملئه باللون الاسود من خلال اداة gradient tool
كليك من لوحة المفاتيح على زر ctrl+d لازالة التحديت
التاتير الدي ساقوم به هو ان نعطي شكل الظل لهدا اللير لدلك سنغير قيم ال Opacity من 100 الى 25 بالمائة
ليكون شكل النهائي هو كالتالى
http://i31.tinypic.com/1e9c8z.jpg
اخيرا الخطوة الاخيرة ويجب التركيز قليلا الان حدد جميع الليرز الا ليرز الاخير و الخلفية
يعني ليزر النصوص و الاطار العلوي واسم الموقع وايضا البروش المستعمل
قم بنسخها جميعا يعني عمل duplicate layer لتكون كل الليرات مضاعفة
ستكون الليرات المضاعفة باللون الازر يتوجب علينا دمجها ودلك من خلال زر المفاتيح
كليك على كل من ctrl+e ونتيجة العمل لابد ان تكون بهدا الشكل
http://i27.tinypic.com/6itzer.jpg
اتمنى يكون الامر مفهوم لاني احاول التبسيط قدر الممكن
الان نقوم بعمل التاتير التالى على اللير الجديد
من قائمة edit نختار transform ونختار flip vertical
تم نضعه اسفل الاطار العلوى كما تبين الصورة التالية
http://i32.tinypic.com/2f05zye.jpg
الهدف من هده الخطوة هو العمل على ان يكون شكل الاطار العلوى وكان له ظل بالاسفل لاعطاء جمالية لتصميمنا
نواصل العمل كليك من لوحة المفاتيح على ctrl+t تم كليك على اللير الاخير واختيار التالى
http://i32.tinypic.com/10zbuo8.jpg
فنقوم بعمل ميلان لتصميم من خلال المقابظ المحددة بالاحمر في الصورة
ويستحسن استخدما المسطة من اجل عمل ميلان متساوي بالجهتين,عند الوصول الى النتيجة المرضية كليك على اداة ال move tool لتطبيق تاتير الميلان على اللير
الان نغير قيمة ال opacity الخاص بهدا اللير من قيمة 100 الى 50
الان نحدد اللير ودلك بالنقر عليه من قائمة الليرز واصبعك على زر ctrl
اختر اداة التدرج بحيت اللون الابيض هو اللون الرئيسي الهدف هو عمل تدرج لوني للير
نغير قيمة ال opacity الخاصة باللير الى 25 او 30 حسب الدوق
لنصل الى النتيجة التالية
http://i30.tinypic.com/atrard.jpg
اتمنى الشرح طريقة يكون واضه و الدرس مفصل به اضافات لكم
ولمن يحب تحميل فيديو لشرح طريقة الكامل الرابط المباشر هنا
just click here (http://awtil.com/kupload/index.php?p=download&hash=ZIH2WPxHwEVQ)
اتمنى لا تنسونا من صالح دعواتكم
والله الموفق
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
