The latest news section features a prominent image, category label, functional areas, an article title, content, and a “Read More” button. A 40-pixel gap below the divider line showcases “Latest News” in Helvetica Roman font, size 18pt, and color #141e1e. Beneath this, a 275px x 120px sample image is displayed.
A rectangular shape, colored #fea702 and measuring 100px x 15px, is created, with “BUSINESS” inscribed in the center using Helvetica Roman font, 8pt, and color #ffffff. Applying inner shadow (#ffffff) to the text layer, duplicate it, changing the original color to #c88300. Shift the copied text layer up by one pixel. Select the rectangle and both text layers, then rotate them 45° using the Ctrl+T transform command. Apply a layer mask to the rectangle to achieve the desired effect.
In the preview, add textual content above and below the images with specified font names, styles, sizes, and colors as marked in red. Duplicate the “Read More” button and position it 15 pixels below the content.
Group these layers into a folder named ‘post.’ Replicate the group, shifting it 30 pixels to the right. Alter the functional area’s color to #8170e8 and modify the text accordingly.
For item categorization, use similar font parameters as in the recent news section. Insert a 60px x 60px sample within a designated space, accompanied by a category title, respecting the red-font indicated distances. Add the corresponding text content, mAIntaining the same color and font as the latest news.
Group these layers, make a copy, and position it as shown in the reference image. Repeat this process for two more groups, adjusting their placements accordingly.
Lastly, bundle related elements into themed groups, duplicating and positioning them as illustrated in the diagram.
相关文章
