البحث في الموقع

سنتابع في هذا الدّرس الحديث عن مبادئ التّصميم المرئيّ، وسيكون موضوعنا عن الأنماط والتّكرار، ومتى يجب الخروج عن النّمطيّة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم (هذا الدرس) المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم تخلق هذه البطّات نمطًا، والنّمط يُغيّر إدراك النّاظر. يميل النّاظر إلى التّركيز في موضع مخالفة النّمط. يتعامل الدّماغ مع الأنماط والسّلاسل بمهارة فائقة، إذ يلاحظ بسرعة تكرّر شيء ما في الطّبيعة، ويميل إلى التّفكير بصورة مختلفة عن هذه الأشياء المُتكرّرة. تُظهر الصّورة الأولى أعلاه خمس بطّات متماثلة في صفّ واحد، إلّا أنّنا لا نرى خمس بطّات منفردة، بل صفًّا من البطّ، نعاملها على أنّها مجموعة أو سلسلة، وعادة نراها من اليمين إلى اليسار بحسب اتّجاه قراءتنا. لو كان صفّ البطّ هذا قائمة في موقع، لعاملناه بطريقة مماثلة، لذا توقّع أن ينقر النّاس على العناصر في يمين القائمة أكثر من تلك في يسارها. الخروج عن النمط تُظهر الصّورة الثّانية البّطات الخمس ذاتها، ولكنّ واحدة منها قررت الخروج وحدها، وهذا غيّر تمامًا من إدراكنا. نرى الآن صفّا من أربع بطّات، وواحدة منفردة، تظهر بارزة، ويصعب تجاهلها، مع أنّ البطّات جميعها مُتماثلة. لو كانت هذه البطّات قائمة، لكان الخيار الأوسط هو الأكثر نقرًا، لأنّ عيوننا تحدّق فيه، وستكون النّقرات على بداية القائمة (اليمين) أقلّ ممّا سبق، وإن بقيت أكثر ممّا في يسارها. فهم هذه الفكرة أمرٌ عظيم الأثر. قد تبدو الفكرة بسيطة وواضحة، ولكنّ تطبيقها على التّصميم يمكن أن يجعل المُستخدمين يُركّزون على الأزرار والخيارات المُهمّة. ولكن توخّ الحذر فقد يؤدّي الخروج عن النّمط إلى صرف نظر المُستخدم عمّا يهمّه، وعليك قبل الخروج عن النّمط أن تخلق هذا النّمط! اجمع مبادئ التصميم المرئي معا لخلق نمط أو سلسلة، ساوِ الثّقل المرئيّ واللّون، وعندها ستتجّه عينا المُستخدم من البداية إلى النّهاية. للخروج عن النمط، اختر عنصرًا ما تريد إبرازه كزرّ التّسجيل في الموقع، واجعل لونه أو حجمه أو شكله غير مُتوقّع، ومخالفًا لبقيّة النّمط، وعندها ستأتيك النّقرات! الخطوط والحواف الوهمية (Line Tension and Edge Tension) تعلّمنا إذن أن تكرار الأشياء يخلق نمطًا، إلّا أنّه يمكن أن يوحي بوجود "شكل" ما، ويؤثّر بدوره على اتّجاه عيني المُستخدم، وهذا ما نُسمّيه بالخطوط والحوافّ الوهميّة. أنت ترى صفّا من البطّ فيه فراغ. لم لا ترى 8 بطّات فقط؟ هل ترى 12 بطّة، أم مُستطيلًا من البطّ؟ هذه هي الحوافّ الوهميّة. (لم تملّ من رؤية البطّ بعد... صحيح؟) تنضوي هذه الفكرة تحت مُسمّى الشّدّ المرئي (Visual Tension) مفهوم يبدو بسيطًا جدًّا، ولكنّه عظيم التأثير، فالدّماغ البشريّ يُبالغ في التّعرّف على الأنماط لدرجة أن يرى أنماطًا غير موجودة! ويمكنك كمصمّم الاستفادة من ذلك. الخطوط الوهمية (Line Tension) تُظهر الصّورة الأولى في الفقرة السّابقة 8 بطّات في صفّ، ولكنّنا لا نرى 8 بطّات مُنفردة، بل خطًّا، وهذا من الشّدّ المرئيّ الّذي يعني إدراك وجود خطّ أو مسار غير موجود. ستتبع عيوننا هذا المسار لترى أين ينتهي، وهذا مفيدٌ للمصمّم. إن خرجنا عن هذا المسار (كأن نُنشئ فجوة)، فإنّه (كالخروج عن أيّ نمط) يجذب النّظر نحو الفجوة. الحواف الوهمية (Edge Tension) افترضنا حتّى الآن وجود خطّ واحد، لكن ماذا إن جمعنا عدّة خطوط؟ ستكون النّتيجة "شكلًا". في الصّورة الثّانية نلاحظ كيف رُتّبت البطّات بحيث تبدو وكأنّها تخلق زوايا في مستطيل، يمكن أن نعتبرها 12 بطّة، أو 4 مجموعات كلّ منها مكوّن من 3 بطّات، ولكنّ دماغك يميل إلى تفسيرها على أنّها مستطيل، وهذا ما يفعله. يمكن الآن وضع أشياء ضمن هذا المستطيل (مزيد من البط؟!) أو مساحات بين هذه الزّوايا، وكما في الخطوط الوهميّة، يجذب الفراغ النّظر. من جهة تخطيط الواجهات، قد يكون هذا الأسلوب مناسبًا للتركيز على العناصر الصّغيرة، كأسماء الحقول، أو يمكن إنشاء مسارات وهميّة تقود إلى الزّر المطلوب نقره، وهو اسلوب مُستخدم في الإعلانات القديمة. كما أنّه يمكن لهذا الأسلوب أن يزيد من بساطة الواجهة أو انسجامها لأنّ المسار أو المُستطيل ليس سوى مفهوم ذهني، ولكنّ النّظر إليه على أنّه 12 بطّة يعطي انطباعًا بالتّعقيد. اجمع مبادئ التصميم المرئي معا خلقنا فجوة في صفّ البطّ لجذب الانتباه، إلّا أنّه يمكن ملء الفراغ بعنصر ملوّن لإنشاء مسار مثل إنشاء تدرّج لونيّ على مجموعة عناصر في قائمة، أو يمكن إضافة ثقل مرئيّ إلى مجموعة من العناصر بُمعاملتها على أنّها شكل واحد بدل أجزاء منفصلة، وهي طريقة ممتازة للفت النّظر دون إضافة عناصر أخرى إلى الواجهة. ترجمة بتصرّف للدّرسين Repetition & Pattern-Breaking و Line Tension & Edge Tension من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 الإدخال المزدوج لحقول النماذج من منظور تجربة المستخدم كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح أنواع وطرق محاذاة النماذج (Forms) عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability)

