هذا الدرس بسيط للغاية، ولكن النتيجة ستكون ممتعة للعين - زوايا مستديرة أنيقة لصورك. ومن السهل جدًا تحقيق ذلك إذا كان لديك أي إصدار من Adobe Photoshop في ترسانتك وصورة تحتاج إلى المعالجة.

يتم تقريب زوايا الصورة على عدة مراحل:

1. افتح الصورة في برنامج فوتوشوب. للقيام بذلك، انقر فوق "ملف" و"فتح" أو اختصار لوحة المفاتيح Ctrl + O.


2. قم بإنشاء طبقة جديدة بالنقر فوق طبقات، ثم طبقة جديدة.


3. يوجد على الجانب الأيسر من البرنامج شريط أدوات عمودي. ستجد فيه أداة المستطيل. نحن لسنا بحاجة إليها في الوقت الحالي، لذا انقر بزر الماوس الأيمن عليها وحدد أداة "Rounded Rectangle".


4. ستظهر لوحة الإعدادات الخاصة بهذه الأداة في أعلى البرنامج. هنا يمكنك ضبط نصف قطر الزاوية المطلوب، أي. يمكنك زيادة أو تقليل التقريب. القيمة الافتراضية هي 10 بكسل. يرجى ملاحظة أنه لاستخدام الأداة، يجب عليك تفعيل خيار "الخطوط العريضة"، الموجود أيضًا في لوحة الإعدادات.


5. حدد الصورة بأكملها، بدءًا من الزاوية اليسرى العليا وانتهاءً بالزاوية اليمنى السفلية.


6. انقر بزر الماوس الأيمن على الصورة وحدد خيار “إنشاء التحديد”. سيظهر خط اختيار منقط.


7. انتقل الآن إلى شريط الأدوات الأفقي وافتح علامة التبويب "تحديد" ثم حدد "عكس".




8. الآن كل شيء على العكس من ذلك - لا يتم تحديد الصورة نفسها، ولكن الزوايا غير الضرورية. لإزالتها، ما عليك سوى الضغط على مجموعة المفاتيح Ctrl+Delete على لوحة المفاتيح.


9. الآن قم بإلغاء تحديده بالضغط على Ctrl + D على لوحة المفاتيح. استمتع بالنتيجة!


لا تنس حفظ الصورة النهائية على جهاز الكمبيوتر الخاص بك.

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

قبل أن تقوم بتقريب الحواف في Photoshop، يجب أن تفهم سبب ضرورة ذلك. الأسباب الرئيسية هي:

الحصول على صورة أو تفاصيلها بالشكل المطلوب، دون الحاجة إلى مزيد من التعديل؛

الحصول على تصميم أصلي وجميل للتصوير الفوتوغرافي.

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

بعد إعداد عينة عمل بهذه الطريقة، يمكنك المتابعة مباشرة إلى الإجراء الخاص بكيفية تقريب الحواف في Photoshop. للقيام بذلك، تحتاج إلى العثور على إحدى الأدوات الموجودة على اللوحة اليسرى، والتي تسمى "المستطيل" (يسمى بالمفتاح "U")، واختر من قائمة أصنافها - "مع حواف مدورة". ويمكن للمستخدم ضبط زاوية الحواف الدائرية باستخدام خيار "نصف القطر" الذي سيصبح متاحًا على اللوحة العلوية.

ثم يجب عليك تحديد الجزء المطلوب من الصورة. هنا يجب الانتباه إلى ما إذا كان المستطيل الناتج يتداخل مع الصورة الأصلية. إذا كان الأمر كذلك، في لوحة الطبقات الموجودة على اليمين، يجب عليك خفض الطبقة المشكلة حديثًا مع التحديد إلى الموضع الذي سيكون أقل من عينة العمل. يمكن نقل التحديد - في هذه الحالة "مستطيل مستدير الزوايا" - باستخدام الأدوات المعتادة للبرنامج.

