تصميم واجهة أحترافية بالصور خطوة بخطوة

["the best"]

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

يسرني أخواني أعضاء ورواد منتدى الرائدية
أن اقدم لكم هذا الشرح لتصميم موقع متكامل وأحترافي
وقد قمت بترجمته لكم من الانجليزية وأتمنى من الله لكم المتعة والفائدة والدرس بسيط وسهل التطبيق
وبأمكانك فقط بالتركيز تطبيقة كاملا دون أي مشاكل حيث ان الدرس عملي وبعيدا عن النضريات
يأخذك خطوه بخطوه وبالصور لتصميم موقع أحترافي وقد عانيت في ترجمته لأنني لا اجيد اللغة الانجليزية
ولكن بفهم بعض مصطلحات الفوتوشوب تمكنت والحمدلله من ترجمته وأي تقصير في الترجمة أتمنى منكم
عذري
أتمنى لكم التوفيق ولا تنسونا من دعائكم .
1 - قم بإنشاء عمل جديد بمقاسات 800 * 600 وقم بتعبئة الخلفية باللون الأسود (#00000)
--------------------------------------------------------------------------------
2- ضع طبقة جديدة ثم قم باختيار أداه marquee tool (http://ssuss.jeeran.com/trjm/51.jpg) التحديد المستطيل لتصنع الهيدر ( العنوان الرأسي ) الخاص بتخطيطنا

http://ssuss.jeeran.com/trjm/52.jpg

ثم بعد ذلك اختر اللونين #230000للمقدمة و #AF0000 للخلفية (http://ssuss.jeeran.com/trjm/40.gif ) ومن ثم اختر أداة التدرج اللوني (http://ssuss.jeeran.com/trjm/53.jpg), وتأكد من نوع التدرج كما هو موضح بالصورة

http://ssuss.jeeran.com/trjm/55.jpg


ومن ثم قم بالسحب من الأعلى الى الأسفل لتصبح النتيجة بهذا الشكل :
http://ssuss.jeeran.com/trjm/54.jpg

ثم بعد ذلك اختر اللير واضغط على (http://ssuss.jeeran.com/trjm/41.gif ) واختر Bevel and Emboss واعطه القيم التالية :

http://ssuss.jeeran.com/trjm/56.jpg

النتيجة :
http://ssuss.jeeran.com/trjm/57.jpg

--------------------------------------------------------------------------------
3 - ضع لون المقدمة #FF4E00 ومن ثم اختر أداة قلم الرصاص Pencil Tool ( http://ssuss.jeeran.com/trjm/58.jpg) وأعطه القيم التالية :
http://ssuss.jeeran.com/trjm/59.jpg

أضف طبقة جديدة ثم قم برسم خط مستقيم أثناء القيام بالضغط على SHIFT أسفل التدرج الذي قمنا بعمله لتحصل على خط مستقيم هكذا :

http://ssuss.jeeran.com/trjm/60.jpg

ثم بعد ذلك اختر اللير واضغط على (http://ssuss.jeeran.com/trjm/41.gif ) واختر Bevel and Emboss واعطه القيم التالية :

http://ssuss.jeeran.com/trjm/61.jpg


لتصبح النتيجة هكذا ( الصورة مكبرة )

http://ssuss.jeeran.com/trjm/62.jpg

--------------------------------------------------------------------------------
4 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool (http://ssuss.jeeran.com/trjm/51.jpg) التحديد المستطيل لعمل مستطيل صغير أسفل الهيدر ومن ثم قم بتعبئته بأداة التعبئة ( http://ssuss.jeeran.com/trjm/42.gif)

http://ssuss.jeeran.com/trjm/61.jpg


وضع اللون #434343 ومن ثم قم بإعطائها القيم التالية :

http://ssuss.jeeran.com/trjm/61.jpg

ليصبح بهذا الشكل :
http://ssuss.jeeran.com/trjm/64.jpg

بعد ذلك ضع لون المقدمة #FF4E00 وقم بعمل طبقة جديدة و أختر أداة قلم الرصاص مثل ما عملنا سابقا وضع خط أسفل منه بهذا الشكل :
http://ssuss.jeeran.com/trjm/65.jpg

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

http://ssuss.jeeran.com/trjm/66.jpg

لتصبح النتيجة : ( الصورة مكبرة )
http://ssuss.jeeran.com/trjm/67.jpg

--------------------------------------------------------------------------------
5 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool (http://ssuss.jeeran.com/trjm/51.jpg) التحديد المستطيل لعمل مستطيل بمقاس 150 بيكسل وقم بوضعه بهذا الشكل :

http://ssuss.jeeran.com/trjm/68.jpg

ثم قم بتعبئته بالون #434343 هكذا :

http://ssuss.jeeran.com/trjm/69.jpg

--------------------------------------------------------------------------------
6 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool (http://ssuss.jeeran.com/trjm/51.jpg) التحديد المستطيل لعمل مستطيل صغير داخل المستطيل الرمادي الكبير هكذا :

http://ssuss.jeeran.com/trjm/70.jpg

ثم قم بتعبئته بهذا اللون #585858 ومن ثم اذهب الى Edit->Stroke واختر القيم التالية :

http://ssuss.jeeran.com/trjm/71.jpg

النتيجة :

http://ssuss.jeeran.com/trjm/72.jpg



البقية بعد قليل

[الدووووخي]

والله عمل رااااااااااائع ومجهود طيب ...

مشكوووور ياقلبي ...

لك كل الغلا ...

["the best"]

بقية الدرس

--------------------------------------------------------------------------------
7 - قم الآن بتكرار الصندوق الذي قمنا بعمله وذلك بالضغط على CTRL + J في لوحة المفاتيح ومن ثم اسحب الصندوق الذي قمنا بتكراره ووضعه بهذا الشكل :

http://ssuss.jeeran.com/trjm/73.jpg

--------------------------------------------------------------------------------
8 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool () الآن سنقوم بوضع مستطيل بالطول لعمل منطقة الأزرار بهذا الشكل :

http://ssuss.jeeran.com/trjm/74.jpg

بعد ذلك قم بتعبئته بهذا اللون #363636 ليصبح بهذا الشكل :
http://ssuss.jeeran.com/trjm/75.jpg

ثم بعد ذلك اختر اللير واضغط على (http://ssuss.jeeran.com/trjm/41.gif ) واختر Bevel and Emboss وأعطه القيم التالية :

http://ssuss.jeeran.com/trjm/76.jpg

النتيجة : ( الصورة مصغرة )
http://ssuss.jeeran.com/trjm/77.jpg

الآن قم بوضع طبقه جديدة ومن ثم قم باختيار أداة تحديد المستطيل marquee tool () وارسم مستطيل صغير فوق صندوق الأزرار
وأستخدم نفس الطريقة التي استخدمناها للهيدر العنوان الرأسي وأعطه نفس القيم التي أعطيناها للهيدر ليصبح بهذا الشكل : ( الصورة مصغرة )

http://ssuss.jeeran.com/trjm/78.jpg

--------------------------------------------------------------------------------
9 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool () لنرسم صندوق بنفس ارتفاع صندوق الأزرار ولكنه أعرض منه بهذا الشكل :

http://ssuss.jeeran.com/trjm/79.jpg

ثم قم بتعبئته بهذا اللون #2C2C2C ليصبح هكذا :
http://ssuss.jeeran.com/trjm/80.jpg

ثم قم بالضغط بالكيبورد على CTRL + J لتكرار الصندوق ونسخ طبقة جديدة ثم اضغط SHIFT وقم بتحريك الصندوق لوضعه بجانب الصندوق الذي قمنا بتكراره وأثناء الضغط على SHIFT قم بالتحريك للجهة اليمنى ليصبح بهذا الشكل :

http://ssuss.jeeran.com/trjm/81.jpg

البقية يعد قليل

["the best"]

--------------------------------------------------------------------------------
10 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool () لنرسم صندوق بهذا الشكل :
http://ssuss.jeeran.com/trjm/82.jpg

ثم قم بتعبئته بلون رمادي مظلم بهذا الشكل :

http://ssuss.jeeran.com/trjm/83.jpg

م بعد ذلك اختر اللير واضغط على (http://ssuss.jeeran.com/trjm/41.gif ) واختر Stroke تحديد وأعطه القيم التالية :

http://ssuss.jeeran.com/trjm/84.jpg

لتصبح النتيجة بهذا الشكل :

http://ssuss.jeeran.com/trjm/85.jpg

ثم اضغط بالكيبورد على CTRL + J لتكرار الطبقة وقم بتحريكها لتصبح بهذا الشكل :

http://ssuss.jeeran.com/trjm/86.jpg

الآن قم بوضع رأس العنوان الهيدر لكل صندوق واستخدم نفس التقنية المستخدمة للهيدر لتصبح بهذا الشكل :
http://ssuss.jeeran.com/trjm/87.jpg

--------------------------------------------------------------------------------
نحن الآن سنقوم بتزيين الهيدر ( الجزء العلوي من موقعنا )
11 - ضع طبقة جديدة ثم قم باختيار أداه marquee tool () لنرسم صندوق في المساحة السوداء الفارغة العلوية التي تقع أسفل الهيدر بهذا الشكل :

http://ssuss.jeeran.com/trjm/88.jpg

ثم بعد ذلك نقوم بوضع لون المقدمة (#000000) ولون الخلفية (#FFFFFF) ولاختصار الوقت نقوم بالضغط على حرف D ليعيد اللون للأبيض والأسود بعد ذلك نذهب لـ Filter->Render->Clouds لنخرج بالشكل التالي :

http://ssuss.jeeran.com/trjm/89.jpg

ملاحظة : أترك التحديد نشطا لأننا سنحتاجه أثناء عمل التأثيرات


البقية بعد قليل

[tanya]

لم تظهر جميع الصور!

جزاك و جزى والدينك الجنة

[عــازف الكيبورد]

يعطيك العافيه اخوي"the best"

لم تظهر جميع الصور!

جزاك و جزى والدينك الجنة

طالعه الصوره كلها جزاك الله خير :)

["the best"]

العفو..........

[موضي علف]

الدرس حلو ذابست يعطيك العافيه

["the best"]

الله يعافيك......

[حزن]

طريقة جميلة

الله يعطيك العافية

[سامي الشمري]

ذابست .


شرح رائـع و جميــل جدا ً


الله يعطيك العافية ..


و ننتظر بقيـّـة الدرس


تحياتي لك ..