KR102246537B1 - Online shopping mall banner design auto-generating method and apparatus - Google Patents

Abstract

One aspect of the present invention discloses a method of generating a banner design associated with an online shopping mall. The method includes: maintaining a plurality of basic template types for use as a basic design of a banner design of the online shopping mall, receiving a selection of a first basic template from among the plurality of basic template types, and the first basic template In response to the selection of, creating a first canvas for editing the first basic template (canvas is a space for template editing), in the first basic template created on the first canvas Selecting and changing at least one of a plurality of included design elements or adding at least one new design element (the plurality of design elements include an object constituting a basic template) and the changed or added And storing the reconstructed banner design including at least one design element.

Description

Online shopping mall banner design automatic generation method and device {ONLINE SHOPPING MALL BANNER DESIGN AUTO-GENERATING METHOD AND APPARATUS}

The present invention relates to a method of automatically generating an image, and more particularly, to a method of automatically generating an image associated with an online shopping mall.

In the process of operating online e-commerce (which can be called a shopping mall), promotion of the shopping mall is an indispensable activity in order to increase the awareness of the shopping mall and increase sales. The promotional activities of such shopping malls are often referred to as "promotion", which can be understood as "a variety of public relations activities conducted on a specific topic."

Shopping mall operators use various publicity means to increase the effect of promotion. Among them, a banner showing the concept of promotion and related information in a concise and impactful manner can be said to be the core of the publicity means.

Therefore, the performance of promotion has become an important factor so that it is influenced by the quality of the banner, but the work of creating a banner with high quality is the area of professionals who specialize in design, and ordinary people who lack experience in this field cost a lot of money. It is a reality that the production is commissioned by experts.

Accordingly, an application is required to efficiently create banner designs without relying on experts.

An object of the present invention for solving the above-described problem is to provide a method and apparatus for automatically generating an application-based shopping mall-related image that enables an online shopping mall manager to easily generate a banner design with high completeness.

According to an aspect of the present invention for achieving the above object, a method of generating a banner design associated with an online shopping mall includes the steps of maintaining a plurality of basic template types for use as a basic design of the banner design of the online shopping mall, Receiving a selection of a first basic template from among the plurality of basic template types held, generating a first canvas for editing the first basic template in response to the selection of the first basic template (canvas Is a space for template editing), selecting and changing at least one of a plurality of design elements included in the first basic template generated on the first canvas, or adding at least one new design element (the plurality of The design elements may include storing an object (object) constituting a basic template) and a banner design reconstructed including the changed or added at least one design element.

At least some of the plurality of basic template types may be formed of a combination of at least two of an image design element, a text design element, and a shape design element.

When the first basic template is generated on the first canvas, a canvas design element table indicating the configuration of each design element included in the first basic template generated on the first canvas may be generated together.

The design elements on the first canvas and the design elements on the canvas design element table may be identified by interlocking with each other.

The canvas design element table includes a display selection box for displaying or deleting a design element on the first canvas, and a specific design element on the first canvas may be displayed or deleted in response to a user input for the display selection box. .

Positions of the plurality of design elements included in the canvas design element table may be determined by a layer of design elements on the first canvas.

The step of selecting and changing at least one of the plurality of design elements included in the first basic template or adding a new design element may include a first among the plurality of design elements in response to a first user input for selecting a design element to be changed. 1 Selecting a design element, parsing whether the selected first design element is an image design element, a text design element, or a shape design element, and a second user input (the first design element) based on the type of the parsed design element. 2 The user input may include changing the first design element in response to a user input for changing the first design element.

When the first design element is parsed as an image design element, as a menu for the second user input, the first design element is deleted, sized, rotated, vertically inverted, left-right inverted, filter effect added, transparency setting, And a first menu related to at least two of the insertion of the replacement image.

When the first design element is parsed as a text design element, as a menu for the second user input, the text content change of the first design element, font setting, font size setting, tracking setting, font color setting, transparency setting A second menu related to at least two of them may be provided.

When the first design element is parsed as a shape design element, a third menu related to at least two of resizing, rotating, and changing transparency of the first design element may be provided as a menu for the second user input. .

The step of changing the first design element in response to a second user input based on the parsed design element attribute may include, except for the attribute changed by the second user input, the basis of the first design element. It may include the step of changing the first design element while inheriting and maintaining the attribute.

In response to the selection of the first basic template, generating a first canvas for editing the first basic template may include receiving a user input related to adjustment of at least one of a size and a ratio of the first canvas. The step, based on the received user input, may include adjusting at least one of a size and a ratio of the first canvas, and displaying the first basic template on the adjusted first canvas.

The plurality of basic template types are divided into a first class and a second class, the second class is included in the first class, the first class is categorized in relation to the shape of the canvas, The second class may be categorized based on an arrangement of a plurality of design elements included in a canvas configured in the shape of the first class.

The first class may include at least two of a canvas having a long horizontal direction, a rectangular shape having a long vertical direction, a square shape, and a strip shape.

In response to a request for validation of the first canvas, a verification tool for expressing the configuration of each design element in the first canvas and attributes of each design element in an html language may be provided.

Using the verification tool, a padding area, a border area, and a margin area formed on the outer circumferential surface of the canvas are set, and the effectiveness of the canvas is determined based on the set padding area, border area, and margin area. Can be verified.

When a second basic template is additionally selected from among the plurality of basic template types, a second canvas for editing a second basic template is generated in response to the selection of the second basic template, and the first canvas and the first 2 The canvas can be placed in an editable state on a single screen.