لفهم كيفية تقريب الحواف في Photoshop، تحتاج إلى النقر بزر الماوس الأيمن على الطبقة ذات المستطيل الناتج وتحديد "إنشاء التحديد". ثم، على اللوحة الرئيسية في الأعلى، انقر فوق "تحديد"، "عكس". ثم يبقى الانتقال إلى الطبقة التي تحتوي على الصورة الرئيسية وتطبيق أمر "الحذف"، والذي يتم عن طريق الضغط على الزر المقابل على لوحة المفاتيح أو من خلال مفتاح الاختصار "D". لا يمكن حفظ النتيجة إلا من خلال قائمة "ملف" و"حفظ" لتنسيق PSD "الأصلي". أو يمكنك استخدام "حفظ باسم..." للحصول على النتيجة بأي تنسيق شائع آخر.

هذه هي الطريقة الأسهل والأسرع لتدوير الحواف في Photoshop. الآن الأمر متروك لخيالك لتقرر أين يمكنك تطبيق معرفتك الجديدة.

أنا خارج الجدول الزمني مرة أخرى! إيه... حسنًا، سأقوم بنشر الدروس متأخرًا بضع ساعات، وآمل ألا يكون هذا أمرًا بالغ الأهمية. اليوم في درسنا سنتحدث عنه كيفية تقريب الحواف في الفوتوشوب. سيكون كل شيء على ما يرام، ولن يختلف الدرس عن تلك التي رأيتها في المواقع الأخرى، لكنني بنفسي بحثت من قبل وأعرف ما هي الطرق التي يقدمونها. لا تستمع إليهم! مملة جدًا، وطويلة جدًا. أقدم لكم طريقة كيف زوايا مستديرة في الفوتوشوبحرفيا في بضع نقرات!

دعونا نلتقط صورة مخزنة، بالمناسبة، أنا ألتقطها بهاتف جيد. ليس إعلانًا: د
نستخدم التحديد، كما في لقطة الشاشة الخاصة بي:

انتقل إلى علامة التبويب ( حدد > تعديل > سلس). انتباه! قد يكون هذا صعبا بالنسبة للبعض. في بعض إصدارات Photoshop لا يوجد "سلس"، أي "تحسين". لذا، لا تنزعج إذا لم تجد Smooth. نفس الشيء.

لقد اخترنا هنا نصف قطر الانحناء.

الآن، كما ترون، منطقة التحديد الخاصة بك تحتوي بالفعل على زوايا مستديرة.

كل ما تبقى هو قطع الصورة.

و الأن . يتم ضبط الحجم هناك تلقائيًا. والآن نقوم ببساطة بإدراج الصورة في ملف جديد.

آخر تحديث:18/01/16

كيفية تقريب الزوايا في الصورة في برنامج فوتوشوب

عند تصميم المدونات، قمت بشكل متكرر بعمل زوايا مستديرة على الصور، ولكن ما لم يتم القيام به كثيرًا وليس تلقائيًا بما فيه الكفاية يتم نسيانه بسرعة. واشتكت مرة أخرى من الحاجة إلى وصف العمل المنجز على الفور. لذلك، الآن، دون تأخير تقريبًا، سأصف تسلسل الإجراءات. صحيح أنه بسبب المرض لم تعد "المسارات الساخنة" ساخنة.

ولمن يحب مشاهدة كل شيء، فيديو قصير عن "كيفية تقريب الزوايا في الفوتوشوب":

في البداية، أنت بحاجة إلى برنامج فوتوشوب. أين يمكن الحصول عليه، هناك خياران:

• شراء على الموقع الرسمي
• تجد على السيول

الخيار الذي تختاره متروك لك.

لذلك، دعونا نبدأ برنامج فوتوشوب. افتح الصورة التي يجب تقريب زواياها في Photoshop (ملف → فتح). إذا كان حجم الصورة أكبر مما تحتاج، فيمكنك تغيير الحجم (الصورة → حجم الصورة).

على اليمين، في صورة المعاينة، يوجد قفل صغير يمنع تحرير الصورة الأصلية (طبقة الخلفية). لإنشاء طبقة جديدة والعمل معها، انقر نقرًا مزدوجًا فوقها بزر الفأرة الأيسر، ولا تغير أي شيء في النافذة التي تظهر، انقر فوق "نعم".

