بالشرح طريقة المفصل طريقة تصميم مدونة blog إحترافية

[linnou]

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

http://des.3ql.com/wp-content/uploads/2014/09/demo1.jpg (http://demo.3ql.com/des/3ql-blog-design.jpg)http://des.3ql.com/wp-content/uploads/2014/09/download11.jpg (http://download.3ql.com/des/3ql-blog-design.zip)
خطوة 1

اختر طبقة الخلفية واضغط CTRL+J لتكرار الطبقة. سوف والآن لنطبق تدرج لوني على الطبقة الجديدة. إذهب إلى Layer > Layer Style > Gradient Overlay وطبق التالي:

http://des.3ql.com/wp-content/uploads/2014/09/2-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/2.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/3-300x217.jpg (http://des.3ql.com/wp-content/uploads/2014/09/3.jpg)
خطوة 2

بإستخدام اداه رسم المستطيل دائري الزوايا قم برسم الشكل الموضح بالصورة

http://des.3ql.com/wp-content/uploads/2014/09/4-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/4.jpg)
خطوة 3

طبق الستايل style التالي على المستطيل.

http://des.3ql.com/wp-content/uploads/2014/09/5-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/5.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/6-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/6.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/7-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/7.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/8-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/8.jpg)
خطوة 4

بإستخدام نفس الآداه السابقة قم برسم مستطيل اكبر وقم بملئه باللون التالي #001424.

http://des.3ql.com/wp-content/uploads/2014/09/9-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/9.jpg)
خطوة 6

قم برسم مستطيل اخر واملئه باللون الأبيض.

http://des.3ql.com/wp-content/uploads/2014/09/111-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/111.jpg)
خطوة 7
ثم طبق الستايل style التالي

http://des.3ql.com/wp-content/uploads/2014/09/121-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/121.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/131-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/131.jpg)
لنحصل على النتيجة

http://des.3ql.com/wp-content/uploads/2014/09/14-300x199.jpg (http://des.3ql.com/wp-content/uploads/2014/09/14.jpg)
خطوة 8

فوق هذه الطبقة اضف صورة مناسبة من اختيارك.

http://des.3ql.com/wp-content/uploads/2014/09/15-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/15.jpg)
خطوة 9

اذهب إلى Select > Load selection، سوف تجد تحديد يظهر حول الصورة كما فى الصورة التالية.

http://des.3ql.com/wp-content/uploads/2014/09/16-300x172.jpg (http://des.3ql.com/wp-content/uploads/2014/09/16.jpg)
خطوة 10

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

http://des.3ql.com/wp-content/uploads/2014/09/17-300x172.jpg (http://des.3ql.com/wp-content/uploads/2014/09/17.jpg)
خطوة 11

اضغط CTRL+D لإلغاء الإختيار ثم بإستخدام اداه رسم المستطيل لرسم الاشكال التالية واملئها باللون #4b6e82.

http://des.3ql.com/wp-content/uploads/2014/09/18-300x298.jpg (http://des.3ql.com/wp-content/uploads/2014/09/18.jpg)
خطوة 12

للشكلين قم بتطبيق الستايل style التالي

http://des.3ql.com/wp-content/uploads/2014/09/191-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/191.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/20-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/20.jpg)
خطوة 13

ثم بإستخدام اداه التحديد الدائرية قم برسم تحديد خلف المستطيل الايسر واملئه باللون الاسود كما بالصورة

http://des.3ql.com/wp-content/uploads/2014/09/21-236x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/21.jpg)
خطوة 14

اذهب إلى Filter > Blur > Gaussian Blur وقم بتحديد قيمة Radius بـ 4.5 بكسل.
خطوة 15

والآن بعد ان قمنا بعمل الظل كما بالشكل. الآن لنظهر هذا الظل بإضافة بعض الإضاءة. وبإستخدام اداه الخط Line Tool وبإستخدام خط 1 بكسل واضف خط عمودي ابيض كما بالشكل.

http://des.3ql.com/wp-content/uploads/2014/09/23-152x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/23.jpg)
خطوة 16

الآن اضغط زر الفارة الايمن على الطبقة السابقة واختر Rasterize laye.
خطوة 17

قم بإختيار الممحاه بإستخدام فرشه بقطر 100 بكسل واستخدمها لمسح اطراف الخط كما بالصورة

http://des.3ql.com/wp-content/uploads/2014/09/25-166x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/25.jpg)
خطوة 18

بنفس الطريقة السابقة ارسم خط بأعلى المستطيل الجانبي.
خطوة 19

قم برسم خط اسود تحت الابيض في الخطوة السابقة.

http://des.3ql.com/wp-content/uploads/2014/09/27-300x160.jpg (http://des.3ql.com/wp-content/uploads/2014/09/27.jpg)
خطوة 20

داخل الشكل الاوسط قم برسم مستطيل اخر باللون الابيض.

http://des.3ql.com/wp-content/uploads/2014/09/28-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/28.jpg)
صورة 21

ارسم بعض المربعات كما بالشكل وسنضيف اليها بعض الصور لاحقا.

http://des.3ql.com/wp-content/uploads/2014/09/29-285x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/29.jpg)
خطوة 22

طبق الستايل style التالي كما بالصورة