According to another aspect of the present invention for achieving the above object, an apparatus for generating a banner design associated with an online shopping mall includes a memory storing a plurality of basic template types for use as a basic design of the banner design of the online shopping mall, An input unit that receives a user input for selecting a first basic template from among a plurality of basic template types stored in the memory, and a first canvas for editing the first basic template in response to selection of the first basic template (The canvas includes a space for template editing), and a plurality of design elements included in the first basic template generated on the first canvas (the plurality of design elements are objects constituting the basic template) ). A processor configured to store the reconstructed banner design in the memory by selecting and changing at least one of) or adding at least one new design element may be included.

According to the method and apparatus for automatically generating an image associated with a shopping mall of the present invention, there is an effect of supporting the creation of an image related to a shopping mall easily by modifying or adding an image, text, and shape design elements desired by a user to a pre-owned banner design template. .

1 is a conceptual diagram showing a system to which a method for automatically generating images associated with a shopping mall according to an embodiment of the present invention is applied;
2 is a flowchart schematically showing a method of automatically generating an image associated with a shopping mall according to an embodiment of the present invention;
3 is a view showing a screen for producing a banner design according to an image automatic generation method associated with a shopping mall according to an embodiment of the present invention;
FIG. 4 is a conceptual diagram illustrating a link between a canvas design element table and a canvas on the screen of FIG. 3 and showing a menu corresponding to an image design element;
5 is a conceptual diagram illustrating a process of deleting an image using a display selection box of a canvas design element table on the screen of FIG. 3;
6 is a diagram showing a menu corresponding to a text design element of a canvas in the screen of FIG. 3;
7 is a diagram showing a menu corresponding to a shape design element of a canvas in the screen of FIG. 3;
8 is a diagram showing a screen for uploading a previously stored image;
9 is a flowchart illustrating a process of automatically cropping an input image;
10 is a conceptual diagram for explaining a multi-crop method of cropping an input image in which a plurality of images are mixed into individual images;
11 is a diagram showing a state in which a plurality of canvases are created and worked on the screen of FIG. 3;
12 is a block diagram illustrating an apparatus for automatically generating an image associated with a shopping mall according to an embodiment of the present invention.

In the present invention, various modifications may be made and various embodiments may be provided, and specific embodiments will be illustrated in the drawings and described in detail.

However, this is not intended to limit the present invention to a specific embodiment, it should be understood to include all changes, equivalents, and substitutes included in the spirit and scope of the present invention.

Terms such as first and second may be used to describe various elements, but the elements should not be limited by the terms. The above terms are used only for the purpose of distinguishing one component from another component. For example, without departing from the scope of the present invention, a first element may be referred to as a second element, and similarly, a second element may be referred to as a first element. The term and/or includes a combination of a plurality of related listed items or any of a plurality of related listed items.

When a component is referred to as being "connected" or "connected" to another component, it is understood that it may be directly connected or connected to the other component, but other components may exist in the middle. It should be. On the other hand, when a component is referred to as being "directly connected" or "directly connected" to another component, it should be understood that there is no other component in the middle.

The terms used in the present application are only used to describe specific embodiments, and are not intended to limit the present invention. Singular expressions include plural expressions unless the context clearly indicates otherwise. In the present application, terms such as "comprise" or "have" are intended to designate the presence of features, numbers, steps, actions, components, parts, or combinations thereof described in the specification, but one or more other features. It is to be understood that the presence or addition of elements or numbers, steps, actions, components, parts, or combinations thereof does not preclude in advance.

Unless otherwise defined, all terms used herein including technical or scientific terms have the same meaning as commonly understood by one of ordinary skill in the art to which the present invention belongs. Terms such as those defined in commonly used dictionaries should be interpreted as having a meaning consistent with the meaning in the context of the related technology, and should not be interpreted as an ideal or excessively formal meaning unless explicitly defined in the present application. Does not.

Hereinafter, preferred embodiments of the present invention will be described in more detail with reference to the accompanying drawings. In describing the present invention, in order to facilitate an overall understanding, the same reference numerals are used for the same elements in the drawings, and duplicate descriptions for the same elements are omitted.

1 is a conceptual diagram illustrating a system to which a method of automatically generating an image associated with a shopping mall according to an embodiment of the present invention is applied. As shown in FIG. 1, the system for automatically generating images related to shopping malls according to an embodiment of the present invention may include a user terminal 120, a network 130, and a shopping mall management server 140 of an administrator who operates a shopping mall. have.

Referring to FIG. 1, a shopping mall 110 may mean an online shopping mall that sells goods and/or services through the Internet. The shopping mall 110 operates based on a specific web site on the Internet. According to an embodiment of the present invention, the plurality of shopping malls 110 interwork with the shopping mall management server 140 through the network 130. That is, operation information, product information, and the like of the shopping mall 110 may be stored in an internal storage of the shopping mall management server 140 or an external large-capacity database.

According to an embodiment of the present invention, the shopping mall management server 140 may also be implemented as a computing device. The computer device referred to herein may be implemented as a server-class computer terminal. The computer device may include an input device of a typical computer terminal, a display device, a networking device, a hard disk, a memory for storing a program, a processor for executing a program stored in the memory, and the like. However, it does not necessarily have to be implemented as a server-class computer terminal.

The user terminal 120 includes an operator's terminal of the shopping mall 110. The terminal 120 may also be implemented as a computing device such as a smartphone or a PC. The user terminal 120 accesses the specific web site of the shopping mall 110 and provides a signal related to the operation of the shopping mall 110 to the shopping mall management server 140 through the network 130. Manage operations.