فإن لم يكن هناك قفل فأحد أمرين:

أو في إصدار Photoshop الخاص بك، يمكن تحرير طبقة الخلفية (وهو أمر مشكوك فيه، ولكن فجأة)

أو يمكن القيام بما سبق باستخدام عملية أخرى: من الأعلى، في شريط القائمة، حدد "الطبقات"، في القائمة الفرعية التي تفتح، حدد "جديد" واتبع السهم - "من الخلفية"، وفي نفس النافذة الذي يفتح، انقر فوق "نعم".

حدد "مستطيل بزوايا مستديرة" في الأدوات.

حدد الوضع الموجود أعلى لوحة الإعدادات: "الخطوط العريضة". اضبط نصف القطر على الزوايا الدائرية في Photoshop. لقد اخترت 40 بكسل، يمكنك اختيار الذي يناسب صورتك.

نرسم مستطيلًا بالحجم المطلوب في الصورة: ضع المؤشر (يأخذ شكل تقاطع) عند النقطة المطلوبة في الجزء العلوي الأيسر، ودون تحرير زر الماوس، انتقل إلى الزاوية المقابلة للنقطة المطلوبة. تحتوي صورتنا على مستطيل شفاف بزوايا مستديرة.

انقر بزر الماوس الأيمن على المستطيل. في قائمة السياق، حدد "إنشاء منطقة محددة"، واضبط نصف قطر التدرج على 1 بكسل وانقر فوق الزر "نعم".

باستخدام القائمة حدد → عكس، حدد كل شيء خارج المستطيل المستدير واحذف التحديد باستخدام مفتاح الحذف.

إذا لم تقم بتراكب مستطيل فوق الصورة بأكملها، فيمكن إزالة الخلفية الشفافة الزائدة باستخدام تسلسل أوامر الصورة → التشذيب → بناءً على وحدات البكسل الشفافة → نعم.

لقد تلقينا صورة ذات زوايا مستديرة. نقوم بحفظه للويب: ملف → حفظ للويب والأجهزة. حدد الإعداد المسبق: PNG-24، والشفافية، ثم انقر فوق حفظ. بتنسيق PNG-24، يتم حفظ الصورة بخلفية شفافة بحيث يمكن تضمينها في أي تصميم موقع ويب.

يمكن فعل الشيء نفسه باستخدام أداة Ellipse، ثم ستحصل على صورة مستديرة أو في إطار بيضاوي الشكل.

لذا، تعلمنا اليوم كيفية تقريب زوايا أي صورة في برنامج الفوتوشوب.

تدعم جميع المتصفحات الحديثة معايير ترميز النص التشعبي HTML5 وأنماط تصميم CCS3. وإذا كان موقعك (القالب) يدعم المعايير الحديثة، فيمكنك إجراء تغييرات على التصميم، مثل تقريب الزوايا والظلال والتعبئة المتدرجة، دون اللجوء إلى محرري الرسوم.

يستخدم مشرفو المواقع في كل مكان زوايا مستديرة على الكتل والإطارات على مواقع الويب. سأخبرك في هذه المقالة بكيفية تقريب زوايا الصور والصور الفوتوغرافية الموجودة على موقع ويب دون استخدام برامج الطرف الثالث، فقط باستخدام CSS.

لكي يتم عرض الأمثلة الواردة في المقالة بشكل صحيح على شاشتك، يجب عليك استخدام أحدث إصدارات المتصفحات، FireFox وChrome وتلك المبنية عليها: Yandex.Browser وAmigo وما إلى ذلك.

تقريب زوايا كتل DIV

وفقًا لمعيار CSS3، فإن الكتلة DIVكانت لها زوايا مستديرة، فهي بحاجة إلى التصميم نصف قطر الحدود، على سبيل المثال مثل هذا:

نصف قطر الحدود: 10 بكسل؛

من أجل الوضوح، دعونا نرسم كتلتين بزوايا مستقيمة ومستديرة:

