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

الخطوة الأولى :

قم بإنشاء ورقة عمل جديدة بإحداثيات 1024 بكسل عرض و 768 بكسل طول. املأ الخلفية باللون البني بدرجة #746e57. ثم اذهب إلى اداة التحديد المستطيلة (M) وقم بتحديد مستطيل يملأ نصف ورقة العمل واملأه باللون #f6f0d3 ثم اذهب إلى Layer>Rasterize>Shape.

اعط الطبقة إسم top layer واستخدم اداة الرسم اللاسو (L) وقم برسم بعض الاشكال المثلثية عند قاعدة المستطيل كما بالصورة ثم قم بحذفها.

تصميم موقع بواجهة كارتون

الخطوة الثانية :

قم بإختيار اداة الفرش، وقم بضبطبها على Soft Mechanical وبقطر 100 بكسل و استخدم اللون #484536. استخدم الفرشاة لرسم الظل للطبقة السابقة. ثم قم بتطبيق بعد الإضافات.

بالضغط مرتين على الطبقة اضف stroke بمساحة 1 بكسل و اللون الابيض. ثم بعد ذلك Pattern Overlay مع تغيير نوعه إلى Soft Light واستخدم  النموذج Rust Flakes.

تصميم موقع بواجهة كارتون

الخطوة الثالثة :

قم بإنشاء طبقة جديدة فوق طبقة Top-Layer ثم اضغط على زر ALT وبمؤشر الفارة اضغط بين الطبقتين لتطبق ماسك. بنفس الفرشاة السابقة، واستخدام اللون #d8ce9d ثم قم بالتلوين على الاطراف الداخلية لإضافة اضاءة.

تصميم موقع بواجهة كارتون

الخطوة الرابعة :

قم بإنشاء مستطيل جديد واستخدم اداة التعديل CTRL+T وقم بتدويره بزاوية كما بالصورة. ثم اذهب إلى Edit>Transform>Wrap وقم بسحب الركن الايمن من الاسفل كما هو موضح بالصورة.

تصميم موقع بواجهة كارتون

الخطوة الخامسة :

بإستخدام اداة الرسم ” القلم ” (P) قم برسم ظل تحت المستطيل وقم بتطبيق الفلتر Filter > Blur > Gaussian Blur مع القيمة 5 بكسل. ثم قم بتغيير نوع الطبقة لـ Multiply.

تصميم موقع بواجهة كارتون

الخطوة السادسة :

ثم بعد ذلك اضغط على CTRL مع مؤشر الفارة على العين المصغرة لطبقة المستطيل لتحديده ثم اذهب إلى Select>Modify>Contract>10px  وقم بإنشاء طبقة جديدة واملأها باللون الأبيض. ثم ضع اي صورة تختارها بداخل المستطيل الجديد.

الان استخدم اداة اللاسو (L) لرسم طبقة الشريط اللاصق ثم املئها باللون الابيض. ثم غير درجة الحشو إلى Fill ثم إذهب إلى ستايل الطبقة واضف Stroke بقيمة 1 بكسل ومكانه Inside بلون #e4dec3 ودرجة شفافيته 66%. ثم قم بتكرار الطبقة وضعها على يسار المستطيل كما بالصورة.

تصميم موقع بواجهة كارتون

الخطوة السابعة:

قم بإستخدام الفرشاة لإنشاء ظل تحت طبقتي الشريط اللاصق بلون #dcd4ab وغير درجة شفافية الطبقة إلى 50%.

تصميم موقع بواجهة كارتون

الخطوة الثامنة:

قم بكتابة عنوان الموقع . فى التصميم هنا استخدمنا خط ACS  Yaqout لإسم الموقع وروابط الموقع.

بعد ذلك طبق التالي لكل من الاسم والروابط :

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

تصميم موقع بواجهة كارتون

الخطوة التاسعة:

ثم بإستخدام اداة القلم الرصاص (B). قم برسم شكل السهم. ثم قم باستخدام الممحاة كما فعلنا مع الخطوط في الخطوة السابقة.

تصميم موقع بواجهة كارتون

الخطوة العاشرة:

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

تصميم موقع بواجهة كارتون

الخطوة الحادية عشر:

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

استخدم اداة المستطيل مرة اخرى (M) ومن الأسفل إلى الأعلى واجعل ارتفاعه حوالى 40 بكسل واملأه باللون #302e26 ثم اذهب إلى Layer>Rasterize>Shape ثم استخدم اسلوب القطع الذي استخدمناه مع الطبقة Top layer في الخطوة الأولى “1″  لكن في هذه الحالة سوف نقوم بالقطع من أعلى وليس من أسفل. ثم اضغط ضغطتين على الطبقة وقم بتطبيق الاستايل كما بالصور.

تصميم موقع بواجهة كارتون

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

تصميم موقع بواجهة كارتون