The user terminal 120 may create a banner design for promoting its own shopping mall. In this case, a banner design (eg, an image file) related to the shopping mall may be generated using a banner design production tool provided by the shopping mall management server 140. The shopping mall-related image generation operation may be performed in the user terminal 120 or in the shopping mall management server 140. For example, an application related to automatic creation of a shopping mall-related image (this may be referred to as an edibot banner) may be downloaded from the user terminal 120 and the user terminal 120 may generate a shopping mall-related image by itself. Alternatively, the user terminal 120 may provide a signal related to selection of elements to be included in the banner design of the shopping mall, and the server 140 may generate a banner design by the production tool based on the provided signal. Accordingly, the image generating device in the present specification may be the user terminal 120 that has downloaded an application related to banner design production, or receives a signal related to design generation from the user terminal 120 and uses the banner design production tool by itself. Thus, it may mean a third device other than the shopping mall management server 140 that generates an image or the server 140 specialized only for the production of a banner design.

According to an embodiment of the present invention, the user terminal 120 may access a web site provided by the shopping mall management server 140 to download the application. Then, by executing the application, the task for creating a banner design is started. The user terminal 120 selects at least one of a plurality of basic template types already held in the application, and performs image replacement, text correction and/or shape correction, or a new image, text and/or shape in the selected basic template. You can easily create a new banner design through a process such as adding.

Here, the image may include images in various formats such as JPG, PNG, BMP, GIF, JPEG, PDF, JPE, TIFF. However, since the GIF file is a moving image file including a plurality of frames, it may be desirable to extract each frame and convert it into a JPG file. The text includes characters (including English, Chinese, Korean, ..., etc.), numbers, symbols, formulas, and the like, and may include all languages that can be processed by a computing device. The shape may include lines such as straight lines and arrows, shapes such as triangles, squares, and circles.

The network 130 is a network connecting the shopping mall 110 and the shopping mall management server 140 and may include a wired network and/or a wireless network (Internet).

2 is a flowchart schematically illustrating a method of automatically generating an image associated with a shopping mall according to an embodiment of the present invention.

Referring to FIG. 2, the image generating apparatus has a plurality of basic template types (S210). In the case of a user terminal, it may be basically included and provided in the installation information about the banner design production application obtained from the server. In addition, as the version is periodically updated through the server, additional basic template types may be reinforced. When the image generation operation is performed in the shopping mall management server, basic template type information may be stored in a large-capacity database linked with the server. In addition, at least some of the banner designs newly produced by the user through the banner design production tool of the shopping mall management server may be stored in the large-capacity database and then recycled as a basic template type.

Basic templates basically contain different kinds of design elements. The design element is an element constituting a basic template and/or a newly created banner design, and includes an image design element, a text design element, and/or a shape design element. It is preferable that the basic template and/or the banner design derived therefrom include at least two or more types of design elements among the three types of design elements.

The device selects one of the owned basic template types (S220). Choose a basic template type that suits the topic you want to promote. The basic template is classified into a first class categorized based on the shape of the template, and a second class categorized by different arrangement of design elements within the first class. That is, the device selects one of the first classes based on the first user input, and selects one of the selected basic templates of the first class based on the second user input in the second class.

The device generates a canvas based on the selected basic template (S230). The canvas is a space for editing the selected default template. This can be implemented on the screen as a physical space. When moving the selected default template to the canvas, you can set the size and ratio of the width and height. Basically, you can use the original size of the template as it is, or you can have a different size from the original size to suit the user (shopping mall operator)'s banner design usage. For example, if the first basic template is selected with the first class of the basic template as a square, it can have a size of 600x600 by default, but the user may use it as it is, or even if the canvas size is set to a modified size such as 800x400. do.

When the canvas is created, the device selects and changes at least one of the design elements included in the basic template on the canvas, or generates a new banner design by adding a new design element (S240). For example, if the basic template is created with a combination of two images, two texts, and an arrangement of two shapes, change the first image to another image previously stored on the device, and change the text and size of the second text to You can create a new image that fits the topic you want to promote. That is, a new design can be created by changing at least one of an image design element, a text design element, and a shape design element. Alternatively, a new design can be created by adding images, text and/or shapes to the base template. That is, by adding one shape to the exemplary basic template, a design having a combination of two images, two texts, and three shape arrangements can be newly created.

In this way, a reconstructed banner design can be created while freely changing and adding design elements on the canvas for design editing, and if the generated banner design is liked by the user, it can be stored in the device (S250). .

According to an embodiment of the present invention, the above step (S240) may be omitted, and the basic template may be stored as it is, and the stored design may be directly used for the shopping mall banner design.

3 is a diagram illustrating a screen for producing a banner design according to a method of automatically generating an image associated with a shopping mall according to an embodiment of the present invention.

Referring to FIG. 3, when a device automatically generates an image associated with a shopping mall (APP) is executed, a new banner design may be generated through the process of FIG. 2. When the app is launched, an icon for uploading an image and an icon for selecting a template type may exist on the left side of the screen of the device. When an icon for selecting a template type is clicked on, the template type of the first class 310 and the templates of the second class 320 of the subclass of the first class 310 are displayed. The first class 310 can be classified according to the shape of the basic template. According to an embodiment of the present invention, it is a horizontal canvas in a rectangular shape (for example, 1000x600) and a canvas in a strip shape (for example, 1000x100), a square-shaped canvas (eg, 600x600), and a vertical canvas (eg, 400x600) in a rectangular shape having a long vertical direction. This is a pre-retained form and is not necessarily limited thereto, and a first class canvas type of various forms such as a triangular form, a parallelogram form, and a circular form may additionally exist.

In the basic template of the first class 310, a plurality of templates of the second class 320 exist. As in the exemplary embodiment of FIG. 3, when a square-shaped basic template is selected, a plurality of basic templates of the second class 320 having a square shape are displayed. The basic templates of the second class 320 may have different configurations of design elements and different arrangements of design elements. The correspondence between the first class 310 and the second class 320 and the configuration of the basic template having the correspondence may be stored in advance. In addition, the banner design generated by creating a new banner design may be continuously updated in a form that is added to the corresponding first class 310 and the second class 320.