قبل أن نذهب إلى الموضوع الرئيسيّ للمقال، سأعطيك لمحة قصيرة عن مشاكل التصميم التي قد تواجهها. لقد اشتكى لي أحد زبائني بأن بعض الصفحات تفتح ببطء شديد. وعندما أقول ببطء شديد، فإنني أعني ذلك! فقررت أن أصحح تلك الصفحة (بعمل debugging)، وما رأيته قد صدمني. لقد أظهر لي قسم الاستعلامات (queries) أن تلك الصفحة كانت تنفَّذ بعد القيام بكم هائل من الاستعلامات تعدّى 16500 استعلامًا!! لقد وجدت أن جزءًا من النصّ البرمجي هو سبب تلك المشكلة. لقد كانت هناك ثلاث حلقات foreach تستعلم عن خاصيّة والخواص الفرعيّة التابعة لها. لقد كانت تعمل جيدًا إلى أن صار في قاعدة البيانات 5500 عنصرًا. وفيما يلي ما كان يحدث: $main_object = MainObject::all(); foreach($main_object as $object) { echo $object->some_property; foreach($object->related_object as $related) { echo $related->some_property; echo $related->another_property; } foreach($object->another_related as $another) { echo $another->some_property; echo $another->another_property; } }إذا كان الاستعلام ;()main_object = MainObject::all$ يعيد 5500 نتيجة، فستعيد حلقة foreach الأولى ذلك القدر أيضًا، وكذلك بالنسبة للثانية والثالثة. باستخدام ORM، كثيرًا ما يقع المبرمجون في فخّ كتابة استعلامات قواعد بيانات غير كفؤة، وتجعلها ORM أكثر صعوبة في الاكتشاف. تُسمّى هذه المشكلة بمشكلة N+1 (بالإنجليزيّة N+1 problem). وأظن المطور السابق لم يكن على علم بذلك. ولتفادي هذه المشكلة، نستخدم التحميل الحثيث (eager loading). ما هو التحميل الحثيث؟لتبسيط الأمر، التحميل الحثيث طريقة تُعنى بعمل كل شيء عند الطلب. وهذه الطريقة أيضًا على العكس تمامًا من التحميل الكسول (lazy loading) عندما ننفذ المهام عند الحاجة. يساعدنا التحميل الحثيث على تجنب مشكلات الأداء، كما رأيت في مثالي أعلاه. ستفهم الأمر أكثر من خلال مثال، لذا لنتخيل الوضع التالي: لدينا نموذج علاقة هيئة محسّنة (بالإنجليزيّة: Enhanced Entity Relationship، واختصارًا EER)، بثلاث هيئات، كلّ منها مرتبطة بالأخرى. يمكنك أن تقرأ EER كما يلي: يمكن لكل عضو أن يملك العديد من المحلات، ولكن المحل الواحد ملك لعضو واحد فقط. يمكن للمحل الواحد أن يحوي العديد من المنتجات، ولكن المنتج الواحد لا يكون إلّا في محل واحد. الخطوة التالية هي إنشاء نماذج Eloquent لهذه الهيئات: العضو: <?php namespace App; use Illuminate\Database\Eloquent\Model; class Member extends Model { protected $fillable = ['username', 'email', 'first_name', 'last_name']; public function stores() { return $this->hasMany('App\\Store'); } }المحلّ: <?php namespace App; use Illuminate\Database\Eloquent\Model; class Store extends Model { protected $fillable = ['name', 'slug', 'site', 'member_id']; public function member() { return $this->belongsTo('App\\Member'); } public function products() { return $this->hasMany('App\\Product'); } }المُنتَج: <?php namespace App; use Illuminate\Database\Eloquent\Model; class Product extends Model { protected $fillable = ['name', 'short_desc', 'long_desc', 'price', 'store_id', 'member_id']; public function store() { return $this->belongsTo('App\\Store'); } }تخيّل أنك تبني تطبيقًا يسمح لمستخدميك أن يُنشئوا محالّهم التجاريّة الخاصّة. يمكن للمستخدمين –كما هو الحال بالنسبة للمحال الأخرى كلها طبعًا– أن يُنشئوا منتَجات عديدة. وأيضًا، يمكننا أن ننشئ صفحة واحدة تعرض كل المحلات وأفضل المنتجات لكل محلّ. شيء من قبيل هذا: يمكن أن ينتهي بك المطاف إلى الحصول على شيء كهذا في المتحكّم لديك: <?php namespace App\Http\Controllers; use App\Repositories\StoreRepository; class StoresController extends Controller { protected $stores; function __construct(StoreRepository $stores) { $this->stores = $stores; } public function index() { $stores = $this->stores->all(); return \View::make('stores.index')->with('stores', $stores); } }وفي العرض الذي ستقدم فيه تلك البيانات: @foreach($stores as $store) <h1>{{ $store->name }}</h1> <span>Owner: {{ $store->member->first_name . ' ' . $store->member->last_name }}</span><br> <h2>Products:</h2> @foreach($store->products as $product) <h3>{{$product->name}}</h3> <span>{{$product->short_desc}}</span><br/><br/> <span>Price: {{$product->price}}</span><br/> <?php Debugbar::info('Product displayed'); ?> @endforeach <br/>========================<br/> @endforeachوالنتيجة كالتالي: ومن اجل هذا المثال، زوّدت قاعدة البيانات بخمس مستخدمين، وثلاثة محالّ، وأربعة منتَجات. يقوم الاستعلام الأول باستدعاء كل المحال من قاعدة البيانات، وهذا هو الجزء +1 من مشكلة N+1. في هذا المثال تحديدًا، حرف N يمثّل عدد المحلات التي أرجعها لنا الاستعلام الأول، حيث أنها تمثل عدد المرات التي سنقوم فيها بالاستعلام select * from على جدولي products و members. وبما أن لدينا 3 محلات، فسنستعلم 3 مرات على جدول المستخدمين، وثلاث مرات على جدول المنتجات. وفي النهاية، قمنا بتنفيذ الاستعلامات بعدد مرات قدره 3+3+1. تخيل الآن ما الذي يمكن أن يحدث لو كان لديك 5000 أو 10000 محل؟ سيكون لديك في تلك الحالة عشرة آلاف إلى عشرين ألف استعلام في كل مرة يقوم فيها أحد المستخدمين بزيارة الصفحة. وماذا لو كانت لديك عشرة آلاف أو مئة ألف زيارة كلّ أربع وعشرين ساعة؟ هذا كابوس! من الواضح الآن أن هذا التوجّه مدمّر للأداء. وبغض النظر عن نوع قاعدة البيانات التي تستخدمها، وعن مدى قوة الخادم الذي لديك، فستصل دائمًا إل تلك النقطة التي يقف فيها العتاد القوي لديك عاجزًا. يمكنك أن تحسّن الأداء بعمل cache لهذه الاستعلامات، باستخدام Redis على سبيل المثال. سيؤدي هذا الغرض، ولكن لبعض الوقت فقط. وبتلك الطريقة، أنت فقط تؤجل النهاية الحتميّة التي ستكلّفك الكثير من المال والوقت، وفي الغالب ستفقد بعض الزبائن، أو أنّ قاعدة بياناتك ستضعف كثيرًا. وهنا يأتي التحميل الحثيث لينقذك من هذه الورطة. استخدام التحميل الحثيث في Laravel بسيط للغاية. العلاقات التي ترغب أن يتم تحميلها بشكل حثيث تحددها في طريقة with كما يلي: $stores = Store::with('member','products')->get();الآن، بدل استخدام 7 استعلامات، قلّلنا باستخدام التحميل الحثيث عدد الاستعلامات إلى 3 فقط: وستكون ثلاثة استعلامات حتى ولو كانت لديك عشرة آلاف مدخلة في جدول المحلات. وكما ترى، فإن الاستخدام السليم للتحميل الحثيث يمكن أن يؤدي إلى تحسين أداء تطبيقك بقدر هائل. ولكي نحصل على تحسن للأداء بالفعل، فعلينا أن نوجد فهرسًا لحقل الهويّة id في جدولي members و products. ومع وجود كمّ هائل من السجلات، فإن تنفيذ (... ,'in( '1', '2 على حقل غير مفهرس سيأخذ وقتًا طويلًا. وبعد هذه المقدمة عن التحميل الحثيث، هيا بنا نرى كيف يمكننا أن نستخدم العلاقات مع المستودعات. تمديد فئة المستودعسأريك طريقة واحدة يمكنك فيها أن تستخدم العلاقات في فئات مستودعات concrete. وهنا مثال عن النتيجة النهائيّة: function __construct(StoreRepository $stores) { $this->stores = $stores; } public function index() { $stores = $this->stores->with('member', 'products')->all(); .... }وكما ترى هنا، لدينا طريقة with يمكنك أن تسلسل فيها نموذج العلاقات. ستكون هذه الطريقة شبيهة بطريقة with في Laravel’s Query Builder. public function with($relations) { if (is_string($relations)) $relations = func_get_args(); $this->with = $relations; return $this; }نحتاج الآن لأن نربط كلّ علاقة من العلاقات التي قمنا بتقديمها بالنموذج: protected function eagerLoadRelations() { if(!is_null($this->with)) { foreach ($this->with as $relation) { $this->model->with($relation); } } return $this; }وها هو ذا، والشيء الوحيد الذي تبقّى هو أن نحدّث طريقة مستودع ()all (وأي شيء آخر ترغب بتحديثه) لاستخدام التحميل الحثيث: public function all($columns = array('*')) { $this->applyCriteria(); $this->newQuery()->eagerLoadRelations(); return $this->model->get($columns); }وكما سبق وذكرت، فيمكنك أن تضيف عدّة علاقات ضمن طريقة ()with. وفيما يلي مثال على StoresControler: <?php namespace App\Http\Controllers; use App\Repositories\StoreRepository; class StoresController extends Controller { protected $stores; function __construct(StoreRepository $stores) { $this->stores = $stores; } public function index() { $stores = $this->stores->with('member', 'products')->all(); return \View::make('stores.index')->with('stores', $stores); } }وفي العرض يمكنك أن تعرض البيانات بالطريقة التي تريدها، ولغرض التجربة يكفي هذا: @foreach($stores as $store) <h1>{{ $store->name }}</h1> <span>Owner: {{ $store->member->first_name . ' ' . $store->member->last_name }}</span><br> <h2>Products:</h2> @foreach($store->products as $product) <h3>{{$product->name}}</h3> <span>{{$product->short_desc}}</span><br/><br/> <span>Price: {{$product->price}}</span><br/> <?php Debugbar::info('Product displayed'); ?> @endforeach <br/>========================<br/> @endforeachوكما هو متوقع، لدينا الآن هذه الاستعلامات الثلاثة فقط: الخلاصةيمكنك باستخدام التحميل الحثيث أن تحسّن أداء تطبيقك. وأحيانًا، عندما يكبر التطبيق، حتى التحميل الحثيث ليس كافيًا للحفاظ على أعلى أداء. في الدرس التالي سأريك كيف يمكنك تجميل مستودعاتك لتقوم بعمل cache للاستعلامات من أجل أداء أفضل. ترجمة -وبتصرف- للمقال: Using Repository Pattern in Laravel 5 - Eloquent Relations and Eager Loading.

قررت اليوم أن أكتب درسا تعليميا عن كيفية إنشاء نمط خريفي بسيط في برنامج Illustrator. يمكنك بسهولة تغيير بعض الألوان والمحتويات لتجعل النمط يبدو صيفياً، ولكنني أعتقد أن البرتقالي المحروق والبني المائل للخمري ألوان تتماشى مع الخريف، إنها ألوان جميلة بجمال تلك الألوان النابضة بالحياة التي تشاهدها في فصل الصيف. هذا هو الشكل النهائي للنمط البسيط الذي سنحاول إنشاؤه، وكما ترون فهو كامل مع مجموعة من الأشياء المقترنة بالخريف: التوت، البندق، الأوراق، الفطر، وحتى وجود بومة صغيرة لطيفة يضفي على التصميم بعض الحياة. وكما جرت العادة في الدروس الأخرى، سوف أُضمن الأبعاد التي استخدمتها، ولكن لا تتردد في استخدام الأبعاد التي تُرضيك. دعونا نبدأ مع البومة لتكوين هذا النمط الخريفي الفريد، وهي المفضلة لدي، لنقم بإنشاء مستند جديد في Illustrator، ونرسم شكلاً بيضوياً بأبعاد 150x190px، ثم باستخدام Direct Selection نسحب نقطة الربط السفلى بمقدار 20px للأعلى، ثم نرسم دائرة بقطر 95px، ونقوم بمحاذاة مركزها عموديًا وأفقياً مع مركز الشكل البيضوي باستخدام لوحة المحاذاة Align . نقوم بسحب الدائرة للأعلى بمقدار 55px ، ثم نقوم بطرحها من الشكل البيضوي باستخدام الزر Minus Front. وبهذا نكون قد أنشأنا جسم البومة. لنقم في الخطوة التالية بإنشاء وجه البومة، سنبدأ بالعينين، لنرسم ثلاثة دوائر بقطر 5،20،40 على الترتيب، بحيث تتطابق مراكز الدوائر الثلاثة، ثم نسحب الدائرة الصغيرة صعدواً لليمين بنحو 6px ، ثم نطرحها من الدائرة الوسطى باستخدام الزر Minus Front. نقوم بإنشاء نسخة من العين باستخدام المفاتيح المختصرة (CTRL+C ثم CTRL+F) أو (CMD+C ثم CMD+F) إذا كنت تستخدم نظام ماكنتوش، ونضع النسخة بجانب العين الأصلية على مسافة 15px منها. نحدد الدائرتين الخارجيتين ونختار من القائمة: Object > Path > Offset Path ثم نضبط الإزاحة Offset على القيمة 15 ونضغط موافق، قبل دمجهم بواسطة الزر Unite، وإرسالها إلى الجزء الخلفي من الملف بالضغط على (SHIFT+CTRL+[) من لوحة المفاتيح. نقوم الآن بتحديد أجزاء العيون والجمع بينها بالضغط على (CTRL+G) من لوحة المفاتيح. لننتقل إلى المنقار، نرسم دائرة بقطر 10px، نضغط على (SHIFT+C) من لوحة المفاتيح للوصول إلى Convert Anchor Point وننقر على نقطة الربط في الأسفل لجعلها حادة، ثم بأداة التحديد المباشر Direct Selection نقوم بسحبها بمقدار 5px للأسفل، ونقوم بمحاذاة المنقار أفقياً ورأسياً إلى أسفل العينين، ثم وضع الوجه بحيث يكون مركزياً بالنسبة لجسم البومة، حوالي 30px أسفل وأعلى الأذن. ولإنشاء أجنحة البومة، نرسم دائرة بقطر 60px ونقوم بمحاذاتها إلى أسفل ويسار جسم البومة، نسحب الدائرة إلى اليسار بمقدار 30px وإلى الأعلى بمقدار 5px أو حتى تكون مقتنع بموقعها. نحدد الآن جسم البومة والدائرة الممثلة للجناح، وإذا كان لديك CS5 أو أعلى يمكنك استخدام أداة البناء Shape Builder من شريط الأدوات أو الضغط على (SHIFT+M) والاستمرار بالضغط على المفتاح ALT من لوحة المفاتيح وتحديد القسم من الدائرة الواقع خارج جسم البومة، وحذفه. أو بدلاً من ذلك يمكنك أخذ نسخة من جسم البومة مع الجناحين الذين لا يزالان محددين (CTRL+C) واختيار الزر Intersect من لوحة Pathfinder، ثم لصق الجسم مرة أخرى في مكانه (CTRL+F)، وإرساله للجزء الخلفي من المستند بالضغط على (SHIFT+CTRL+[) من لوحة المفاتيح. كرر هذه العملية للحصول على الجناح الثاني. الخطوة التالية إنشاء قدكي البومة، نرسم ثلاثة أشكال بيضوية بأبعاد 10x20 px، ونضعها بجوار بعضها البعض متداخلة بمقدار 2px فيما بينها، ثم نجمع بينهم بعد التحديد بواسطة الزر Unite. الآن القدم الأولى كاملة، نقوم بعمل نسخة منها للقدم الثانية ونضعهما جنباً إلى جنب بمسافة 30 نقطة فيما بينهما. نقوم الآن بمحاذاة القدمين مركزياً مع الجزء السفلي للبومة، ونسحبهما للأعلى بمقدار 2px، أو بحيث نكن راضين عن موقعهما. وبقي علينا لإنهاء البومة منحها بعض الريش والألوان، نرسم دائرتين بقطر 10px ونطابق مركزهما معاً، ثم نسحب الدائرة العلوية بمقدار نقطتين للأعلى ونطرحها من الدائرة السفلية Minus Front. ننشئ أربعة نسخ من الريش بحيث نضع ثلاثة منها في الجزء العلوي واثنتين في الجزء السفلي كما في الشكل، بمسافة 10px فيما بينها، والآن يمكننا تلوين البومة باستخدام لوح الألوان الخاص بي أو اختيار واحد خاص بك. هذا كل شيء، لدينا الآن بومة كاملة. لماذا لا يكون التالي هو إنشاء غصن توت خريفي؟ لنرسم دائرة بقطر 30 وشكلاً بيضوياً بأبعاد 10x5 px ومحاذاة الشكلين أفقياً وعمودياً إلى المركز قبل سحب الشكل البيضوي للأعلى بمقدار 3 نقاط تقريباً، نقوم بعدها برسم مستطيل بأبعاد 5x100px ليُشكل الساق ونضعه وراء حبة التوت ونسحبه للأعلى بنحو 10 نقاط قبل إرساله إلى الجزء الخلفي من المستند. نُنشئ الآن مستطيلًا أخر 50x5px، ونضعه بحيث يكون مركزه على الساق ويقع أسفل حبة التوت بحوالي 10px. ننتقل مع المستطيل الأخير المحدد إلى القائمة: Effect > Warp > Arc ونعين Bend إلى القيمة 50% ثم ننقر على زر OK، أصبح المستطيل يمثل جذع غصن التوت، ويمكنك إزالة مظهر الجذعية من خلال القائمة: Object > Expand Appearance عن طريق النقر بزر الفأرة الأيمن على الجذع ونختار فك التجميع Ungroup من القائمة المنبثقة وحذف المسار بعدها. إذا ظهرت لك رسالة الخطأ التالية: "The filter produced no results"، فيجب عليك اختيار اثنين من المسارات المتقاطعة عند محاولة استخدام الزر Minus Front من لوح Pathfinder في المرة القادمة. قمّ بعمل نسخة من حبة التوت، وحركها للأسفل بمقدار 25px وإلى اليسار بمقدار 30px. ثم أنقر على حبة التوت التي لا تزال محددة بزر الفأرة الأيمن واختار من Transform الأمر Rotate وعيّن زاوية الدوران angle على القيمة 45 درجة ثم موافق. كرر العملية ولكن بزاوية -45 درجة لحبة التوت في الجهة المقابلة. نقوم بنسخ ولصق حبات التوت والساق بالضغط على (CTRL+C ثم CTRL+F) من لوحة المفاتيح، ومن ثم أنزل النسخة للأسفل 40px. ولحذف الجزء غير المرغوب فيه من الساق، نحدد الجذع و الساق وننقر على الزر Divide من لوحة Pathfinder، ونحذف الجزء غير المرغوب فيه من الساق، ثم نقوم بتحديد سيقان حبات التوت والجذع وننقر الزر Unite من لوحة Pathfinder، ونرسل الشكل إلى خلفية المستند بالضغط على (SHIFT+CTRL+[) من لوحة المفاتيح. كل ما علينا القيام به الآن للانتهاء من غصن التوت هو إضافة ورقة وبعض الألوان. نرسم دائرتين بقطر 50px ونضعهما جنباً إلى جنب مع تداخل 30px فيما بينهما. نحدد كلا الدائرتين وننقر على الزر Intersect من لوحة Pathfinder، أصبح لدينا شكل الورقة كاملاً وبقي علينا تدويرها بزاوية 30 درجة ووضعها على يسار وأسفل الغصن، بفاصل 5px لليسار و10px فوق الجزء السفلي من الساق. والآن لتُعطي لغصن التوت الألوان التي تراها مناسبة. الخطوة التالية إنشاء غصن عليه بعض أوراق الخريف، لإنشاء الأوراق نستخدم نفس الطريقة التي استخدمناها للأوراق في غصن التوت. نرسم دائرتين بقطر 50px مع تداخل 30px ونقاطعهما باستخدام لوحة Pathfinder. نرسم مستطيلا بأبعاد 5x100 px ونضعه أسفل الورقة التي رسمناها آنفاً، ونتأكد من أن الشكلين يتمحوران شاقولياً، نأخذ نسخة من الورقة وندورها بزاوية 90 درجة ونضعها على مسافة 5 نقاط يسار وأسفل المستطيل. نقوم بنسخ الورقة نسختين ونجعل كل واحدة فوق الأخرى بمسافة فاصلة 10px بين كل ورقة وأخرى. نحدد الورقة العليا و ندورها بزاوية -30 درجة، وندوّر الورقة التي في المنتصف بزاوية -15 درجة،ثم نقوم بنسخ ولصق الأوراق الثلاثة بعد تحديدها ونأخذها ليسار المستطيل ونعكسها عمودياً بالنقر عليها بزر الفأرة اليمين ونختار من Transform الأمر Reflect ونحصر على تحديد الخيار Vertical ثم موافق. نضيف لغصن الأوراق بعض الألوان استعداداً للانتقال لرسم الفطر. لنبدأ بغطاء حبة الفطر من خلال رسم دائرة بقطر 50px ، ونسحب نقطة الربط السفلى للأعلى باستخدام أداة التحديد المباشر Direct Selection بمقدار 15px أو بشكل تكون مقتنعًا بمكانها. ونرسم دائرة أصغر لتشكيل ساق حبة الفطر بقطر 20px، ونسحب نقطة الربط العليا للأعلى نحو 30px، نضبط محاذاة غطاء وساق حبة الفطر شاقولياً وأفقياً بواسطة لوحة المحاذاة Align ثم نقوم بسحب الساق للأسفل بمقدار 15px. أعتقد أن ساق الفطر تحتاج بعض اللمسات، نختار ساق الفطر وننقله إلى الجزء الخلفي للمستند، ثم من القائمة: Effect > Warp نحدد شكل الانحناء Style على الشكل Squeeze ونضبط قيمة Bend على 40% ثم موافق. نضيف الآن بعض الدوائر بأقطار متفاوتة، ونضيف الألوان المناسبة لحبة الفطر استعداداً للانتقال للعنصر الخريفي الأخير وهو حبة البلوط. بالنسبة لحبة البلوط، نبدأ برسم دائرة بقطر 30px، نضغط على Shift+C من لوحة المفاتيح ثم ننقر على نقطة الربط السفلية لتحويلها إلى نقطة حادة، أو نختار الزر Convert Anchor Point من لوح الأدوات وننقر على نقطة الربط، وباستخدام أداة التحديد المباشر Direct Selection نسحب النقطة السفلية بمقدار 20px. ونضيف للدائرة المحددة انتفاخ أفقي Bend بمقدار -80% ثم موافق. وبذلك نكون قد أنشأنا القسم السفلي من حبة البلوط. لننتقل الآن إلى تصميم كأس (قبعة) حبة البلوط، نرسم شكلاً بيضوياً بأبعاد 20x34 px، ثم نسحب نقطة الربط السفلى بمقدار 10px للأعلى باستخدام أداة Direct Selection. لنرسم مستطيلًا مُستدير الزوايا بأبعاد 10x3 px، ونطبق عليه انحناء بشكل قوس Arch بنسبة 25%، ثم محاذاة الشكل الجديد أفقياً إلى مركز كأس البلوط وعمودياً إلى أعلاه، ونسحبه 5 نقاط تقريباً للأعلى ونقوم بتحديده مع الكأس و الجمع بينهما بالنقر على الزر Unite. وأخيراً محاذاة كأس البلوط مركزياً مع حبة البلوط ثم سحبه 10 نقاط للأعلى قبل إضافة الألوان التي نريدها. حسناً، لقد شكلنا كل عناصر الخريف ونحن في طريقنا لاستخدامها في نمط خريفي بسيط. وكل ما علينا فعله الآن هو تشكيل النمط البسيط. ونأتي الآن للجزء الممتع من العمل، نرسم مُربعًا بطول 600px ونملأه بالأشكال الخريفية التي قمنا للتو بإنشائها، لا تتردد في تغيير الأحجام، التعتيم، الدوران، أو أي شيء تريده. يمكنك في هذه المرحلة الحصول على بعض المرح، الشيء الوحيد الذي أود اقتراحه هو أن يكون لديك التصور الكافي للكيفية التي سيتم تكرار النمط فيما بعد في حال كنت قد ذهبت ببعض الأشكال خارج حواف المربع، هذا إذا كنت لا تريد أي تداخل غير مقصود. وعندما تكون سعيداً ومقتنعاً بالتصميم يمكنك تجميع group كل العناصر باستثناء الخلفية بالضغط على (CTRL+G) من لوحة المفاتيح بعد تحديدهم. نحدد العناصر المجمعة، ونقوم بإنشاء نسخة منها، ثم ننقر بزر الفأرة الأيمن ونختار من Transform ثم تحريك Move من القائمة المنبثقة، أو نضغط على (SHIFT +CTRL+M). ومن مربع الحوار Move نضبط الموضع الأفقي Horizontal على 600px والرأسي Vertical على القيمة 0، وزاوية الدوران Angle على القيمة 0. وبهذا ننسخ كل شيء إلى اليمين، نكرر العملية حتى يتم نسخ جميع العناصر إلى كل الحواف الأربعة. العلوي / أفقي: 0، عمودي: -600، المسافة: 600 ، زاوية: 90 درجة.اليسار / أفقي: -600، عمودي: 0، المسافة: 600، زاوية: 180 درجة.السفلي / أفقي: 0، عمودي: 600 ل، المسافة: 600 ل، زاوية: -90 درجة. نفك تجميع العناصر الخريفية في المربعات الخمسة ثم نحدد كل شيء، ما عدا الخلفية، ونقوم بتجميعها ككائن واحد عملاق، نقوم بعمل نسخة من الخلفية ووضعها في الأمام بالضغط على المفاتيح (CTRL+C ثم CTRL+F) ثم (SHIFT+CTRL+]) لإحضارها للمقدمة. نحدد كلاً من الخلفية والعناصر الخريفية وننقر على الزر اقتصاص Crop من لوحة Pathfinder. هذا كل ما في الأمر. انتهيت من نمطك الخريفي البسيط الآن، قمّ بسحبه إلى لوحة Swatches واستخدامه كيفما تشاء. فعلا، تُساعد ألوان الذهبي والبرتقالي والبني على استحضار تلك الذكريات من الأمسيات الباردة، مع القفازات والأوشحة، ومع قدح دافئ من الشوكولاتة الساخنة. ترجمة -وبتصرف- للمقال Create a seamless autumnaal pattern in Illustrator لصاحبته Liz Canning.

سنتعرف في هذا الدّرس على الأنماط Patterns، الظلال Shadows وقواعد الملء في Canvas بالإضافة لرسم النصوص وتطبيق التنسيقات عليها مثل أنواع الخطوط Fonts وخصائصها. كما سنتعرف على واحدة من السمات الأكثر إثارة في canvas وهي القدرة على استخدام الصور لعمل تركيبات صور ديناميكية، خلفيات أو حتى شخصيات الألعاب. الأنماط Patterns تتيح لك canvas إنشاء أنماط باستخدام الصور وتحديد أنواعها باستخدام الدالة ()createPattern. تأخذ الدالة ()createPtterns معاملين هما الصورة المراد استخدامها لتطبيق النمط والتي يمكن أن تكون عنصر HTML أو وسم <video> أو حتى عنصر canvas آخر. المعامل الآخر هو النوع Type وهو عبارة عن نص string يحدد كيفيّة استخدام الصورة لتطبيق النمط. createPattern(image, type) يأخذ المعامل type أحد القيم التالية والتي تحدد كيفية استخدام الصورة لإنشاء النمط Pattern: Repeat: تكرر الصورة في الاتجاهين الأفقي Horizontal والعمودي Vertical repeat-x: تكرر الصورة في الاتجاه الأفقي Horizontal repeat-y: تكرر الصورة في الاتجاه العمودي Vertical no-repeat: تظهر الصورة مرة واحد كما هي. تشبه الدالة ()createPattern دوال التدرج اللّوني gradient التي شرحتها في الدرس السّابق. عند إنشاء نمط يمكننا إسناده إلى الخاصية fillStyle أو strokeStyle كما في المثال التالي: var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat'); ملاحظة: تأكّد من أنك قمت بإنشاء صورة وإعطائها المسار الصحيح قبل استدعاء الدالة ()createPattern. في هذا المثال سنقوم بإنشاء نمط وإسناده للخاصية fillStyle حيث سننشئ النمط ضمن الدالة onload للصورة وذلك للتأكد من تحميل الصورة قبل إسنادها للنمط. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; img.onload = function(){ var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); } } النتيجة: الظلال Shadows باستخدام الظلال في canvas يمكنك عمل تظليل للنصوص والصور. استخدام الظلال في canvas يتضمن 4 خصائص: shadowOffsetX = float تشير إلى أن الظل يمتد من الكائن بمسافة أفقية. لا تتأثر هذه القيمة بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. shadowOffsetY = float تشير إلى أن الظل يمتد من الكائن بمسافة عمودية. لا تتأثر هذه القيمة بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. shadowBlur = float تحدد حجم تأثير الضبابية blurring. لا تتعلق هذه القيمة بعدد الـ pixels ولا تتأثر بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. shadowColor = color هي قيمة ألوان CSS قياسية وتحدد لون الظل وقيمتها الافتراضية هي لون أسود بشفافية كاملة. الخاصيتان shadowOffsetX و shadowOffsetY تشيران إلى أي مدى ينبغي أن يمتد الظل من الكائن في الاتجاه X والاتجاه Y. تأخذ الخاصيتين قيمًا سالبة وذلك لتحديد اتجاه الظل إما لليسار X- أو للأعلى Y-. الخاصية shadowBlur تحدد حجم الضبابية للظل ولا تتعلق بعدد الـ pixels ولا تتأثر بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. المثال التالي يرسم نصًا بتأثيرات ظلال مختلفة باستخدام القيم أعلاه: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("أهلًا بك في أكاديمية حسوب", 5, 30); } قواعد الملء Fill Rules عند استخدام الخاصية ()fill يمكنك تحديد خوارزمية الملء التي تريد تطبيقها ويمكن من خلالها تحديد فيما إذا كانت النقطة داخل أو خارج المسار وبالتالي تحديد هل سيتم ملئها أم لا. ويوجد لها قيمتان: nonzero وهي القيمة الافتراضية. evenodd مثال: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true); ctx.arc(50, 50, 15, 0, Math.PI*2, true); ctx.fill("evenodd"); } رسم النصوص كأي شكل من الأشكال التي يمكن رسمها على canvas يمكن أيضًا رسم النصوص وتطبيق خصائص مختلفة عليها. يوفّر سياق التصيير rendering context في canvas طريقتين لتصيير النصوص: 1- باستخدام الدالة fillText fillText(text, x, y [, maxWidth]) تملأ نصًا مُعيّنًا عند موضع x,y معين، المعامل maxWidth معامل اختياري يحدد أقصى عرض للرسم. 2- باستخدام الدالة strokeText strokeText(text, x, y [, maxWidth]) تملأ حواف نص معين عند موضع x,y معين، المعامل maxWidth معامل اختياري يحدد أقصى عرض للرسم. مثال: ملء نص باستخدام fillStyle function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); } مثال: ملء حواف نص باستخدام strokeStyle function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); } تصميم وتنسيق النصوص يوفر سياق التصيير Rendering Context مجموعة من الخصائص تمكّنك من تحديد المظهر الذي تريد إظهار النص به على Canvas. ستبدو هذه الخصائص مألوفة لك إن كنت قد عملت على CSS من قبل. font = value تحدد نمط النص الحالي (نوع الخط) الذي سيظهر به النص، تستخدم هذه الخاصية نفس قواعد استخدام الخاصية CSS font. القيمة الافتراضية للخط هي 10px sans-serif. textAlign = value تُحدّد إعدادات محاذاة النص. القيم التي تأخذها هذه الخاصية هي start ،end ،left ،right أو center. القيمة الافتراضية لها هي center. textBaseline = value تُحدّد إعدادات خط الأساس .Baseline القيم التي تأخذها الخاصية text Baseline هي top ،hanging ،middle ،alphabetic ،ideographic أو bottom. القيمة الافتراضية لها هي alphabetic. direction = value تُحدّد الاتجاهية. القيم التي تأخذها الخاصية textAlign هي ltr ،rtl ،inherit. القيمة الافتراضية لها هي inherit. يوضّح الرّسم البياني التالي المأخوذ من WHATWG مختلف خطوط الأساس Baseline التي تدعمها الخاصية textBaseline. مثال: ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100); قياسات النصوص المتقدمة في حال كنت بحاجة لتطبيق المزيد من التفاصيل على النصوص فإن الدالة ()measureText توفر لك إمكانية لقياس النصوص حيث تُرجع الدالة ()measureText كائن من نوع TextMetrics يحتوي على عرض النص الحالي بالبكسل. يظهر المثال التالي كيف يمكنك قياس الخط والحصول على عرضه: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); object text.width; } الصور يعتمد استيراد الصور في Canvas على خطوتين أساسيتين: الحصول على مرجع reference لكائن HTMLImage أو لعنصر Canvas آخر لاستخدامه كمصدر. يمكن استخدام الصور أيضًا عن طريق توفير رابط URL. رسم الصورة على canvas باستخدام DrawImage. يستخدم Canvas API أي من أنواع البيانات التالية باعتبارها مصدر صورة للحصول على الصور ورسمها: HTMLImageElement: يتم إنشاء الصور باستخدام المنشئ constructor كأي عنصر <img> في HTML. HTMLVideoElement: استخدام عنصر <video> كمصدر للصورة أي استخدام الاطار الحالي للفيديو كصورة. HTMLCanvasElement: يمكن استخدام عنصر <canvas> آخر كمصدر صورة. استخدام الصور في Canvas يوجد عدة طرق لاستخدام الصور في Canvas: استخدام صور من نفس الصفحة يمكننا الحصول على مرجع للصور reference من نفس الصفحة باستخدام أحد الطرق التالية: document.images collection استخدام الدالة ()document.getElementsByTagName استخدام الدالة ()document.getElementById عن طريق معرّف ID الخاص بالصورة استخدام صور من مجالات أخرى ويتم ذلك باستخدام الخاصية crossorigin للعنصر <img> يمكنك طلب إذن لتحميل الصورة من مجال Domain آخر لاستخدامها في استدعائك للدالة ()drawImage. إذا سمح مجال الاستضافة وصول cross-domain للصورة فسيتم استخدام الصورة في Canvas دون التأثير عليها أما في حال لم يتم السماح بالوصول للصورة فسيحدث تشويه للعنصر canvas. استخدام عناصر Canvas أخرى كما هو الحال مع الصور العادية يمكن الوصول لعناصر canvas أخرى باستخدام الدالة ()document.getElementsByTagName أو ()document.getElementById. يجب التأكد قبل استخدام عنصر Canvas آخر من أن العنصر الأساسي يحوي على رسم أو مسار. واحدة من أهم استخدامات هذا الأسلوب هو استخدام عنصر canvas كمعرض صور مصغرات لعنصر Canvas أكبر منه. إنشاء صورة من الصفر خيار آخر لإنشاء HTMLImageElement هي باستخدام المنشئ() Image: var img = new Image(); img.src = 'myImage.png'; في حال استدعائك للدالة ()drawImage قبل الانتهاء من تحميل الصورة قد يظهر خطأ في المتصفحات القديمة لذا عليك التأكد من استخدام الحدث load بعد الانتهاء من تحميل الصورة: var img = new Image(); img.addEventListener("load", function() { // execute drawImage statements here }, false); img.src = 'myImage.png'; استخدام إطارات الفيديو يمكنك أيضًا استخدام إطارات الفيديو <video> لإظهاره في الـ canvas. مثال: function getMyVideo() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); return document.getElementById('myvideo'); } } سنكمل في الدّرس القادم التعامل مع الصور في canvas والتعرّف على خصائصها بالإضافة لإنشاء معرض فني. المصادر

إنّ هذا النوع من التصاميم منتشر على الإنترنت وبين المصمّمين اللذين يُبدعون تصاميم جديدة تعتمد على ذات النمط. سنتعلّم في هذا الدرس كيفية إنشاء تصميم نقش ضبابي تجريدي خطوة بخطوة مستخدمين مزيجاً من تقنيات الفوتوشوب Photoshop والإليستريتور Illustrator. لقد تابعت العديد من المواقع التي تتحدث عن هذا النوع من التصاميم حيث قام أحدهم بهذا العمل عبر استخدام تطبيقين على أجهزة الآيفون IPhone ولاحظت أنّ التصميم يقوم أساساً على فكرة وضع نقش تدرّجي هندسي فوق خلفية ضبابية حيوية، حيث ستكون النتيجة قطعة فنية رائعة من الفن التجريدي التي تَصلُحُ بشكل ممتاز للطباعة، أو كخلفية أو كمقدمة لأعمال تصاميم أخرى. وبدلاً من استخدام الآيفون IPhone الغير متوفر لدى الجميع، سأعلّمكم كيفية إنشاء تأثير مشابه باستخدام الفوتوشوب Photoshop والإليستريتور Illustrator. افتح صورة عشوائية ستكون القاعدة الأساسية للخلفية الضبابية. كلّما كانت الصورة حيوية ونابضة بالحياة وملونة أكثر كان ذلك أفضل، لذلك استخدمت صورة غروب الشمس ذات تدرجات الألوان ما بين الوردي والأرجواني. افتح الصورة بالفوتوشوب وأضف فلتر التمويه الضبابي Gaussian blur مع تطبيق أقصى الإعدادات. كرّر عملية التمويه ذاتها عدة مرّات حتى تخفي معالم الصورة الأساسية. سنقوم بقص العمل كاملاً وتحديداً الجزء المربع الأوسط منه مع التركيز على التخلص من المنطقة السوداء في الأسفل وسنقوم بذلك عبر استخدام أداة القص Crop مع الاستمرار بالضغط على مفتاح Shift أثناء تحريك المؤشر. سنضاعف الطبقة الحالية التي نعمل عليها بالضغط على CMD+J ثم نذهب إلى قائمة: Filter > Noise > Add Noise لإضافة بعض التشويش الخفيف. ملاحظة: ما هو اختصار CMD+J. إن مفتاح CMD في الويندوز هو Ctrl وفي ماكنتوش هو Command ⌘ حدد خَيَار Gaussian ثم أدِر قيمة التشويش Amount إلى 16% لإضافة بُقَع حُبيبات غزيرة. نستطيع تكثيف الألوان بتغيير خصائص الدمج في طبقة التشويش التي عملنا عليها للتو إلى Overlay، ثم خفف الشفافية لنحو 60% لموازنة حيوية الألوان. حاولت في البداية بشدّة أن يكون هذا الدرسُ درسَ فوتوشوب فقط، ولكن لا يمكن الإنكار بأن الإليستريتور يمتلك قدراتٍ أكبر في إنشاء النقوش المستندة على الأشكال. لذلك انتقل إلى برنامج الإليستريتور وارسم مربعاً (استمر بالضغط على Shift للحفاظ على تساوي الأضلاع لرسم المربع). قم بتدويره 45 درجة ليصبح بشكل ألماسة (هندسياً يُسَمّى مُعَيّن). أضف اللون الأسود إلى التدرّج الشفاف الدائري لتعبئة الشكل كما في الصورة، ثم اضبط مستوى التدفق مستخدماً أدوات التدرّج بالضغط والسحب عبر ذلك الشكل. فعّل الأدلة الذكية Smart Guides بالضغط على CMD+U لجعل الخطوات التالية أكثر سهولة. استمر بالضغط على Alt وعلى Shift مع النقر والسحب لإنشاء نسخة عن الشكل الألماسي. الأدلة الذكية الخضراء ستقوم بعملية المطابقة لوضع العنصرين بجانب بعضهما بشكل صحيح. كرّر العملية مراراً بالضغط على CMD+D لإنشاء صف كامل من الأشكال الألماسية الموضوعة بمحاذاة بعضها بشكل ممتاز. حددهم جميعاً واصنع نسخة عن الصف بأكمله وهذه المرّة قم بموازنة الصف الجديد بشكل متناسب أسفل الصف الأصلي. حدد جميع الأشكال في الصفّين وضاعفهم مجدداً وقم بمحاذاتهم لتمديد النقش وزيادته. يمكنك الآن الضغط على CMD+D لتستمر بمضاعفة ومحاذاة صفوف إضافية بشكل آلي حتى تحصل على سلسلة رائعة من الأشكال الألماسية المتدرجة الألوان. ارسم تحديداً حول جميع الأشكال ثم اضغط CMD+C لتنسخها، والآن قم بالعودة إلى برنامج الفوتوشوب واضغط CMD+V لتلصقها هناك. اختر خَيَار Pixels ثم كبّر حجم النقش حتى يغطي كامل الخلفية الضبابية. ستبقى العناصر بتنسيق Vector حتى تضغط مفتاح Enter لذلك لا تقلق حول تغيير حجمها أو تقليصها أو تمديدها للحصول على تأثيرات رائعة (من المعلوم أن عناصر الرسم الموجه Vector تحافظ على جودتها ودقتها مهما تم تغيير حجمها أو تقليصها أو ...). اضغط CMD+I لعكس حالة النقش وتحويل اللون الأسود في العمل إلى أبيض، ثم بدّل خصائص الدمج إلى Color Dodge. هذه النوعية من خصائص الدمج تسمح للون الأبيض بالتفاعل مع الألوان الحيوية للخلفية. خفف قيمة التعبئة Fill لطبقة النقش للحد من تأثير Color Dodge لإنتاج غطاء نقشي رقيق. من السهل صناعة مثل هذا التأثير عبر الجمع بين تقنيات الفوتوشوب والإليستريتور معاً. إنّ إنشاء غطاء النقش بواسطة الفوتوشوب فقط سيستغرق وقتاً وسيَصعُب إنشاؤُه بدقة، ولكن كل الشكر لأدوات تعديل الأشكال في الإليستريتور إنها سهلة وتساعد على إنشاء نقوش متكررة بسرعة ليتم لصقها ببساطة داخل ملف العمل. إن الفوتوشوب يتألق فعلاً بقدرته على مزج الألوان وإنشاء تأثيرات حيوية باستخدام خصائص المزج، ما يعطي هذا الفن التجريدي ذلك الظهور الرائع المؤثر. ترجمة -وبتصرّف- للمقال: How To Create an Easy Abstract Blur Pattern Design لصاحبه Chris Spooner.

تلقّيت مؤخّرًا رسالة على بريدي الإلكتروني يسألني فيها المرسل عن طريقة لرسم الحبال والعقد والتي يشيع استخدامها في التصاميم البحريّة في برنامج أدوبي الستريتور، فلمعت في رأسي فكرة استخدام فرشاة خاصّة Custom Brush في Illustrator، وبعد قليل من اللعب في البرنامج توصّلت إلى تقنيّة محكمة يمكن استخدامها لتحويل أي مسار إلى حبل متشابك ومعقّد. اتبع الخطوات التالية في هذا الدرس لتصنع حبلًا طويلًا يحتوي على بعض العقد وذلك باستخدام الفرش في Illustrator. سنتعلّم معًا كيفية إنشاء نقش فرشاة Pattern Brush خاصّ، وكيفية التغلّب على المشاكل التي تمنع الحبل من الالتفاف حول نفسه. سنخطو بعد ذلك خطوة أكبر وذلك من خلال توظيف التقنية نفسها في تصميم لوحة تيبوغرافيّة جميلة. لنبدأ بصناعة النقش الأساسي الذي سيكوّن الحبل. افتح برنامج Adobe Illustrator وارسم قَطْعًا ناقصًا ellipse على لوحة العمل. فعّل الأدلة الذكية Smart Guides بالضغط على (CTRL+U, CMD+U) ثم اضغط مفتاح ALT واسحب لمضاعفة الشكل ثم اجعله محاذيًا تمامًا للشكل الأصليّ. استخدم مؤشر الأدلة الذكيّة لجذب زاوية المستطيل إلى الجزء العلويّ الأيسر من القطع الناقص الأول، ثم اجعل المستطيل يمتدّ لينجذب إلى المسار السفليّ الأيمن من القطع الناقص الثاني. استخدم أداة المقص Scissors Tool لقصّ مسار القطعين الناقصين في النقطة التي يتقاطع فيها المستطيل معهما. حدّد واحذف النقاط السفلية واليسرى للشكل الأول، والنقاط العلوية واليمنى للشكل الثاني، للحصول على خط منحنٍ. تأكّد من تحديد شطري الخط المنحني، ثم اضغط مفتاح ALT واسحب نسخة من الشكل واجعلها محاذية للشكل الأصليّ. كرّر الخطوة السابقة عدّة مرات وذلك بالضغط على CMD+D أو CTRL+D لتحصل على قطعة صغيرة من الحبل. استخدام أداة المقصّ لقص المسار الزائد في نهاية الشكل حيث يتقاطع مع المسار اللاحق. ارسم دائرة واجعل حجمها مساويًا للحبل، واجعلها كذلك محاذية لنقطة النهاية المفتوحة. تخلصّ من الأجزاء المتداخلة مع الحبل عن طريق قصّ المسار في موضعين باستخدام أداة المقصّ. كررّ العملية في الجهة الأخرى من الحبل. يمكن استخدام نصف الدائرة هذا مرة أخرى عن طريق تدويره بزاوية 180°. ارسم تحديدًا حول جميع المسارات وزِد قيمة وزن الحدّ الخارجي Stroke. قم بتوسيع الشكل Expand من خلال الذهاب إلى: Object > Expand والضغط على OK لتحويل الحد الخارجيّ إلى شكل صلب. اختر التوحيد Unite من لوحة Pathfinder لمزج جميع الأجزاء المفردة في شكل واحد. اختر أداة التلوين الحيّ Live Paint واضغط على الحبل لتفعيل الأداة، ثم اختر اللون الأبيض للتعبئة وطبّقه على جميع المساحات المغلقة. وسّع الشكل مرة أخرى لتحويل العناصر ذات التلوين الحيّ إلى عناصر قابلة للتحرير. اضغط ALT واسحب الشكل بوساطة أداة التحديد Selection Tool لتصنع نسختين أخريين من الشكل. ارسم مستطيلًا بدون لون للتعبئة أو للحدّ الخارجي وحاذه بين قطعتين من نقش الحبل على الشكل الأول. استخدم الزاوية كمرجع لنقاط البداية والنهاية. ارسم مستطيلًا مشابهًا للمستطيل السابق على الشكل الثاني وأحط به نهاية الحبل واجعله يمتد على نفس النقاط المرجعيّة. ارسم مستطيلًا ثالثًا حول النهاية الأخرى للحبل على الشكل الثالث، وحاذه على نفس النقاط المرجعيّة على قطع الحبل بطريقة يصبح النقش فيها متطابقًا بالكامل. اختر كل قطعة من الحبل بالإضافة إلى المستطيل المحيط بتلك القطعة، ثم اختر خيار القصّ Crop من لوحة Pathfinder لقص الشكل بحجم المستطيل. اسحب القطع الثلاثة المتكونة إلى لوحة Swatches. افتح لوحة الفُرش Brushes واضغط على أيقونة (جديد New) وأنشئ فرشاة جديدة. اختر فرشاة النقش Pattern Brush. سنحتاج الآن إلى تغيير إعدادات فرشاة النقش باستخدام القطع الثلاثة التي صنعناها مسبقًا، وذلك من خلال وضعها في المربعات الصحيحة ضمن إعدادت الفرشاة. اختر القطعة الوسطى في القائمة المنسدلة الثانية، واختر القطع الطرفية للقائمتين المنسدلتين الأخريين. ارسم مسارًا باستخدام أداة القلم Pen Tool ثم طبّق الفرشاة الجديدة عليه لاختبارها. يمكن استخدام هذه الفرشاة بتطبيقها على أي مسار، ويمكن استخدام أداة قلم الرصاص Pencil Tool لرسم عقدة ثم تطبيق هذه الفرشاة عليها وتحويلها إلى حبل. ولكن انتظر هناك مشكلةلتمثيل العقدة بصورة صحيحة يجب على الحبل أن يشق طريقه من الداخل إلى الخارج أو بالعكس، ولكن المسار في Illustrator يتراكب حول نفسه فقط. من المؤسف أن لا يتيح Illustrator إمكانية تغيير تراتبية النقاط المفردة فوق بعضها البعض، الطريقة القديمة تقتضي أن يتم قصّ المسار إلى قطع منفصلة يمكن وضعها أعلى أو أسفل القطع الأخرى. لسوء الحظّ هذه الطريقة لن تنفعنا أبدًا، لأنّ القطع النهائية ستتولّد بشكل تلقائي عند قصّ المسار، وهذا سيقطع انسيابية الحبل. نعود إلى لوحة العملأنشئ فرشاة نقش جديدة، ولكن هذه المرة اختر القطعة الوسطى فقط. طبّق هذه الفرشاة على مسار العقدة. سيسمح لنا قصّ المسار باستخدام أداة المقصّ أن نضع المسار أعلى أو أسفل المسارات الأخرى مع المحافظة على انسيابية الحبل الكاملة. قُصّ المسار قبل وبعد كل مساحة يتراكب الحبل فيها، ثم استخدم الاختصارات CMD+} أو CTRL+} أو CMD+{ أو CTRL+{ لتغيير تراتبية القطع المقصوصة فوق بعضها البعض. قمنا بحلّ مشكلة التراكب، ولكن ظهرت مشكلة أخرى وهي عدم وجود أي قطعة نهائية للحبل، سنعمل على حلّ هذه المشكلة باستخدام فرشاة نقش أخرى. طبّق القطعة الوسطى كالمعتاد، ولكن هذه المرّة اختر القطعة التي ترتبط بمربع البداية. كرّر هذه الخطوة على فرشاة أخرى، ولكن استخدم القطعة الأخرى لمربع النهاية. يمكن الآن تطبيق الفرشاتين الجديدتين على كل من قطعتي البداية والنهاية لمسار الحبل، وبما أن لكل من هاتين الفرشاتين مربعًا واحدًا في أحد الطرفين، فإن النقش سيتطابق في جميع الأحوال. باستخدام مزيج من الأنواع الثلاثة من الفرشاة يمكن إنشاء أيّ نوع من المسارات مهما كان معقّدًا. لنخط خطوة أبعدإحدى الاستخدامات الذكية لفرشاة الحبل الجديدة هي إنشاء لوحة تيبوغرافية جميلة. استخدم أداة القلم الرصاص لرسم بعض الكلمات على لوح العمل. تذكر، يمكنك استخدام النقر المزدوج لتغيير إعدادات الأداة ولتحرير المسارات المحدّدة، لتتمكن من إعادة الرسم وتصحيح الأخطاء. استخدم أداة المقصّ لقصّ المسار وتعديل تراتبية المسارات فوق بعضها البعض لجعل الحبل يلتفّ فوق أو تحت القطع الأخرى. انتقل إلى برنامج Photoshop وألصق اللوحة التيبوغرافية على خلفيّة جميلة لإضافة بعض اللمسات النهائية إلى التصميم. أضف لونًا إلى الحبل بواسطة Color Overlay مع نمط مزج Multiply، ثم اختر نمط المزج Screen للطبقة لتصبح المناطق البيضاء مرئية فقط. أضف قناع طبقة Layer Mask إلى طبقة الكتابة واستخدم فرش فوتوشوب لمسح بعض الأجزاء من النص ولتضفي على الحبل مظهرًا يوحي بالقِدَم. مع أنّ فكرة الدرس تتمحور حول الحبال والعقد، إلا أنّه يمكن استخدام هذه التقنية لتصميم الأسلاك والأفاعي وحتى زينة الاحتفالات. ترجمة -وبتصرّف- للمقال How To Create Ropes & Knots with Illustrator Brushes لصاحبه Chris Spooner.