Visualized editing method and device for generating advertisement content, electronic equipment and product
By using a visual editing method to generate ad content, loading ad templates and dynamically rendering layer elements, the problem of high technical barriers, low efficiency, and difficulty in ensuring standardization in ad content production is solved, achieving efficient and easy-to-use ad content production.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- CHENGDU SHANGSHANG YUNHUI INFORMATION TECH CO LTD
- Filing Date
- 2026-04-13
- Publication Date
- 2026-05-29
Smart Images
Figure CN122115031A_ABST
Abstract
Description
Technical Field
[0001] This invention belongs to the field of advertising production technology, specifically relating to a method, apparatus, electronic device, and product for generating advertising content through visual editing. Background Technology
[0002] In the field of digital marketing, rapid creation and iteration of advertising content is key to improving operational efficiency. However, existing methods of creating advertising content have the following drawbacks: High technical threshold: The production of advertising content requires professional user interface (UI) design skills. If suppliers or operations personnel do not have professional UI design skills (such as being proficient in using software such as Photoshop), they cannot independently complete the production of advertising images, and they rely heavily on the design team, resulting in a lengthy process.
[0003] Inefficiency: Even professional designers have to do a lot of repetitive cutting, layout and text adjustment work when faced with different sizes and styles of advertising space, which is extremely inefficient and difficult to scale up production.
[0004] Standardization is difficult to guarantee: Because different people design advertising images freely, it is difficult to unify brand logos, fonts, colors, layouts, etc., which affects the consistency of brand image.
[0005] High modification costs: When the copy or product image of an already launched advertisement needs to be modified, the design process must be restarted, and business personnel cannot quickly complete the modification online.
[0006] Therefore, how to provide an effective solution to address the problems of high technical barriers, low efficiency, difficulty in ensuring standardization, and high modification costs in existing advertising content production has become an urgent problem to be solved in the existing technology. Summary of the Invention
[0007] The purpose of this invention is to provide a method, apparatus, electronic device, and product for generating advertising content through visual editing, in order to solve the aforementioned problems existing in the prior art.
[0008] To achieve the above objectives, the present invention adopts the following technical solution: In a first aspect, the present invention provides a method for generating advertising content through visual editing, comprising: In response to the user's selection of an ad template from the ad template library, load the selected ad template; Dynamically render all layer elements of the selected advertisement template in the browser; In response to a user's editing operation on any layer element of the selected advertisement template, the user adjusts the layer element to generate a new advertisement. The editing operation includes layer element layout editing operation, layer element attribute editing operation, and / or layer element switching operation. In response to the user's action to publish the newly generated advertisement, the newly generated advertisement is converted into an image file for publication, and the design data of the newly generated advertisement is saved to the server; The design data for the newly generated advertisement includes advertisement configuration information and advertisement creative files, wherein the advertisement configuration information is structured JSON data.
[0009] In one possible design, in response to a user's editing operation on any layer element of the selected advertising template, adjusting the any layer element includes: In response to a user's drag operation on any layer element of the selected advertising template, the position of the selected layer element is adjusted. In response to a user's scaling operation on any layer element of the selected ad template, adjust the size of the selected layer element; and / or In response to a user's rotation operation on any layer element of the selected advertising template, the angle of that layer element is adjusted.
[0010] In one possible design, after adjusting the position of any of the layer elements and / or adjusting the size of any of the layer elements, the method further includes: Calculate the distance between the center of any layer element and the center of the canvas, and the distance between the edge of any layer element and the edge of its adjacent layer element; If the distance between the center of any layer element and the center of the canvas is less than a first preset distance, then the center of any layer element is aligned with the center of the canvas. If the distance between the edge of any layer element and the edge of its adjacent layer element is less than a second preset distance, then the edge of any layer element is aligned with the edge of its adjacent layer element. Wherein, the first preset distance may be equal to or unequal to the second preset distance.
[0011] In one possible design, in response to a user's editing operation on any layer element of the selected advertising template, adjusting the any layer element includes: In response to a user's editing operation on the layer element attributes of any layer element of the selected advertising template, a layer element attribute editing panel is loaded, and the layer element attribute editing panel displays the layer element attributes of the selected layer element. In response to a user's modification operation on the layer element attributes in the layer element attribute editing panel, modify the layer element attributes of any layer element; The layer element properties include the transparency of the image element, the font type of the text element, the color of the text element, and / or the font size of the text element.
[0012] In one possible design, in response to a user's editing operation on any layer element of the selected advertising template, adjusting the any layer element includes: In response to a user's layer element switching operation on any layer element of the selected advertising template, the selected advertising template's layer element is replaced with a newly uploaded layer element, or the selected advertising template's layer element is replaced with a layer element selected from the product library.
[0013] In one possible design, the ad configuration information includes the ad's canvas attributes, layer tree, and element attributes. The canvas attributes include the canvas's width, height, and background color. The layer tree includes all layers of the ad. The element attributes include the type, content, spatial attributes, style attributes, and business attributes of each layer.
[0014] In a possible design, the layer tree includes a background layer, a product layer, a text layer, and a decoration layer. Business attributes include whether it is a product image and whether it is editable.
[0015] Secondly, the present invention provides a visually editable advertising content generation device, comprising: The loading unit is used to load the selected advertising template in response to the user's selection operation of the advertising template library; A rendering unit is used to dynamically render all layer elements of the selected advertisement template in the browser; The adjustment unit is used to respond to the user's editing operation on any layer element of the selected advertisement template, adjust the any layer element to obtain a newly generated advertisement, and the editing operation includes layer element layout editing operation, layer element attribute editing operation and / or layer element switching operation; The publishing and saving unit is used to respond to the user's publishing operation for the newly generated advertisement by converting the newly generated advertisement into an image file for publishing and saving the design data of the newly generated advertisement to the server. The design data for the newly generated advertisement includes advertisement configuration information and advertisement creative files, wherein the advertisement configuration information is structured JSON data.
[0016] Thirdly, the present invention provides an electronic device comprising a memory, a processor, and a transceiver connected in sequence and communication, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the visual editing advertising content generation method as described in the first aspect or any possible design of the first aspect.
[0017] Fourthly, the present invention provides a computer-readable storage medium storing instructions that, when executed on a computer, perform the visual editing advertising content generation method described in the first aspect or any possible design of the first aspect.
[0018] Fifthly, the present invention provides a computer program product containing instructions that, when executed on a computer, cause the computer to perform a visually editable advertising content generation method as described in the first aspect or any possible design of the first aspect.
[0019] Beneficial effects: This invention loads a selected ad template in response to a user's selection of an ad template from a template library; dynamically renders all layer elements of the selected ad template in a browser; adjusts any layer element in response to a user's editing operation, resulting in a newly generated ad, including layer element layout editing, layer element attribute editing, and / or layer element switching; and converts the newly generated ad into an image file for publication in response to a user's publishing operation, while saving the design data of the newly generated ad to a server. The design data of the newly generated ad includes ad configuration information and ad material files, with the ad configuration information being structured JSON data. Thus, through visual editing and preset templates, even business personnel with no design background can create professional-level ad images, lowering the barrier to ad design. Furthermore, ad creation can be completed during the design process by editing the layer element layout, layer element attributes, and / or switching layers of the selected ad template, reducing the traditional design process of several hours to just a few minutes, significantly improving ad production efficiency. Secondly, the pre-created ad templates in the template library ensure the standardization of elements such as color, font, and layout in the ads, guaranteeing the professionalism of the ad content and improving marketing effectiveness. Furthermore, by saving the ad configuration information and design data, including ad creative files, to the server, subsequent reuse and modification are facilitated, ultimately forming an ad content production solution that simultaneously meets the three major requirements of efficiency, quality, and ease of use. Attached Figure Description
[0020] Figure 1A flowchart of the method for generating advertising content through visual editing provided in this application embodiment; Figure 2 A block diagram of an advertising content generation device for visual editing provided in an embodiment of this application; Figure 3 This is a block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation
[0021] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in conjunction with the accompanying drawings and descriptions of the embodiments or the prior art. Obviously, the following description of the structure of the accompanying drawings is only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. It should be noted that the description of these embodiments is for the purpose of helping to understand the present invention, but does not constitute a limitation of the present invention.
[0022] It should be understood that although the terms first, second, etc., may be used herein to describe various units, these units should not be limited by these terms. These terms are only used to distinguish one unit from another. For example, a first unit may be referred to as a second unit, and similarly, a second unit may be referred to as a first unit, without departing from the scope of the exemplary embodiments of the invention.
[0023] It should be understood that the term "and / or" that may appear in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, B exists alone, and A and B exist simultaneously. The term " / and" that may appear in this document describes another relationship between related objects, indicating that two relationships can exist. For example, A / and B can mean: A exists alone, and A and B exist alone. In addition, the character " / " that may appear in this document generally indicates that the related objects before and after it are in an "or" relationship.
[0024] It should be understood that specific details are provided in the following description to facilitate a complete understanding of the exemplary embodiments. However, those skilled in the art will understand that the exemplary embodiments can be implemented without these specific details. For example, the system may be shown in block diagrams to avoid obscuring the example with unnecessary details. In other instances, well-known processes, structures, and techniques may be shown without unnecessary details to avoid obscuring the exemplary embodiments.
[0025] To facilitate the production of advertisements, this application provides a method, apparatus, electronic device, and product for generating advertisement content through visual editing. This method, apparatus, electronic device, and product can solve the problems of high technical barriers, low efficiency, difficulty in ensuring standardization, and high modification costs in existing advertisement content production.
[0026] The visual editing method for generating advertising content provided in this application can be applied to user terminals used for advertising design. It is understood that the described execution entity does not constitute a limitation on the embodiments of this application.
[0027] The following will provide a detailed description of the visual editing method for generating advertising content provided in the embodiments of this application.
[0028] like Figure 1 The diagram shown is a flowchart of a visual editing method for generating advertising content provided in the first aspect of an embodiment of this application. This visual editing method for generating advertising content may include, but is not limited to, the following steps S101-S104.
[0029] Step S101. In response to the user's selection of an ad template in the ad template library, load the selected ad template.
[0030] In one or more embodiments, a series of advertising templates for different ad positions (such as PC banners and mobile news feeds) can be pre-set in the advertising template library. Each advertising template can be described by a structured JSON object, which fully defines the canvas properties, layer tree, and element properties of the advertising template.
[0031] The canvas refers to the visual area used to display and edit advertising templates. Canvas attributes may include, but are not limited to, canvas width, height, and background color. The layer tree is an ordered array of layers (elements), each layer representing an advertising element, such as a background layer, product layer, text layer, and decoration layer. Element attributes include type, content (SRC / text), spatial attributes (x, y, width, height, transform, zlndex), style attributes (opacity, color, fontSiez), and business attributes (marked whether it is a product image (isProductImage), and whether it is editable).
[0032] When designing an advertisement, users can select an advertisement template from the advertisement template library. In response to the user's selection of an advertisement template from the advertisement template library, the selected advertisement template can be loaded.
[0033] Step S102. Dynamically render all layer elements of the selected advertisement template in the browser.
[0034] Specifically, all layer elements of the selected ad template can be dynamically rendered precisely in the browser canvas to restore the design template in real time.
[0035] Step S103. In response to the user's editing operation on any layer element of the selected advertisement template, adjust any layer element to obtain a newly generated advertisement.
[0036] In one or more embodiments, a user can edit any layer element of the selected advertising template through a multi-mode interactive controller. The editing operations include layer element layout editing, layer element attribute editing, and / or layer element switching.
[0037] For editing layer element layouts, you can integrate vue3-moveable (a draggable, resizable, and rotatable component library based on Vue3 that allows users to easily manipulate elements on the page with a mouse or touchscreen to achieve various interactive effects) to provide a graphical interface for dragging, resizable, and rotating selected layer elements.
[0038] In one or more embodiments, when the editing operation is a layer element layout editing operation, in response to a user's editing operation on any layer element of the selected advertising template, adjusting the any layer element includes: In response to a user's drag operation on any layer element of the selected advertising template, the position of the selected layer element is adjusted. In response to a user's scaling operation on any layer element of the selected ad template, adjust the size of the selected layer element; and / or In response to a user's rotation operation on any layer element of the selected advertising template, the angle of that layer element is adjusted.
[0039] In one or more embodiments, a guidelines system can be introduced to automatically display and snap to alignment when an element is close to the center of the canvas or the edge of another element, ensuring the rigor of the design. Specifically, after adjusting the position and / or size of any layer element, the distance between the center of any layer element and the center of the canvas, and the distance between the edge of any layer element and the edge of its adjacent layer element can be calculated. If the distance between the center of any layer element and the center of the canvas is less than a first preset distance, the center of any layer element is aligned with the center of the canvas. If the distance between the edge of any layer element and the edge of its adjacent layer element is less than a second preset distance, the edge of any layer element is aligned with the edge of its adjacent layer element. The first preset distance and the second preset distance may be equal or unequal.
[0040] In one or more embodiments, the position of the selected layer element can be finely adjusted at the pixel level using the arrow keys, improving control precision. The entire canvas can be zoomed and panned using the mouse wheel, facilitating editing of advertisements of different sizes. Product image binding functionality is supported, providing the ability to select images from a product library; once selected, the selected image automatically replaces the layer element marked as isProductImage: true (i.e., marked as a product image) in the advertisement template.
[0041] In one or more embodiments, when the editing operation is a layer element attribute editing operation, in response to a user's editing operation on any layer element of the selected advertising template, adjusting the any layer element includes: In response to a user's editing operation on the layer element attributes of any layer element of the selected advertising template, a layer element attribute editing panel is loaded, and the layer element attribute editing panel displays the layer element attributes of the selected layer element. In response to a user's modification operation on the layer element attributes in the layer element attribute editing panel, modify the layer element attributes of any layer element; The layer element attributes include the transparency of image elements, the font type of text elements, the color of text elements, and / or the font size of text elements. The layer element attribute editing panel is generated to the right of any layer element after the user initiates an editing operation on its attributes.
[0042] In one or more embodiments, when the editing operation is a layer element switching operation, in response to the user's editing operation on any layer element of the selected advertising template, adjusting the any layer element includes: In response to a user's layer element switching operation on any layer element of the selected advertising template, the selected advertising template's layer element is replaced with a newly uploaded layer element, or the selected advertising template's layer element is replaced with a layer element selected from the product library.
[0043] In one or more embodiments, an automatic background removal application programming interface (API) can be integrated. After a user uploads an image, a backend service can be invoked with one click to remove the background, and the processed image can be directly applied to the current layer element. A preset library of advertising slogans can also be provided, allowing users to quickly select and apply them to text elements, ensuring the professionalism and attractiveness of the advertising copy.
[0044] Step S104. In response to the user's publishing operation of the newly generated advertisement, convert the newly generated advertisement into an image file for publishing, and save the design data of the newly generated advertisement to the server.
[0045] The image file format can be, but is not limited to, PNG, JPG, etc. The design data for the newly generated advertisement can, but is not limited to, include advertisement configuration information and advertisement material files. The advertisement configuration information is structured JSON data. The advertisement configuration information can, but is not limited to, include the advertisement's canvas attributes, layer tree, and element attributes. The canvas attributes can, but are not limited to, include the canvas's width, height, and background color. The layer tree includes all layers of the advertisement. The element attributes can, but are not limited to, include each layer's type, content, spatial attributes, style attributes, and business attributes. The layer tree can, but is not limited to, include a background layer, a product layer, a text layer, and a decoration layer. Business attributes include whether it is a product image and whether it is editable.
[0046] In summary, the visual editing method for generating advertising content provided by this invention loads the selected advertising template in response to a user's selection of an advertising template from the template library; dynamically renders all layer elements of the selected advertising template in the browser; adjusts any layer element in response to a user's editing operation on any layer element of the selected advertising template to obtain a newly generated advertisement, wherein the editing operation includes layer element layout editing, layer element attribute editing, and / or layer element switching; and converts the newly generated advertisement into an image file for publication in response to a user's publishing operation on the newly generated advertisement, and saves the design data of the newly generated advertisement to the server; wherein the design data of the newly generated advertisement includes advertising configuration information and advertising material files, and the advertising configuration information is structured JSON data. Thus, through visual editing and preset templates, even business personnel with no design background can create professional-level advertising images, lowering the threshold for advertising design. Simultaneously, the advertisement can be created by editing the layer element layout, layer element attributes, and / or switching of the selected advertising template during the design process, reducing the traditional design process that takes several hours to just a few minutes, thus improving advertising production efficiency. Secondly, the pre-created ad templates in the template library ensure the standardization of elements such as color, font, and layout in the ads, guaranteeing the professionalism of the ad content and improving marketing effectiveness. Furthermore, by saving the ad configuration information and design data, including ad creative files, to the server, subsequent reuse and modification are facilitated, ultimately forming an ad content production solution that simultaneously meets the three major requirements of efficiency, quality, and ease of use.
[0047] Please see Figure 2 A second aspect of this application provides a visually editable advertising content generation apparatus, which includes: The loading unit is used to load the selected advertising template in response to the user's selection operation of the advertising template library; A rendering unit is used to dynamically render all layer elements of the selected advertisement template in the browser; The adjustment unit is used to respond to the user's editing operation on any layer element of the selected advertisement template, adjust the any layer element to obtain a newly generated advertisement, and the editing operation includes layer element layout editing operation, layer element attribute editing operation and / or layer element switching operation; The publishing and saving unit is used to respond to the user's publishing operation for the newly generated advertisement by converting the newly generated advertisement into an image file for publishing and saving the design data of the newly generated advertisement to the server. The design data for the newly generated advertisement includes advertisement configuration information and advertisement creative files, wherein the advertisement configuration information is structured JSON data.
[0048] The working process, working details and technical effects of the visual editing advertising content generation device provided in the second aspect of this embodiment can be found in the first aspect of the embodiment, and will not be repeated here.
[0049] Please see Figure 3 The third aspect of this application provides an electronic device, including a memory, a processor, and a transceiver that are sequentially and communicatively connected, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the visual editing advertising content generation method as described in the first aspect of the application.
[0050] Specifically, the memory may include, but is not limited to, random access memory (RAM), read-only memory (ROM), flash memory, first-in-first-out (FIFO) memory, and / or last-in-first-out (FILO) memory, etc.; the processor may not be limited to microprocessors of the STM32F105 series, ARM (Advanced RISC Machines), x86 architecture processors, or processors with integrated NPU (neural-network processing units); the transceiver may be, but is not limited to, WiFi (Wireless Fidelity) wireless transceivers, Bluetooth wireless transceivers, General Packet Radio Service (GPRS) wireless transceivers, ZigBee (a low-power LAN protocol based on the IEEE 802.15.4 standard), 3G transceivers, 4G transceivers, and / or 5G transceivers, etc.
[0051] This fourth aspect of the embodiment provides a computer-readable storage medium storing instructions containing the advertising content generation method for visual editing as described in the first aspect of the embodiment. Specifically, the computer-readable storage medium stores instructions that, when executed on a computer, perform the advertising content generation method for visual editing as described in the first aspect. The computer-readable storage medium refers to a data storage medium, which may include, but is not limited to, floppy disks, optical disks, hard disks, flash memory, USB flash drives, and / or Memory Sticks. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.
[0052] The fifth aspect of this embodiment provides a computer program product containing instructions that, when executed on a computer, cause the computer to perform the visual editing advertising content generation method as described in the first aspect of the embodiment, wherein the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device.
[0053] Finally, it should be noted that the above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.
Claims
1. A method for generating advertising content through visual editing, characterized in that, include: In response to the user's selection of an ad template from the ad template library, load the selected ad template; Dynamically render all layer elements of the selected advertisement template in the browser; In response to a user's editing operation on any layer element of the selected advertisement template, the user adjusts the layer element to generate a new advertisement. The editing operation includes layer element layout editing operation, layer element attribute editing operation, and / or layer element switching operation. In response to the user's action to publish the newly generated advertisement, the newly generated advertisement is converted into an image file for publication, and the design data of the newly generated advertisement is saved to the server; The design data for the newly generated advertisement includes advertisement configuration information and advertisement creative files, wherein the advertisement configuration information is structured JSON data.
2. The method for generating advertising content through visual editing according to claim 1, characterized in that, In response to a user's editing operation on any layer element of the selected advertising template, the adjustment of the layer element includes: In response to a user's drag operation on any layer element of the selected advertising template, the position of the selected layer element is adjusted. In response to a user's scaling operation on any layer element of the selected ad template, adjust the size of the selected layer element; and / or In response to a user's rotation operation on any layer element of the selected advertising template, the angle of that layer element is adjusted.
3. The method for generating advertising content through visual editing according to claim 2, characterized in that, After adjusting the position of any of the layer elements and / or adjusting the size of any of the layer elements, the method further includes: Calculate the distance between the center of any layer element and the center of the canvas, and the distance between the edge of any layer element and the edge of its adjacent layer element; If the distance between the center of any layer element and the center of the canvas is less than a first preset distance, then the center of any layer element is aligned with the center of the canvas. If the distance between the edge of any layer element and the edge of its adjacent layer element is less than a second preset distance, then the edge of any layer element is aligned with the edge of its adjacent layer element. Wherein, the first preset distance may be equal to or unequal to the second preset distance.
4. The method for generating advertising content through visual editing according to claim 1, characterized in that, In response to a user's editing operation on any layer element of the selected advertising template, the adjustment of the layer element includes: In response to a user's editing operation on the layer element attributes of any layer element of the selected advertising template, a layer element attribute editing panel is loaded, and the layer element attribute editing panel displays the layer element attributes of the selected layer element. In response to a user's modification operation on the layer element attributes in the layer element attribute editing panel, modify the layer element attributes of any layer element; The layer element properties include the transparency of the image element, the font type of the text element, the color of the text element, and / or the font size of the text element.
5. The method for generating advertising content through visual editing according to claim 1, characterized in that, In response to a user's editing operation on any layer element of the selected advertising template, the adjustment of the layer element includes: In response to a user's layer element switching operation on any layer element of the selected advertising template, the selected advertising template's layer element is replaced with a newly uploaded layer element, or the selected advertising template's layer element is replaced with a layer element selected from the product library.
6. The method for generating advertising content through visual editing according to claim 1, characterized in that, The ad configuration information includes the ad's canvas attributes, layer tree, and element attributes. The canvas attributes include the canvas's width, height, and background color. The layer tree includes all layers of the ad. The element attributes include the type, content, spatial attributes, style attributes, and business attributes of each layer.
7. The method for generating advertising content through visual editing according to claim 6, characterized in that, The layer tree includes a background layer, a product layer, a text layer, and a decoration layer. Business attributes include whether it is a product image and whether it is editable.
8. A visually editable advertising content generation device, characterized in that, include: The loading unit is used to load the selected advertising template in response to the user's selection operation of the advertising template library; A rendering unit is used to dynamically render all layer elements of the selected advertisement template in the browser; The adjustment unit is used to respond to the user's editing operation on any layer element of the selected advertisement template, adjust the any layer element to obtain a newly generated advertisement, and the editing operation includes layer element layout editing operation, layer element attribute editing operation and / or layer element switching operation; The publishing and saving unit is used to respond to the user's publishing operation for the newly generated advertisement by converting the newly generated advertisement into an image file for publishing and saving the design data of the newly generated advertisement to the server. The design data for the newly generated advertisement includes advertisement configuration information and advertisement creative files, wherein the advertisement configuration information is structured JSON data.
9. An electronic device, characterized in that, The device includes a memory, a processor, and a transceiver that are sequentially and communicatively connected, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the visual editing advertising content generation method as described in any one of claims 1 to 7.
10. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or the instructions are executed by the computer, they implement the visual editing method for generating advertising content as described in any one of claims 1 to 7.