In the embodiment of FIG. 3, it is assumed that the 12 template among the templates of the second class 320 in the form of a square, that is, the basic template of "square 12" is selected. When the "square 12" template is selected, one canvas 330 is created under the name "canvas 1" in the canvas space on the right side of the image/template selection windows 310 and 320. And, the basic template of the selected "square 12" is displayed in the "canvas 1" 330, and a canvas design element table 360 is created together. The canvas design element table 360 provides identification information of design elements included in a specific canvas. The canvas 1 330 currently includes one image, two texts, and two shapes, and the canvas design element table 360 indicates identification information of these five design elements.

As described above, the five design elements of the basic template "square 12" of the canvas 1 330 are image 1 (340-1), text 1 (340-2), text 2 (340-3), shape 1 ( 340-4) and shape 2 (340-5). This is, in the canvas design elements table 360, image 1 (364-1), text 1 (364-2), text 2 (364-3), shape 1 (364-4) and shape 2 (364-5). Corresponds to and respectively. The user may select one of the five design elements through the canvas 1 330 or the canvas design element table 360 and change the size, attributes, and contents of the selected design element. You can also add new design elements.

A menu 350 for overall processing of the canvas 1 330 may be displayed at the bottom of the canvas 1 330. The menu 350 may include a canvas size setting icon, a canvas duplicate icon, a canvas download icon, and a canvas deletion icon. The user can change the size and ratio of the currently produced canvas by using the canvas size setting menu. In this case, only the size of the canvas can be changed while the size of the design element in the canvas is maintained. Clicking the duplicate canvas menu copies a canvas of the same composition and places it on another canvas. Accordingly, it is possible to induce different editing of the same canvas composition. If you click the canvas download icon, you can download the design of the canvas that has been carried out so far in the form of an image file (eg, jpg, png, tiff, pdf, etc.). If you click the delete canvas icon, the canvas that has been editing up to now is discarded.

Looking at the canvas design element table 360 in detail, the canvas design element table 360 includes a design element display selection box 362. This can be implemented in one row or column to correspond to each design element. The display selection box 362 basically maintains the "on" state. In other words, it is set by default so that all design elements are displayed. However, if the circle icon in the display selection field 362 is clicked to be removed, the corresponding design element in the canvas 330 is also removed. In other words, whether to display or delete a specific design element may be determined through the display selection box 362. A selection lock icon 366 and a selection deletion icon 368 may be displayed at the bottom of the canvas design element table 360. When the selection lock icon 366 is clicked on a specific design element, editing of the specific design element is restricted. That is, when it is thought that further editing is not required for a specific design element, the selection lock icon 366 may be clicked to create a state in which editing is impossible. The selection delete icon 368 is an icon for deleting a specific design element. If the display selection field 362 is selected to display the corresponding design element again later, if it is a reversible deletion that can be displayed again, the deletion through the selection deletion icon 368 is irreversibly deleted.

At the top of the canvas, there is a space 370 in which a menu for editing each design element is displayed. In the menu displayed in the space 370, different menus are displayed according to the type of design element (eg, whether it is an image design element, a text design element, or a shape design element). This will be described in detail with reference to FIGS. 4 and 6 to 7.

A menu commonly applied to the canvas is displayed on the right side of the space 370 above the canvas. This includes an undo undo icon, a redo icon, a text/image/shape addition icon, a background color setting icon, a layer front/rear display setting icon, and a design element deletion icon. The layer front/rear display setting icon is an icon for selecting whether to display a specific design element in front of or behind other design elements. In other words, it performs a function similar to the "Bring Forward" or "Send Backward" function of other document editing applications.

According to an embodiment of the present invention, the order of the canvas design element table reflects the layers. That is, the design element positioned at the top is the design element of the front layer, and the design element positioned next is positioned at the bottom of the table. In addition, as the layer front/rear display setting icon is clicked, the position of the specific design element in the table on the canvas design element table is changed upward or downward. The user can grasp the arrangement associated with the layer of each design element based on the position of the design element on the table.

FIG. 4 is a conceptual diagram illustrating a connection between a canvas design element table and a canvas on the screen of FIG. 3 and showing a menu corresponding to an image design element.

Referring to FIG. 4, when editing the basic template on the canvas of FIG. 3, the device may directly designate and work with an object (ie, design element) on the canvas, and the design of the canvas design element table 360 You may proceed with the work by specifying the element. That is, as described above, the design elements in the canvas 330 and the design elements in the canvas design element table 360 interlock with each other.

When clicking image 1 (340-1) in the canvas or canvas design element table, image 1 (364-1) on the table is also designated. The opposite is also true. If this design element is not locked, the specified design element becomes editable. In a state in which image 1 340-1 is designated, the size, position, and degree of rotation of the image can be adjusted using the outline of the image. According to user settings, in order not to change the basic properties of the design elements in the basic template, the position of the image may be set not to be changed.

According to an embodiment of the present invention, when editing an image design element, the first menus 372-1 to 372-7 including at least seven functions may be displayed on the space 370. The first icon 372-1 of the first menu is an icon for changing the ratio and/or size of the image. The second icon 372-2 is an icon that adjusts the rotation angle of the image, and implements a function of rotating the image at a predetermined angle by clicking the icon and inputting the rotation angle. The third icon 372-3 is a transparency setting icon, which sets the color transparency of the image. Transparency of the image may be determined by setting a value between 0 and 100% using the icon 372-3. The fourth icon 372-4 is an image duplicating icon, and is an icon that additionally creates an image identical to an image edited so far in the corresponding canvas. When an image is added within the canvas, it is also added to the canvas design elements table (eg as "Image 1_Copy1").

The fifth and sixth icons 372-5 and 372-6 are icons for left and right and upside down. The last and seventh icons 372-7 are icons for giving a filter effect.