كتلة مع الزوايا الصحيحة

كتلة ذات زوايا مستديرة

تقريب زوايا الصور

قياسا على المثال أعلاه، يمكنك تقريب زوايا الصور الموجودة على الموقع، على سبيل المثال الصور الفوتوغرافية. من أجل الوضوح، دعونا نلتف حول زوايا الصورة من الصفحة

هذه هي الصورة بدون معالجة CSS

والآن مع الزوايا الدائرية:

نصف قطر الحدود: 10 بكسل؛

ولجعلها "جميلة" حقًا، دعونا نضيف بعض الحواف من البداية...

نصف قطر الحدود: 10 بكسل؛ الحدود: 5px #ccc الصلبة؛

ثم الظلال:

نصف قطر الحدود: 10 بكسل؛ الحدود: 5px #ccc الصلبة؛ ظل الصندوق: 0 0 10 بكسل #444;

يبدو الخيار أدناه (زوايا مستديرة مع ظل بدون حدود) مشابهًا جدًا للوحة الماوس:

نصف قطر الحدود: 10 بكسل؛ ظل الصندوق: 0 0 10 بكسل #444;

وأخيرا، استهزاء كامل بالصورة

نصف قطر الحدود: 50%؛ الحدود: 5px #cfc الصلبة؛ ظل الصندوق: 0 0 10 بكسل #444;

إذا قمت بفتح الصورة في نافذة جديدة، فسترى أنها (الصورة) لم تتغير، وجميع الزوايا والظلال وما إلى ذلك هي مجرد نتيجة المعالجة CSSالأنماط بواسطة متصفحك.

استطراد غنائي صغير

أسلوب حدوديزيد حجم الصورة بمقدار الحدود. إذا تم تحديد قيمة الحدود: 5 بكسل، ستصبح الصورة النهائية أوسع وأطول بمقدار 10 بكسل. ضع ذلك في الاعتبار، في بعض الحالات قد لا يعمل تخطيط الموقع.

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

كيفية تقريب زوايا الصور في ووردبريس

في جميع الأمثلة المذكورة أعلاه، قمت بكتابة الأنماط مباشرةً في علامات كود html. على سبيل المثال، يبدو الأخير كما يلي:

يعد هذا أمرًا جيدًا عندما تحتاج إلى إعادة ترتيب صورة أو صورة فوتوغرافية واحدة. ماذا لو كنت تريد تغيير كل شيء؟ حسنًا، لن تتمكن من التسلق إلى جميع أنحاء موقعك لتعديل عرض كل موقع. في معظم الحالات، علامة WordPress آي إم جييحدد عدة فئات النمط. واحد حسب الاسم الفريد لملف الصورة، والآخر حسب الحجم، والآخر حسب المحاذاة. يمكنك استكمال أحدها بالمعلمات المذكورة أعلاه.

على سبيل المثال، بالنسبة لجميع الصور التي لم يتم تحديد المحاذاة لها، في الملف style.cssبالنسبة لموضوع WordPress الخاص بك، أدخل ما يلي:

محاذاة (نصف قطر الحدود: 10 بكسل؛ الحد: 5 بكسل #cfc صلب؛ ظل الصندوق: 0 0 10 بكسل #444;)

أو الطريقة الأكثر صرامة لجميع الصور الموجودة على الموقع. دعونا نعيد تعريف النمط لجميع العلامات آي إم جي:

Img ( نصف قطر الحدود: 10 بكسل؛ الحدود: 5 بكسل #cfc صلب؛ ظل الصندوق: 0 0 10 بكسل #444;)

الخيار الأخير مناسب ليس فقط لـ WordPress، ولكن لأي نظام إدارة محتوى (CMS). وحتى بالنسبة للبسيطة لغة البرمجةالصفحات في حالة وضع العلامة عند عرض الصور آي إم جيلم يتم تعيين فئات النمط. لكن كن حذرا. إذا قمت بتجاوز خيارات عرض العلامة آي إم جيسوف تقوم بتغيير مظهر جميع الصور الموجودة على الموقع!

بدلا من الاستنتاج

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