http://des.3ql.com/wp-content/uploads/2014/09/30-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/30.jpg)
خطوة 23

الان لنضيف بعض الصور في المستطيلات واضف بعض النصوص.

http://des.3ql.com/wp-content/uploads/2014/09/31-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/31.jpg)
خطوة 24

اضف بعض الخطوط العريضه بين النصوص

http://des.3ql.com/wp-content/uploads/2014/09/32-300x110.jpg (http://des.3ql.com/wp-content/uploads/2014/09/32.jpg)
الخطوة 25

قم برسم مستطيل خلف معلومات التدوينة.

http://des.3ql.com/wp-content/uploads/2014/09/33-300x148.jpg (http://des.3ql.com/wp-content/uploads/2014/09/33.jpg)
الخطوة 26

اعلى القائمة الجانبية قم برسم مربع البحث. ترى اننا قمنا بإضافة بعض النصوص اعلى قائمة الموقع.

http://des.3ql.com/wp-content/uploads/2014/09/341-300x106.jpg (http://des.3ql.com/wp-content/uploads/2014/09/341.jpg)
خطوة 27

قم بتطبيق الستايل style التالي لمربع البحث

http://des.3ql.com/wp-content/uploads/2014/09/35-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/35.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/36-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/36.jpg)
خطوة 28

الآن قم برسم مربع داخلي اخر واضف ايقونه البحث بجانبها.

http://des.3ql.com/wp-content/uploads/2014/09/37-300x90.jpg (http://des.3ql.com/wp-content/uploads/2014/09/37.jpg)
خطوة 29

اعلى الصورة المنزلقة قم برسم مربع اخر كما بالصورة. وقم بتعديل الشكل للوصول إلى الشكل التالي

http://des.3ql.com/wp-content/uploads/2014/09/38-300x90.jpg (http://des.3ql.com/wp-content/uploads/2014/09/38.jpg)
خطوة 30

ثم قم بتطبيق الستايل style التالي كما بالصورة

http://des.3ql.com/wp-content/uploads/2014/09/39-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/39.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/40-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/40.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/41-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/41.jpg)
خطوة 31

قم برسم دائرة اسفل المربع واسفل مربع الانزلاق كما بالصورة

http://des.3ql.com/wp-content/uploads/2014/09/42-300x186.jpg (http://des.3ql.com/wp-content/uploads/2014/09/42.jpg)
خطوة 32

سوف نضيف الآن زرين للتقديم والإرجاع واضافة بعض النصوص وبعض الأسهم كما بالشكل.

http://des.3ql.com/wp-content/uploads/2014/09/43-300x124.jpg (http://des.3ql.com/wp-content/uploads/2014/09/43.jpg)
خطوة 33

فى القائمة الجانبية قم برسم بعض المربعات باللون الابيض كما بالشكل وهي المربعات التي سيتم عرض الإعلانات بها.

http://des.3ql.com/wp-content/uploads/2014/09/44-300x300.jpg (http://des.3ql.com/wp-content/uploads/2014/09/44.jpg)
خطوة 34




وطبق عليها الستايل style التالي

http://des.3ql.com/wp-content/uploads/2014/09/50-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/50.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/51-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/51.jpg)
خطوة 35

الآن قم بإضافة بعض صور الإعلانات في القائمة الجانبية وبعض ازرار المشاركة فى المواقع الإجتماعية المتخصصة.

http://des.3ql.com/wp-content/uploads/2014/09/52-300x236.jpg (http://des.3ql.com/wp-content/uploads/2014/09/52.jpg)
خطوة 36

اضف بعض النصوص إلى القائمة الجانبية، وايضاً قم بعمل بعض الفواصل بين الروابط.

http://des.3ql.com/wp-content/uploads/2014/09/53-300x204.jpg (http://des.3ql.com/wp-content/uploads/2014/09/53.jpg)
خطوة 37

اضف بعض التفاصيل إلى القائمة الرئيسية. فواصل بين الروابط، بإستخدام اداه الخط قم بإستخدام خط عمودي وقم بمسح الاطراف مع تطبيق ستايل style مناسب وتغيير نوع الطبقة إلى Soft Light للوصول للشكل التالي.

http://des.3ql.com/wp-content/uploads/2014/09/54-300x155.jpg (http://des.3ql.com/wp-content/uploads/2014/09/54.jpg)
خطوة 38

الآن قم بكتابة إسم الموقع وطبق الستايل style التالي

http://des.3ql.com/wp-content/uploads/2014/09/58-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/58.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/59-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/59.jpg)
http://des.3ql.com/wp-content/uploads/2014/09/60-300x221.jpg (http://des.3ql.com/wp-content/uploads/2014/09/60.jpg)
لنحصل على التأثير التالي

http://des.3ql.com/wp-content/uploads/2014/09/61-300x114.jpg (http://des.3ql.com/wp-content/uploads/2014/09/61.jpg)
خطوة 39

في النهاية قم بعمل طبقة جديدة خلف طبقة اسم الموقع وامام خلفية التصميم وبإستخدام فرشاه ناعمة واللون الابيض قم بعمل اضاءة خلف اسم الموقع وتغيير نوع الطبقة إلى Soft Light كما بالشكل

تم بحمد الله



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©