According to an embodiment of the present invention, a filter applied to an image includes a filter for color change. These include filters that give effects such as black and white, sepia, dramatic, warm tones, cool tones, and noir. In addition, it is possible to provide a function of adjusting brightness, contrast color, and blur information numerically.

5 is a conceptual diagram illustrating a process of deleting an image using a display selection box of a canvas design element table on the screen of FIG. 3.

Referring to FIG. 5, the device may display or delete a corresponding design element on a canvas 330 according to an input to a display selection box 362 for a specific design element. In the embodiment of FIG. 5, in response to an input to the display selection box 500 for image 1 364-1 on the canvas design element table, the device deletes the circular display on the display box 500 and at the same time In (330), image 1 (340-1) is deleted to make it blank. Design elements deleted through the display selection box 362 may be revived when there is an input to the display selection box 362 again later.

When an image is deleted and a blank is created, the device can replace the image by inserting another image ready to be applied to the banner design into the blank. Insertion can be accomplished by dragging and dropping the image into the corresponding blank. The replaced image inherits the properties (eg, size/ratio, position, transparency, etc.) of the image design element in the deleted basic template. The user can change the attributes inherited from the basic template by using the image-related menu.

6 is a diagram illustrating a menu corresponding to a text design element of a canvas in the screen of FIG. 3.

Referring to FIG. 6, the device may designate a specific text design element on the canvas 330 or the canvas design element table and change its content and/or properties. According to the embodiment of FIG. 6, the device designates a corresponding text design element in response to a selection input for text 2 340-3 and 364-3, and changes the designated text design element into an editable state. The user can adjust the size, position, and rotation angle of the text by adjusting the outline of the text 340-3 on the canvas, and can change the content of the text by clicking inside the outline of the text. When changing the content of the text, the attribute of the text follows the attribute of the text 1 (340-1) on the basic template as it is.

In addition, when a text design element is designated, the device displays a second menu for text editing in the space 370. The second menu includes icons of various functions. The icon 374-1 is an icon for changing the font of text. The icon 374-2 is the size of the text, the icon 374-3 is the font color of the text, and the icon 374-4 is the icons for changing the font background color of the text. In addition, the icon 374-5 is an icon for text alignment, and it is possible to determine whether to align left, right, and/or center by using the icon. The icon 374-6 is an icon for bold expression, the icon 374-7 is an icon for oblique expression, and the icon 374-8 is an icon for expressing an underline. The icon 374-9 is an icon for displaying a strikethrough line, and the icon 374-10 is an icon for setting leading and/or tracking. Icons 374-11 to 374-13 are rotation, transparency, and duplicate icons.

In this way, the device provides different menus on the screen according to the type of the designated design element so that the user can edit it according to the characteristics of the design element.

7 is a diagram illustrating a menu corresponding to a shape design element of a canvas in the screen of FIG. 3.

Referring to FIG. 7, the device may designate a specific shape design element on the canvas 330 or the canvas design element table and change the size, position, and/or attribute thereof. According to the embodiment of FIG. 7, the device designates a corresponding shape design element in response to a selection input for shape 1 340-4 and 364-4, and changes the designated shape design element into an editable state. The user can adjust the size, position, and rotation angle of the shape by adjusting the outline of the shape 340-4 on the canvas.

Further, when a shape design element is designated, the device displays a third menu for shape editing in the space 370. The third menu includes icons that perform five functions. The icon 376-1 is an icon for adjusting the size and proportion of the shape, the icon 376-2 is an icon for setting the rotation angle, and the icon 376-3 is an icon for setting the background color. Additionally, the icon 376-4 is an icon for setting transparency, and the icon 376-5 is a duplicate icon.

As described so far, the user can change and modify specific design elements included in the basic template by using functions on the device. Further, the addition of design elements can be realized in a similar way by application of the above-described contents.

8 is a diagram showing a screen for uploading a previously stored image.

Referring to FIG. 8, the device may display a menu for uploading an image to the left of a menu for selecting a template. In particular, when the image upload icon 805 is clicked, a function for loading a file stored in the device is executed, and a user can load an image existing in a predetermined folder in the device.

The device can import pre-stored image files and classify and/or transform them into shapes suitable for insertion into the canvas. The image can be divided into 4 types.

According to an embodiment of the present invention, as shown in the menu 810, the image is divided into a product cut, a full body cut, an upper body cut, and/or a lower body cut to the right of the icon showing the entire image. However, it is not always necessary to classify only four types as described above, and it is also possible to classify images by a smaller number or a larger number.

After the image to be uploaded is selected by user input, the device automatically analyzes the objects included in the image and classifies the image into one of a product cut, a full body cut, an upper body cut, and a lower body cut. All icons are icons for showing all images 812-1 and 812-2 classified into one of four categories.

Clicking the product cut icon displays the image divided into product cuts, and clicking the full body cut icon displays the image divided into full body cuts. The same goes for the upper and lower body cuts. Hereinafter, a process of preparing an image to be inserted into the canvas through FIGS. 9 and 10 will be described in more detail.

9 is a flowchart illustrating a process of automatically cropping an input image.

Referring to FIG. 9, the device receives at least one image to be inserted into a banner design by a user input (S910). Then, by analyzing the input image, it is determined whether a person, that is, a model exists in the input image (S912). If the model exists, it may be classified into one of a full body cut, a lower body cut, and an upper body cut, but if the model does not exist, it is classified as a product cut (S914). For images classified by product cuts, the image is automatically cropped based on the most central object among the objects existing in the image. Make the center object come into the center of the image. Then, the image is cropped by arranging a boundary line of the image at a predetermined distance from the object. In this case, the resolution of the object in the original image may be changed. As the object becomes the center of the image, the size and resolution of the object may be changed in consideration of the predetermined distance between the object and the image boundary.

According to an embodiment of the present invention, parameters for how far an object is to be defined in relation to object analysis (relating to the size of an object), parameters related to setting the boundary of an image crop, etc. are the input original image and the image inserted into the actual canvas. It may be trained using an artificial intelligence model (eg, a deep learning model) based on a learning data set including.

As a result of image analysis, if a model exists, it is determined whether a face of the model exists (S918). If the face does not exist, it is determined whether the lower body is seen as a whole (S920). If the lower body is seen as a whole, the image is divided into a lower body cut (S922), and the image is cropped around the lower body of the model (S924). If the lower body is not displayed as a whole and only a part is displayed, the image may be classified as a product cut (S914).

In step S918, if there is a face, it is determined whether the image shows the entire body of the model or not, but only a certain part of the body including the face is shown (S926). If the whole body is shown, the image is divided into a full body cut (S928). When divided into a full body cut, the image may be cropped around the entire body of the model (S930). In other words, it is desirable to crop the image so that the entire body is displayed around the waist of the model. In step S926, when the entire body is not visible, the image may be divided into a cut of the upper body (S932). When divided into upper body cuts, the image can be cropped by placing the face slightly above the center of the image. That is, the image is cropped by placing it in the center in the left and right direction, and placing the face above the center in the vertical direction.

After the image is cropped, the image is put on standby in a ready-to-upload state. In this case, it is possible to determine whether to keep the image as classified or to change the currently automatically classified state (S936). If the current state is maintained as it is, it is assumed that the preparation process for the inserted image is completed (S942). Otherwise, if the current classification state is to be changed, a specific cropping algorithm may be arbitrarily selected (S938). For example, when a user wants to change an image that is currently divided into a lower body cut and cropped centering on the lower body of the model to a product cut, the user may directly select to use the cropping algorithm of the product cut (S938). That is, according to the newly selected product cut image cropping algorithm, the lower body is not the center of the image, but a specific object (eg, shoes, socks, etc.) existing in the image may be the center so that the image is cropped (S940). ).

According to another embodiment of the present invention, an inserted image may be prepared by manually cropping an original image. That is, the image preparation work can be performed in the manual crop mode so that the part desired by the user can be clearly revealed as intended.

Additionally, the size of the base image may vary according to the size of the input image, but may be set as a default. For example, an image may be cropped according to a preset image size, such as a 600x600 square or 600x400 rectangle.

10 is a conceptual diagram illustrating a multi-crop method of cropping an input image in which a plurality of images are mixed into individual images.

Referring to FIG. 10, when an input image in which a plurality of images are mixed is uploaded, the device independently crops the corresponding image. An input image in which multiple images are mixed as described above may be generated when an image uploaded to an actual shopping mall is copied as it is. In other words, when an attempt is made to randomly copy a product image displayed on the shopping mall and insert it into the canvas as an input image, individual images related to each product included in the input image are cropped based on the boundary line existing around the individual image. Can be.

That is, in the embodiment of FIG. 10, the individual images 1010-1, 1010-2 and 1010-3 include the boundary lines 1010-1 and 1020-2 of a specific color (eg, white color) in the outline. And the device automatically crops individual images based on the boundary lines 1020-1 and 1020-2 of the outline and puts them in a ready state for canvas insertion.

According to another embodiment of the present invention, the device may crop an image based on an object (which may include both a person object and an object object). That is, in an input image in which a plurality of images are mixed, two objects that are not attached to each other and are separated by a predetermined distance or more may be divided into separate images and cropped. In this case, the size of the object may be additionally considered. If the object is larger than a predetermined size and the distance between the two objects is separated, an image can be independently generated centering on the two separated objects. In this case, the background around the object may be cropped based on a point where the color rapidly changes. That is, the device may crop the image based on the pixel value when independent of the image based on different objects. For example, even though object 1 and object 2 exist on one input image, if object 1 and object 2 have a size greater than or equal to the reference value and are separated by more than the reference distance, image 1 and object 2 centered on object 1 Image 2 centered on can be independently generated. In this case, the crop boundary lines of images 1 and 2 may be determined based on pixel values. For example, when considering the size of the object and the size of the basic embedded image, the difference in pixel value from the neighboring pixels is among the pixels in the area that is likely to become the boundary line of the image because it is more than a certain distance from the object located in the center of the image The portion of the pixel above the threshold is determined as the boundary, and the two images can be separated based on that portion.

The multi-crop algorithm for cropping an input image in which multiple images are mixed into individual images can be adaptively learned using an artificial intelligence model, like the single crop algorithm of FIG. 9 above. That is, the input original image before being cropped by the multi-crop algorithm and the individual image used for insertion into the canvas by the user after being cropped by the actual multi-crop algorithm are created as one training data set, and individual images from the original image. By quantifying the hyper-parameters used for cropping, the multi-crop algorithm can be trained. The learned hyperparameter is a threshold value of a distance between objects for cropping an image, a threshold value of an object size that can be created as an independent object, a size of an inserted image, and/or a threshold value for a difference in pixel values that determine the boundary of the image crop. It may include.

According to an embodiment of the present invention, images to be inserted prepared by the cropping algorithm as described above are inserted by inheriting the properties of the image on the replacement target basic template as they are. However, in this case, the resolution of the image to be inserted may be set to be inserted while maintaining the resolution of the image to be inserted, or the resolution may be changed and set to be inserted according to the size of the image on the replacement target basic template. This is not irreversible because the size and proportion of the image can be adjusted even after insertion.

FIG. 11 is a diagram illustrating a state in which a plurality of canvases are created and worked on the screen of FIG. 3.

Referring to FIG. 11, the device is not limited to work by creating only one canvas in the canvas generation portion. That is, the device may create a plurality of canvases so that the editing work can be performed at the same time. For example, while working on the first canvas 330 based on the basic template of "square 12", the second canvas 380 is newly created by selecting the basic template of "vertical type 4", and the first canvas ( Editing of the 330 and the second canvas 380 may be simultaneously processed on one screen.

In addition, the current work situation on the first canvas is copied and placed on the second canvas, and for subsequent editing work, the editing on the first canvas and the editing on the second canvas are made different from those on the second canvas. You can get more than one result.

Images of a plurality of canvases created in the above manner can be checked at once through a banner preview icon (not shown), and batch downloads are also possible.

According to an embodiment of the present invention, the device has a function of verifying the validity during the editing process of the canvas. This is implemented by the verification tool. In other words, when a validation of the current canvas is requested during the editing process, a verification tool is provided in which each design element in the canvas and functions related to editing properties related to the design element (eg, filters, fonts, etc.) are expressed in html language. do. The user can check the validity of the canvas by using an html language-based validation tool that responds to the validation request. Through this, it is possible to check whether a programming language (including the html language) related to each design element and an editing function of the design element is properly formed. For example, programming for detailed functions related to the function of the filter may also be performed using the verification tool.

Additionally, the appropriateness of the overall size of the canvas can be determined, and it is determined whether there is a problem in the creation of the canvas by considering the padding, border, and margins formed on the outer circumference of the canvas. The size of padding, border, and margin can be set by the user using the verification tool. The device may verify the validity of the actual canvas size according to the set padding, border, and margin sizes, and if not appropriate, may automatically adjust the canvas size.

12 is a block diagram illustrating an apparatus for automatically generating an image associated with a shopping mall according to an embodiment of the present invention. As shown in FIG. 12, the apparatus for automatically generating an image related to a shopping mall according to an embodiment of the present invention includes a communication unit 1210, a memory 1220, a processor 1230, an output unit 1240, and an input unit 1250. can do.

Referring to FIG. 12, the communication unit 1210 is a component for communication with other devices. This may be implemented by an antenna or an electronic circuit related to communication, or a communication processor.

The memory 1220 is a storage for storing program instructions related to work in the processor 1230. In addition, it may store a basic template type, input images to be inserted into the canvas, and the like.

The processor 1230 receives an input image based on a command stored in the memory 1220 and generates a banner design. The processor 1230 performs an image cropping operation through image analysis on the input image, prepares for inserting a canvas, and edits a basic template selected based on a user input to generate a final design. In addition, in relation to the image cropping algorithm, it controls to achieve more precise image cropping by performing machine learning using an artificial intelligence model. The process of cropping the image of the processor and creating a banner design is as described above.

The output unit 1240 includes display means for displaying a screen. This may include a monitor, a TV screen, and the like. The output unit 1240 provides the editing situation on the canvas to the user using the display means, and displays the final banner design.

The input unit 1250 is an interface for user input, and may include a keyboard, a mouse, and a touch pad, and receives user input such as user setting and image selection.

The system or device described above may be implemented as a hardware component, a software component, and/or a combination of a hardware component and a software component. For example, the systems, devices, and components described in the embodiments are, for example, a processor, a controller, an arithmetic logic unit (ALU), a digital signal processor, a microcomputer, a field programmable array (FPA). ), a programmable logic unit (PLU), a microprocessor, or any other device capable of executing and responding to instructions. The processing device may execute an operating system (OS) and one or more software applications executed on the operating system. Further, the processing device may access, store, manipulate, process, and generate data in response to the execution of software. For the convenience of understanding, although it is sometimes described that one processing device is used, one of ordinary skill in the art, the processing device is a plurality of processing elements and/or a plurality of types of processing elements. It can be seen that it may include. For example, the processing device may include a plurality of processors or one processor and one controller. In addition, other processing configurations are possible, such as a parallel processor.

The software may include a computer program, code, instructions, or a combination of one or more of these, configuring the processing unit to operate as desired or processed independently or collectively. You can command the device. Software and/or data may be interpreted by a processing device or, to provide instructions or data to a processing device, of any type of machine, component, physical device, virtual equipment, computer storage medium or device. , Or may be permanently or temporarily embodyed in a transmitted signal wave. The software may be distributed over networked computer systems and stored or executed in a distributed manner. Software and data may be stored on one or more computer-readable recording media.

The method according to the embodiments may be implemented in the form of program instructions that can be executed through various computer means and recorded in a computer-readable medium. The computer-readable medium may include program instructions, data files, data structures, and the like alone or in combination. The program instructions recorded on the medium may be specially designed and configured for the embodiment, or may be known and usable to those skilled in computer software. Examples of computer-readable recording media include magnetic media such as hard disks, floppy disks, and magnetic tapes, optical media such as CD-ROMs and DVDs, and magnetic media such as floptical disks. -A hardware device specially configured to store and execute program instructions such as magneto-optical media, and ROM, RAM, flash memory, and the like. Examples of program instructions include not only machine language codes such as those produced by a compiler, but also high-level language codes that can be executed by a computer using an interpreter or the like. The hardware device described above may be configured to operate as one or more software modules to perform the operation of the embodiment, and vice versa.

As described above, although the embodiments have been described by the limited embodiments and drawings, various modifications and variations are possible from the above description to those of ordinary skill in the art. For example, the described techniques are performed in a different order from the described method, and/or components such as systems, structures, devices, circuits, etc. described are combined or combined in a form different from the described method, or other components Alternatively, even if substituted or substituted by an equivalent, an appropriate result can be achieved.

Therefore, other implementations, other embodiments, and those equivalent to the claims also fall within the scope of the claims to be described later.

Claims (18)

In the method of generating a banner design associated with an online shopping mall,
Maintaining a plurality of basic template types for use as a basic design of a banner design of the online shopping mall;
Receiving a first basic template selected from among the plurality of basic template types held;
Generating a first canvas for editing the first basic template in response to the selection of the first basic template, the canvas being a space for template editing;
Selecting and changing at least one of a plurality of design elements included in the first basic template generated on the first canvas or adding at least one new design element, the plurality of design elements constituting a basic template Includes objects; And
Including the step of storing the reconstituted banner design including the changed or added at least one design element,
The plurality of basic template types are divided into a first class and a second class,
The second class is included in the first class,
The first class is categorized with respect to the shape of the canvas,
The second class is categorized based on an arrangement of a plurality of design elements included in the canvas configured in the shape of the first class,
The arrangement of the plurality of design elements in the second class is defined as a variety of configurations and arrangements of the plurality of design elements,
The correspondence between the first class and the second class has a pre-stored matching relationship and is mapped,
The method of generating a banner design associated with an online shopping mall, wherein the correspondence relationship is subsequently updated and managed according to the creation of a new banner design. The method of claim 1,
At least some of the plurality of basic template types are composed of a combination of at least two of an image design element, a text design element, and a shape design element. The method of claim 2,
When the first basic template is created on the first canvas, a canvas design element table that displays the configuration of each design element included in the first basic template generated on the first canvas is generated together with the online shopping mall, How to create an associated banner design. The method of claim 3,
A method of generating a banner design associated with an online shopping mall, wherein the design element on the first canvas and the design element on the canvas design element table are identified in association with each other. The method of claim 4,
The canvas design element table includes a display selection box for displaying or deleting a design element on the first canvas,
A method of generating a banner design associated with an online shopping mall in which a specific design element on the first canvas is displayed or deleted in response to a user input to the display selection box. The method of claim 2,
A method of generating a banner design associated with an online shopping mall, wherein positions of a plurality of design elements included in the canvas design element table are determined by a layer of design elements on the first canvas. The method of claim 2,
The step of selecting and changing at least one of a plurality of design elements included in the first basic template or adding a new design element,
Selecting a first design element from among the plurality of design elements in response to a first user input for selecting a design element to be changed;
Parsing whether the selected first design element is an image design element, a text design element, or a shape design element; And
And changing the first design element in response to a second user input based on the type of the parsed design element-the second user input is a user input for changing the first design element. , How to create a banner design associated with an online shopping mall. The method of claim 7,
When the first design element is parsed as an image design element, as a menu for the second user input,
A banner design associated with an online shopping mall that provides a first menu related to at least two of deletion of the first design element, size adjustment, rotation, vertical inversion, left and right inversion, filter effect addition, transparency setting, and insertion of a replacement image. How to generate. The method of claim 7,
When the first design element is parsed as a text design element, as a menu for the second user input,
A method of generating a banner design associated with an online shopping mall by providing a second menu related to at least two of a text content change of the first design element, a font setting, a font size setting, a letter spacing setting, a font color setting, and a transparency setting. The method of claim 7,
When the first design element is parsed as a shape design element, as a menu for the second user input,
A method of generating a banner design associated with an online shopping mall, providing a third menu related to at least two of resizing, rotating, and changing transparency of the first design element. The method of claim 7,
Changing the first design element in response to a second user input based on the parsed design element attribute,
A method of generating a banner design associated with an online shopping mall, including the step of changing the first design element while inheriting and maintaining the basic attribute of the first design element, except for the attribute changed by the second user input. . The method of claim 1,
In response to the selection of the first basic template, generating a first canvas for editing the first basic template,
Receiving a user input related to adjustment of at least one of a size and a ratio of the first canvas;
Adjusting at least one of a size and a ratio of the first canvas based on the received user input; And
And displaying the first basic template on the adjusted first canvas. delete The method of claim 1,
The first class is a method of generating a banner design associated with an online shopping mall, including at least two of a horizontally long rectangular canvas, a vertically long rectangular shape, a square shape, and a strip shape. The method of claim 1,
In response to a request for validation of the first canvas, a banner design associated with an online shopping mall provides a verification tool for expressing the configuration of each design element in the first canvas and the attributes of each design element in html language. How to generate it. The method of claim 15,
A padding area, a border area, and a margin area formed on the outer circumferential surface of the canvas are set using the verification tool,
A method of generating a banner design associated with an online shopping mall that verifies the validity of a canvas based on a set padding area, a border area, and a blank area. The method of claim 1,
When a second basic template is additionally selected from among the plurality of basic template types, a second canvas for editing the second basic template is generated in response to the selection of the second basic template,
A method of generating a banner design associated with an online shopping mall, wherein the first canvas and the second canvas are arranged in an editable state on one screen. In the device for generating a banner design associated with an online shopping mall,
A memory for storing a plurality of basic template types for use as a basic design of a banner design of the online shopping mall;
An input unit for receiving a user input for selecting a first basic template from among a plurality of basic template types stored in the memory; And
In response to the selection of the first basic template, a first canvas for editing the first basic template-the canvas includes a space for template editing-is created, and the generated in the first canvas Reconstructed by selecting at least one of a plurality of design elements included in the first basic template-the plurality of design elements including objects constituting the basic template-by selecting and changing at least one or adding at least one new design element Including a processor for controlling the stored banner design to be stored in the memory,
The plurality of basic template types are divided into a first class and a second class,
The second class is included in the first class,
The first class is categorized with respect to the shape of the canvas,
The second class is categorized based on an arrangement of a plurality of design elements included in the canvas configured in the shape of the first class,
The arrangement of the plurality of design elements in the second class is defined as a variety of configurations and arrangements of the plurality of design elements,
The correspondence between the first class and the second class has a pre-stored matching relationship and is mapped,
The device for generating a banner design associated with an online shopping mall, wherein the correspondence relationship is subsequently updated and managed according to the creation of a new banner design.

Images